新浪微博客户端新特性滚动视图和启动界面实现
2013年8月20日新浪微博客户端开发之启动界面实现
前言：
使用过新浪微博客户端的童鞋都清楚，客户端每一次升级之后第一次启动界面就会有新特性的介绍，用户通过左右滑动视图可以查看新的特性，查看完最后一个特性之后就进入了主界面了。如果再一次启动程序的时候，就不会再显示新特性介绍的视图了，就会有一个启动界面，延迟一小会然后直接进入主界面。现在很多的应用也是这样，一开始都会介绍这款新应用的一些特性的，这样感觉用户体验也比较良好。我想网上也有很多大神发表过相应的文章介绍这种功能的实现过程，不过我比较喜欢穿一手鞋，记录下自己开发的点滴，这也是分享技术的好去处。
我就用官方新浪微博客户端的新特性来展示这项功能的实现：
上面就是界面效果，下面来看代码实现。
只贴功能滚动视图的布局文件，其他的可以到我的资源页下载源码参考
下载地址：http://download.csdn.net/detail/wwj_748/5981415
/2013.08.20_Function_Scroller_Demo/res/layout/function_scroller.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.wwj.scroller.MyScrollLayout
android:id="@+id/ScrollLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/guide_1" >
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/guide_2" >
</FrameLayout><FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/guide_3" >
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/guide_4" >
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00000000" >
</FrameLayout>
</com.wwj.scroller.MyScrollLayout>
<LinearLayout
android:id="@+id/llayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="16dp"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:clickable="true"
android:src="@drawable/guide_round" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:clickable="true"
android:src="@drawable/guide_round" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:clickable="true"
android:src="@drawable/guide_round" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:clickable="true"
android:src="@drawable/guide_round" />
</LinearLayout>
</RelativeLayout>
注意上面的滚动视图是自定义的，所以要注意标签的编写格式，包名+文件名，写全了。
正式介绍自定义滚动视图的代码实现：
/2013.08.20_Function_Scroller_Demo/src/com/wwj/scroller/MyScrollLayout.java
package com.wwj.scroller;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Scroller;
/**
* 自定义滑动视图
* @author Administrator
*
*/
public class MyScrollLayout extends ViewGroup {
private VelocityTracker mVelocityTracker; // 用于判断甩动手势
private static final int SNAP_VELOCITY = 600; // 滑动距离
private Scroller mScroller; // 滑动控制器
private int mCurScreen; // 当前屏幕
private int mDefaultScreen = 0; // 默认屏幕
private float mLastMotionX;
private OnViewChangeListener mOnViewChangeListener;
public MyScrollLayout(Context context) {
super(context);
init(context);
}
public MyScrollLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
public MyScrollLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
// 初始化变量
private void init(Context context) {
mCurScreen = mDefaultScreen;
mScroller = new Scroller(context);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (changed) {
int childLeft = 0;
final int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
final View childView = getChildAt(i); // 得到孩子
if (childView.getVisibility() != View.GONE) {
final int childWidth = childView.getMeasuredWidth(); // 获取view测量的宽度
childView.layout(childLeft, 0, childLeft + childWidth, childView.getMeasuredHeight());
childLeft += childWidth;
}
}
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
final int width = MeasureSpec.getSize(widthMeasureSpec);
final int count = getChildCount();
for (int i = 0; i < count; i++) {
getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);
}
scrollTo(mCurScreen * width, 0); // 设置滚动视图的位置
}
// 滑动到目标位置
public void snapToDestination() {
final int screenWidth = getWidth();
final int destScreen = (getScrollX() + screenWidth / 2) / screenWidth;
snapToScreen(destScreen);
}
// 滑动到屏幕
public void snapToScreen(int whichScreen) {
// 获得有效的页面
whichScreen = Math.max(0, Math.min(whichScreen, getChildCount() - 1));
if (getScrollX() != (whichScreen * getWidth())) {
final int delta = whichScreen * getWidth() - getScrollX();
mScroller.startScroll(getScrollX(), 0, delta, 0, Math.abs(delta) * 2);
mCurScreen = whichScreen;
invalidate(); // 重绘布局
if (mOnViewChangeListener != null) {
mOnViewChangeListener.OnViewChange(mCurScreen);
}
}
}
@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()) {
scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
postInvalidate();
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
final int action = event.getAction();
final float x = event.getX();
switch (action) {
case MotionEvent.ACTION_DOWN: // 手指按下动作
if (mVelocityTracker == null) {
mVelocityTracker = VelocityTracker.obtain(); // 得到一个新的甩动手势
mVelocityTracker.addMovement(event);
}
if (!mScroller.isFinished()) {
mScroller.abortAnimation();
}
mLastMotionX = x;
break;
case MotionEvent.ACTION_MOVE:
int deltaX = (int) (mLastMotionX - x);
if(IsCanMove(deltaX)) {
if(mVelocityTracker != null) {
mVelocityTracker.addMovement(event);
}
mLastMotionX = x;
scrollBy(deltaX, 0);
}
break;
case MotionEvent.ACTION_UP: // 手指抬起
int velocityX = 0;
if (mVelocityTracker != null) {
mVelocityTracker.addMovement(event);
mVelocityTracker.computeCurrentVelocity(1000);
velocityX = (int) mVelocityTracker.getXVelocity();
}
if (velocityX > SNAP_VELOCITY && mCurScreen > 0) {
// 往左移动
snapToScreen(mCurScreen - 1);
} else if (velocityX < - SNAP_VELOCITY && mCurScreen < getChildCount() - 1) {
// 往右移动
snapToScreen(mCurScreen + 1);
} else {
snapToDestination();
}
if (mVelocityTracker != null) {
mVelocityTracker.recycle();
mVelocityTracker = null;
}
break;
}
return true;
}
/**
* 判断是否可以移动
* @param deltaX
* @return
*/
private boolean IsCanMove(int deltaX) {
if (getScrollX() <= 0 && deltaX < 0) {
return false;
}
if (getScrollX() >= (getChildCount() - 1) * getWidth() && deltaX > 0) {
return false;
}
return true;
}
public void SetOnViewChangeListener(OnViewChangeListener listener) {
mOnViewChangeListener = listener;
}
// 接口
public interface OnViewChangeListener {
public void OnViewChange(int View);
}
}
接着是启动界面的实现了
/2013.08.20_Function_Scroller_Demo/src/com/wwj/scroller/SplashActivity.java
package com.wwj.scroller;
import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.content.Intent;
/**
* 程序功能：实现滚动显示新功能介绍 第一次启动程序的时候用户左右滑动查看新特性，查看完之后进入主界面 再次启动的时候直接进入主界面
*
* @author wwj
*
*/
public class SplashActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.splash);
// 判断功能介绍界面是否显示过
boolean isPlayed = SettingUtil.get(this,
SettingUtil.FUNCTION_SCROLLER_PLAYED, false);
if (!isPlayed) { // 进入功能介绍界面
startActivity(new Intent(this, FunctionScroller.class));
finish();
return;
}
// 延迟进入
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
startActivity(new Intent(SplashActivity.this, WeiboMain.class));
finish();
}
}, 2500);
}
}
新特性介绍的Activity，每次滚动一个视图都要表示视图所在位置，就是下面的点指示器的改变实现。
/2013.08.20_Function_Scroller_Demo/src/com/wwj/scroller/FunctionScroller.java
package com.wwj.scroller;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import com.wwj.scroller.MyScrollLayout.OnViewChangeListener;
public class FunctionScroller extends Activity implements OnClickListener{
private MyScrollLayout mScrollLayout; // 滑动视图
private ImageView[] mImageViews; // 点图片
private int mViewCount; // 视图个数
private int currentPosition = 0; // 当前位置
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.function_scroller);
findViews();
init();
}
private void findViews() {
mScrollLayout = (MyScrollLayout) findViewById(R.id.ScrollLayout);
LinearLayout linearLayout = (LinearLayout) findViewById(R.id.llayout);
mViewCount = mScrollLayout.getChildCount();
mImageViews = new ImageView[mViewCount - 1]; // 最后一个view是黑屏过度，所以- 1
for (int i = 0; i < (mViewCount - 1); i++) {
mImageViews[i] = (ImageView) linearLayout.getChildAt(i);
mImageViews[i].setEnabled(true);
mImageViews[i].setTag(i);
mImageViews[i].setOnClickListener(this);
}
}
private void init() {
mImageViews[currentPosition].setEnabled(false);
mScrollLayout.SetOnViewChangeListener(new OnViewChangeListener() {
@Override
public void OnViewChange(int index) {
if (index == mViewCount - 1) {
// 记录滚屏已经播放过，以后不再播放
SettingUtil.set(FunctionScroller.this, SettingUtil.FUNCTION_SCROLLER_PLAYED, true);
startActivity(new Intent(FunctionScroller.this, WeiboMain.class));
finish();
}
setCurPoint(index);
}
});
}
/**
* 设置位置显示
* @param index
*/
private void setCurPoint(int index) {
if (index < 0 || index > mViewCount - 2 || currentPosition == index) {
return;
}
mImageViews[currentPosition].setEnabled(true);
mImageViews[index].setEnabled(false);
currentPosition = index;
}
@Override
public void onClick(View v) {
int pos = (Integer) (v.getTag());
setCurPoint(pos);
mScrollLayout.snapToScreen(pos);
}
}
核心代码就是以上的了，实现起来也并不太复杂。童鞋们快快整合到你们的应用上面去吧。
关于新浪微博客户端的开发进度比较慢，因为平时要工作，也并不是时刻都有精力去写博客和编写代码的，程序员也需要生活，代码并不是一切，各位程序员们要注意身体啊。下一篇博客就会介绍主界面的实现了，可能并不能实现官方那样的效果，一些复杂的界面效果由于本人的能力有限也没办法实现，不过作为学习和实战已经够用了。