Android 左右切换页面item

转载请标明出处： 【明明爱的博客】

一、概述

好的交互会让人用起来很舒服，其实很多页面是没有必要切换页面的，例如图上密码登录和短信登录的两种情况。什么都不说，先上图：



这种登录方式没必要让用户要切换界面。

二、分析

其实以上的实现方式有很多，如viewpager、自定义view等。

本文先用viewpager来实现，后续会出用自定义view的文章。

难点分析：

- 怎样得到滑动时的事件

- 通过什么数值来得到动画的比例

- 得到需要滑动的view

ok，其实同过分析就这两个难点而已。通过查看viewpager的api可以知道viewpager提供了onPageScrolled（int position, float offset, int offsetPixels）方法，刚好解决了得到滑动事件的难点。

position 当前viewpager的fragment 第一个为0，第二个为1，如此类推

offset 滑动比例 如果position 从 0到1时 滑动比例：0~1， 当position = 1时，offset=0， offsetPixels=0。 如果position 从1~0时 滑动比例：1~0。

offsetPixels 屏幕宽度

package com.mingmingai.test_custom_login.customview;

/**
* Created by 明明爱
*/
public class CustomViewpager extends ViewPager {

private View leftView;
private View rightView;
private List<Fragment> fragmentsList;
private float mTrans;   //滑动的距离
private float mLScaleY;   //最大的缩小比例
private static final float lDefaultScaleX = 0.9f;   //leftView默认缩小X的比例
private static final float defaultScaleY = 0.9f;   //默认缩小Y的比例
private static final float scalePrecent = 0.1f;   //默认缩小的比例
private int screenWidth = 0;   //屏幕宽度
private int scrollX = 230;   //滑动多少距离之后向相反方向返回
private int defaultTranslationX = 10;   //默认移动的X距离

public CustomViewpager(Context context) {
super(context);
}

public CustomViewpager(Context context, AttributeSet attrs) {
super(context, attrs);
screenWidth = CommonUtils.getWindowWidth(context);
}

public void setFragmentsList(List<Fragment> fragmentsList) {
this.fragmentsList = fragmentsList;
}

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return false;   //拦截
}

@Override
public boolean onTouchEvent(MotionEvent ev) {
return false;   //不给viewpager滑动
}

@Override
protected void onPageScrolled(int position, float offset, int offsetPixels) {
if (position +1<= fragmentsList.size() - 1) {
// 滑动特别小的距离时，我们认为没有动，可有可无的判断
float effectOffset = isSmall(offset) ? 0 : offset;
leftView = fragmentsList.get(position).getView();   //得到View

rightView = fragmentsList.get(position + 1).getView();   //得到View
startAnimate(leftView, rightView, effectOffset, offsetPixels);
}
super.onPageScrolled(position, offset, offsetPixels);
}

private void startAnimate(View leftView, View rightView, float effectOffset, int positionOffsetPixels) {
if (leftView != null)
{
manageLayer(leftView, true);
mLScaleY = (float) (defaultScaleY - scalePrecent*effectOffset);

if (positionOffsetPixels > scrollX){
mTrans = scrollX*((positionOffsetPixels-scrollX)/(screenWidth - scrollX))+(positionOffsetPixels-scrollX)-defaultTranslationX;
rightView.bringToFront();
}else{
leftView.bringToFront();
mTrans = -defaultTranslationX;
}
ViewHelper.setTranslationX(leftView,mTrans);
ViewHelper.setScaleX(leftView, lDefaultScaleX);
ViewHelper.setScaleY(leftView, mLScaleY);
}
if (rightView != null)
{
manageLayer(rightView, true);
mLScaleY = (float) (defaultScaleY - scalePrecent*(1-effectOffset));
ViewHelper.setScaleX(rightView, lDefaultScaleX);
ViewHelper.setScaleY(rightView, mLScaleY);

if (positionOffsetPixels > scrollX){
mTrans = -getWidth()+scrollX*2+defaultTranslationX;
if (Math.abs(mTrans) >= getWidth()-positionOffsetPixels){
mTrans = -getWidth() - getPageMargin() + positionOffsetPixels+defaultTranslationX;
}
}else{
mTrans = -getWidth() - getPageMargin() + positionOffsetPixels*2+defaultTranslationX;
}
ViewHelper.setTranslationX(rightView, mTrans);
}
}

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
private void manageLayer(View v, boolean enableHardware)
{
//      if (!API_11)
//          return;
int layerType = enableHardware ? View.LAYER_TYPE_HARDWARE
: View.LAYER_TYPE_NONE;
if (layerType != v.getLayerType())
v.setLayerType(layerType, null);
}

private boolean isSmall(float positionOffset)
{
return Math.abs(positionOffset) < 0.0001;
}
}

代码分析：

leftView和rightView分别是要滑动的两个View，主要的动画都在startAnimate（）里，mLScaleY是leftView缩小或放大的比例。if (positionOffsetPixels > scrollX) 当leftView滑动多少距离之后向相反方向返回，之后将rightView在前面显示：rightView.bringToFront();。mTrans是算出需要滑动的距离。

其实viewpager默认的布局是：



所以一开始就把fragment2移动到了fragment1的下面：mTrans = -getWidth() - getPageMargin() + positionOffsetPixels*2+defaultTranslationX;

要理解了动画滑动是滑动view的内容，而非view的实体。但viewpager本身的滑动是会滑动实体的，通过看viewpager的源码，发现viewpager的动画是用了Scroller对象来滑动的。Scroller每次滑动都会调用onDraw里的computeScroll（）方法。只有理解好这含义，其他就很好理解了。