Android 精通自定义视图(4)

项目Demo：https://github.com/liaozhoubei/CustomViewDemo

侧滑面板的实现

侧滑面板在app的应用中也是非常常见的一种视图，当我们在屏幕上往右滑动的时候就会在屏幕左侧滑出一个菜单栏，效果如下：

Sliding.gif

这种效果是怎么做出来的呢？

实现原理

这种侧滑效果的实现原理非常简单，就是将左侧菜单和屏幕内容连在一起，如下

sliding.png

在一般情况下我们都是隐藏左侧菜单，主界面只显示新闻内容，但是当我们需要菜单时，就改变整个界面的x轴的值，将整个面板往右移动，形成一种左侧菜单覆盖了主界面的感觉，但是仔细观察确实整个面板往右移动的。

那么我们要更改左侧菜单的哪些数值呢？对于android来说，它确定一个图标的位置是从视图的左上角的位置确定的，但在绘制一个视图的时候要确定其顶部、左侧、右侧，底部的位置，那右侧和底部的数值是多少？

在绘制视图时，右侧和底部的数字并不是是个一个视图的宽度和高度，而是视图的右侧距离屏幕左侧的距离以及视图的底部距离屏幕顶部的举例，如下图：

位置.png

当然，这些都是题外话，事实上我们将面板移动，只需要改变屏幕左侧的数值就可以了。如要将左侧菜单移出来，在左侧菜单隐藏的时候，其左侧距离 left = -左侧菜单宽度， 当左侧菜单显示的时候，左侧距离 left = 0，也就是将 -左侧菜单宽度不断增加直至0，这时就显示了左侧菜单。

基本的原理就是如此，我们现在来看看代码实现吧！

代码实现

public class SlideMenu extends ViewGroup {
private float downX; // 按下的x坐标
private float downY; // 按下的y坐标
private float moveX;
public static final int MAIN_STATE = 0;
public static final int MENU_STATE = 1;
private int currentState = MAIN_STATE; // 当前模式
private Scroller scroller;

public SlideMenu(Context context) {
    super(context);
    init();
}

public SlideMenu(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public SlideMenu(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    // 初始化滚动器, 数值模拟器
    scroller = new Scroller(getContext());
}

/**
 * 测量并设置 所有子View的宽高
 * widthMeasureSpec: 当前控件的宽度测量规则
 * heightMeasureSpec: 当前控件的高度测量规则
 */
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    
    // 指定左面板的宽高
    View leftMenu = getChildAt(0);
    leftMenu.measure(leftMenu.getLayoutParams().width, heightMeasureSpec);
    
    // 指定主面板的宽高
    View mainContent = getChildAt(1);
    mainContent.measure(widthMeasureSpec, heightMeasureSpec);
    
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

/**
 * changed: 当前控件的尺寸大小, 位置 是否发生了变化
 * left:当前控件 左边距
 * top:当前控件 顶边距
 * right:当前控件 右边界
 * bottom:当前控件 下边界
 */
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    
    // 摆放内容, 左面板
    View leftMenu = getChildAt(0);
    leftMenu.layout(-leftMenu.getMeasuredWidth(), 0, 0, b);
    
    // 主面板
    getChildAt(1).layout(l, t, r, b);
}

/**
 * 处理触摸事件
 */
@Override
public boolean onTouchEvent(MotionEvent event) {
    
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
        downX = event.getX();
        break;
    case MotionEvent.ACTION_MOVE:
        moveX = event.getX();
        
        // 将要发生的偏移量/变化量
        int scrollX = (int) (downX - moveX);
        
        // 计算将要滚动到的位置, 判断是否会超出去, 超出去了.不执行scrollBy
        // getScrollX() 当前滚动到的位置
        int newScrollPosition = getScrollX() + scrollX;
        
        if (newScrollPosition < -getChildAt(0).getMeasuredWidth()){ // 限定左边界
            // < -240
            scrollTo(-getChildAt(0).getMeasuredWidth(), 0);
        } else if (newScrollPosition > 0){ // 限定右边界
            // > 0
            scrollTo(0, 0);
        } else {
            // 让变化量生效
            scrollBy(scrollX, 0);
        }
        
        downX = moveX;
        
        break;
    case MotionEvent.ACTION_UP:
        // 根据当前滚动到的位置, 和左面板的一半进行比较
        int leftCenter = (int) (- getChildAt(0).getMeasuredWidth() / 2.0f);
        
        if(getScrollX() < leftCenter){
            // 打开, 切换成菜单面板
            currentState = MENU_STATE;
            updateCurrentContent();
        }else {
            // 关闭, 切换成主面板
            currentState = MAIN_STATE;
            updateCurrentContent();
        }
        
        break;
    default:
        break;
    }
    
