Launcher-自定义实现类似android主界面的滑屏换屏控件

今天讲一下一个类似android主界面的滑屏控件，这个滑屏在微读的主界面和看书时左右滑平翻页中都有用到，在具体的应用效果如下：

实现思路，刚开始的时候我是用ViewFlipper控件来做非常的简单但是实现不了拖拽移动屏幕的效果，最终放弃决定自定义一个控件实现这样效果。

接下来我详细的解说一下我开发时写的这个实验demo，软件中用的滑屏就是由这样的代码实现的。

首先新建一个控件类TouchPageView并且继承自ViewGroup，左右滑动换屏我的实现是在TouchPageView添加3个子view分别代表看不到的左边屏幕、可以看到的中间屏幕、看不到的右边屏幕，这样在滑屏时候就可以通过不断调整这3个view的位置实现连续不间断滑屏换屏，下面的实验中我分别把3个view设置成红色、绿色、黄色这样切换的时候可以看到明显效果，这3个view在TouchPageView的构造方法中调用init方法进行初始化：

private void init()
{
views= new ArrayList<LinearLayout>();
view1=new LinearLayout(context);
view1.setBackgroundColor(Color.YELLOW);
this.addView(view1);
TextView tv=new TextView(context);
tv.setText("测试");
view1.addView(tv);
views.add(view1);

view2=new LinearLayout(context);
view2.setBackgroundColor(Color.RED);
this.addView(view2);
views.add(view2);

view3=new LinearLayout(context);
view3.setBackgroundColor(Color.GREEN);
this.addView(view3);
views.add(view3);

final ViewConfiguration configuration = ViewConfiguration.get(getContext());
mMaximumVelocity = configuration.getScaledMaximumFlingVelocity();
}

复制代码
复制代码

接下来的实现是关键，重写onLayout方法对3个view的显示位置布局进行控制，通过下面的这个方法，把3个view进行水平一个跟着一个进行布局显示。

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int childLeft = -1;
final int count = views.size();
//水平从左到右放置
for (int i = 0; i < count; i++) {
final View child =views.get(i);
if (child.getVisibility() != View.GONE) {
final int childWidth = child.getMeasuredWidth();
if(childLeft==-1)
{
childLeft=-childWidth;
}
child.layout(childLeft, 0, childLeft + childWidth, child.getMeasuredHeight());
childLeft += childWidth;
}
}

}

复制代码
复制代码

3个view位置放置好之后，接下来的实现实现手指在屏幕拖拽滑动时让3个view跟着手指的位置进行变化显示，这个肯定是在onTouchEvent方法中实现了，分别在MotionEvent.ACTION_DOWN、MotionEvent.ACTION_MOVE、MotionEvent.ACTION_UP三个手指状态中进行控制，在下面的实现中还采用了VelocityTracker的方法对手指的滑动速度进行跟踪，这样根据滑动速度决定屏幕往哪个方向换屏，关键的代码如下：

@Override
public boolean onTouchEvent(MotionEvent ev){

if(!lock)
{
if (mVelocityTracker == null) {
mVelocityTracker = VelocityTracker.obtain();
}
mVelocityTracker.addMovement(ev);

final int action = ev.getAction();
final float x = ev.getX();
final float y = ev.getY();

switch (action) {
case MotionEvent.ACTION_DOWN://按下去
if(touchState==TOUCH_STATE_REST)
{
//记录按下去的的x坐标
lastMotionX = x;
touchState=TOUCH_STATE_MOVING;

isMoved=false;
}

break;
case MotionEvent.ACTION_MOVE://拖动时
if(touchState==TOUCH_STATE_MOVING)
{
float offsetX=x-lastMotionX;
float offsetY=y-lastMotionY;

if(isMoved)
{
lastMotionX=x;
lastMotionY=y;

final int count = views.size();
//水平从左到右放置
for (int i = 0; i < count; i++) {
final View child =views.get(i);
if (child.getVisibility() != View.GONE) {
final int childWidth = child.getMeasuredWidth();
int childLeft = child.getLeft()+(int)offsetX;
child.layout(childLeft, 0, childLeft + childWidth, child.getMeasuredHeight());
childLeft += childWidth;
}
}
}
else if(Math.abs(offsetX)>TOUCH_SLOP||Math.abs(offsetY)>TOUCH_SLOP)
{
//移动超过阈值，则表示移动了
isMoved=true;
removeCallbacks(mLongPressRunnable);
}
}

break;
case MotionEvent.ACTION_UP://放开时
//释放了
removeCallbacks(mLongPressRunnable);

if(isMoved)
{
if(touchState==TOUCH_STATE_MOVING)
{
touchState=TOUCH_STATE_SLOWING;
int sign=0;
final VelocityTracker velocityTracker = mVelocityTracker;
//计算当前速度
velocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);
//x方向的速度
int velocityX = (int) velocityTracker.getXVelocity();
if(velocityX > SNAP_VELOCITY)//足够的能力向左
{
sign=1;
Log.e("enough to move left", "true");
}
else if (velocityX < -SNAP_VELOCITY)//足够的能力向右
{
sign=-1;
Log.e("enough to move right", "right");
}
else
{
sign=0;
}
moveToFitView(sign);
if (mVelocityTracker != null) {
mVelocityTracker.recycle();
mVelocityTracker = null;
}

}
}

break;
}
}
return true;
}

复制代码
复制代码

完成手指滑的功能后，最后在手指离开屏幕的时候，让3个view滑动到合适的位置，保证当前屏幕只能看到一个完整的view另外2个view不可见，并且在滑动的过程中为了达到比较自然的效果，采用减速滑动的实现，这里是用了Handler进行间隔的减速移动效果，这样滑动起来比较舒服，其实最好的效果应该加入阻尼效果，就是让view一定程度的冲过屏幕边界然后在回弹，经过几次这样的缓减至速度为零然后最终停止，这个可以由各位自己去实现，并不难写。

int offset=0;
private void moveToFitView(int sign)
{
boolean b=swapView(sign);
if(true)
{
View view1=views.get(1);
int left=view1.getLeft();
//int offset=0;
if(left!=0)
{
offset=-1*left;
}

moveView();
}
}

FlipAnimationHandler mAnimationHandler;
int ovv=40;
private void moveView()
{
final int count = views.size();

if(offset!=0)
{
int ov=0;
if(offset>0)
{
ov=ovv;
}
else
{
ov=-1*ovv;
}
ovv=ovv-3;
if(ovv<1)
{
ovv=3;
}
if(Math.abs(offset)<Math.abs(ov))
{
ov=offset;
offset=0;

}
else
{
offset=offset-ov;
}

//水平从左到右放置
for (int i = 0; i < count; i++) {
final View child =views.get(i);
final int childWidth = child.getMeasuredWidth();
int childLeft = child.getLeft()+ov;
child.layout(childLeft, 0, childLeft + childWidth, child.getMeasuredHeight());
childLeft += childWidth;
}

if(mAnimationHandler==null)
{
mAnimationHandler = new FlipAnimationHandler();
}
mAnimationHandler.sleep(1);
}
else
{
ovv=40;
touchState=TOUCH_STATE_REST;
}
}

class FlipAnimationHandler extends Handler {
@Override
public void handleMessage(Message msg) {
TouchPageView.this.moveView();
}

public void sleep(long millis) {
this.removeMessages(0);
sendMessageDelayed(obtainMessage(0), millis);
}
}

复制代码
复制代码

整个自定义控件核心的思路和代码就上面这些了。