    return true; // 消费事件
}

/**
 * 根据当前的状态, 执行 关闭/开启 的动画
 */
private void updateCurrentContent() {
    int startX = getScrollX();
    int dx = 0;
    // 平滑滚动
    if(currentState == MENU_STATE){
        // 打开菜单
        //scrollTo(-getChildAt(0).getMeasuredWidth(), 0);
        
        dx = -getChildAt(0).getMeasuredWidth() - startX;
        
    } else {
        // 恢复主界面
        //scrollTo(0, 0);
        
        dx = 0 - startX;
    }
    
    // startX: 开始的x值
    // startY: 开始的y值
    // dx: 将要发生的水平变化量. 移动的x距离
    // dy: 将要发生的竖直变化量. 移动的y距离
    // duration : 数据模拟持续的时长
    
    // 1. 开始平滑的数据模拟
    int duration = Math.abs(dx * 2); 
    scroller.startScroll(startX, 0, dx, 0, duration);
    
    invalidate();// 重绘界面 -> drawChild() -> computeScroll();
}

//2. 维持动画的继续
@Override
public void computeScroll() {
    super.computeScroll();
    if(scroller.computeScrollOffset()){ // 直到duration事件以后, 结束
        // true, 动画还没有结束
        // 获取当前模拟的数据, 也就是要滚动到的位置
        int currX = scroller.getCurrX(); 
        System.out.println("currX: " + currX);
        scrollTo(currX, 0); // 滚过去
        
        invalidate(); // 重绘界面-> drawChild() -> computeScroll();循环
    }
}
// 打开左侧菜单
public void open(){
    currentState = MENU_STATE;
    updateCurrentContent();
}
// 关闭左侧菜单
public void close(){
    currentState = MAIN_STATE;
    updateCurrentContent();
}

public void switchState(){
    if(currentState == MAIN_STATE){
        open();
    }else {
        close();
    }
}
// 获得现在的开关状态
public int getCurrentState(){
    return currentState;
}


/**
 * 拦截判断
 */
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    
    switch (ev.getAction()) {
    case MotionEvent.ACTION_DOWN:
        downX = ev.getX();
        downY = ev.getY();
        break;
    case MotionEvent.ACTION_MOVE:
        
        float xOffset = Math.abs(ev.getX() - downX);
        float yOffset = Math.abs(ev.getY() - downY);
        
        if(xOffset > yOffset && xOffset > 5){ // 水平方向超出一定距离时,才拦截
            return true; // 拦截此次触摸事件, 界面的滚动
        }
        
        break;
    case MotionEvent.ACTION_UP:
        
        break;

    default:
        break;
    }
    return super.onInterceptTouchEvent(ev);
}
}

以上就是实现侧滑菜单视图的全部代码，当然这里并没有将layout布局代码贴出来，这布局代码页并没有太难的地方，也就是一个RelativeLayout布局包裹着自定义视图，详情可查看Demo，地址：

    https://github.com/liaozhoubei/CustomViewDemo

作为一个自定义视图，重写父类的三个构造方法，关于这三个构造方法的介绍可查看上一篇文章，或者直接去开发者官网看了解。

最为一个自定义视图，首先要使用onMeasure()方法获得视图的宽高（关于onMeasure()的介绍上一篇文章也有）

    // 指定左面板的宽高
    View leftMenu = getChildAt(0);
    leftMenu.measure(leftMenu.getLayoutParams().width, heightMeasureSpec);
    
    // 指定主面板的宽高
    View mainContent = getChildAt(1);
    mainContent.measure(widthMeasureSpec, heightMeasureSpec);

由于左侧菜单和主视图都是在SlideMenu视图里面，所以可以用getChildAt()，而左侧菜单leftMenu之所以位置为0，这是因为我们在SlideMenu的布局中先将leftMenu写出来，然后在写mainContent。事实上不管写了多少个子视图，只需要按照摆放的顺序就能够获得相应视图。

我们看到测量左侧菜单leftMenu的宽度时使用的是leftMenu.getLayoutParams().width，而主视图mainContent则使用默认值widthMeasureSpec，这是因为leftMenu的宽度是额外设置为240dp，而主视图mainContent这是默认的使用整个屏幕宽度的。

接着我们需要用onLayout()将视图摆放好。为什么要调用onLayout()摆放视图呢？这是因为Android有默认的摆放视图的位置，如果你没有设定视图的摆放位置，那么视图将不会显示。摆放代码如下：

    // 摆放内容, 左面板
    View leftMenu = getChildAt(0);
    leftMenu.layout(-leftMenu.getMeasuredWidth(), 0, 0, b);
    
    // 主面板
    getChildAt(1).layout(l, t, r, b);

这里我们将leftMenu摆放在屏幕之外，也就是将其左侧距离设置为-leftMenu.getMeasuredWidth()，这样就使得不会在屏幕之中看到这个视图。

ok，视图已经摆放好了，那么就要设置触摸事件onTouchEvent()在滑动的时候将leftMenu菜单显示出来。

在onTouchEvent()遇到两个比较陌生的方法scrollTo()和scrollBy()。

scrollTo()是在当前视图内容偏移至(x , y)坐标处，即显示(可视)区域位于(x , y)坐标处，也就是说如果你当前位置为(10,20)，然后将X轴的值设置为50，那么视图将直接跳到（50,20）这个位置。

而scrollBy()是在当前视图内容继续偏移(x , y)个单位，显示(可视)区域也跟着偏移(x,y)个单位，也就是说如果当前位置为(10,20)，然后将X轴的值设置为50，那么视图将直接移动到（10 + 50,20）这个位置。

理解scrollTo()和scrollBy()这两个方法是实现屏幕滑动的重中之重，所以必须要理解它们的使用方法。

我们在将目光移动到onTouchEvent()的MotionEvent.ACTION_MOVE手指移动时间中，代码：

        moveX = event.getX();            
        // 将要发生的偏移量/变化量
        int scrollX = (int) (downX - moveX);
        
        // 计算将要滚动到的位置, 判断是否会超出去, 超出去了.不执行scrollBy
        // getScrollX() 当前滚动到的位置
        int newScrollPosition = getScrollX() + scrollX;
        
        if (newScrollPosition < -getChildAt(0).getMeasuredWidth()){ // 限定左边界
            // < -240
            scrollTo(-getChildAt(0).getMeasuredWidth(), 0);
        } else if (newScrollPosition > 0){ // 限定右边界
            // > 0
            scrollTo(0, 0);
        } else {
            // 让变化量生效
            scrollBy(scrollX, 0);
        }            
        downX = moveX;

这这段代码中我们限定了整个视图（leftMenu和mainContent）在屏幕中的移动范围，保证了当leftMenu在完全展示出来之后，视图不能再往右移动；但mainContent在屏幕中完全展示出来之后，视图不能再往左移动了。

事实上到了这一步，侧滑菜单的功能已经基本完成了，下面的代码仅仅是为了让侧滑菜单的功能更完美而存在的。

onTouchEvent()中的MotionEvent.ACTION_UP手指离开屏幕事件中的代码，里面的意思就是但我们滑动屏幕，如果滑动显示leftMenu的宽度大于一半时，手指离开屏幕，leftMenu会完全显示；但滑动显示leftMenu的宽度小于一半时，leftMenu会隐藏。

而updateCurrentContent()方法则是根据屏幕状态决定是否打开leftMenu或者关闭leftMenu。

当然我们还重新了一个computeScroll()方法，它是与Scroller类配套使用的，重写这个方法能在MotionEvent.ACTION_UP手指离开屏幕事件发生时，开启leftMenu或者关闭leftMenu显得更平滑流畅。

剩下的switchState()方法和open()、close()方法，都是提供给外部打开leftMenu或者关闭leftMenu的方法。

最后就是onInterceptTouchEvent()，这一方法设计到Android分发触摸事件的机制，需要读者额外了解，在这里重写起到的作用是如果我们在leftMenu视图的区域往左滑动，可以将mainContent滑动出来。如果没有重写这个方法，那么我们在leftMenu视图的区域往左滑动将会不起作用，只有在mainContent中滑动才起作用。

项目Demo：https://github.com/liaozhoubei/CustomViewDemo

扩展阅读：

Android 精通自定义视图(1) http://www.jianshu.com/p/c2195269ce44

Android 精通自定义视图(2) http://www.jianshu.com/p/092e126b623f

Android 精通自定义视图(3) http://www.jianshu.com/p/1660479e76ef

Android 精通自定义视图(5) http://www.jianshu.com/p/93feac19c396