【Android】手把手教你上滑解锁的效果

前情提要

最近，公司开发的APP中要实现类似上滑解锁效果的推荐页，捣腾了两天，基本实现了效果，附效果图如上。接下来和大家聊聊如何实现这样的效果。

实现思路

这个效果的实现思路主要围绕手指触屏事件展开，注意点如下：

• 以ACTION_DOWN和ACTION_UP的Y轴距离差与自定义的滑动阈值作比较来判断是否上滑
• 借助Scroller类，触发LinearLayout流畅滑动的效果
• 使用GestureListener实现阻尼滑动效果
• 未解锁状态禁止向下滑动

详细设计

基于上述几个注意点，考虑细节分别如下：

• 有效上滑
  

  有效上滑
  如上如，锁屏状态下，定义有效滑动阈值standardH，若上滑高度差超过standardH，则判断为有效滑动，布局滑动至屏幕顶部（不可见）；否则如向下滑动、向上滑动距离不够等，都作为无效滑动，此时布局恢复至原来位置。

• 流畅滚动
  LinearLayout本身是没有smoothScrollTo方法的，仅有的滚动方法只有scrollTo和scrollBy，但是这种滚动方法是突变的，不是线性的，想要实现smoothScrollTo方法，需要借助Scroller类来实现。Scroller类中有computeScroll方法，它能实现流畅滚动的原因是，它将初始位置和目标滑动位置之间的距离分成N份依次调用scrollTo方法，通过postInvalidate在每次调用scrollTo方法后刷新视图，以此来达到流畅滑动的效果，其实ViewPager、ScrollView等控件都是通过Scroller来实现流畅滑动的。
  Scroller的简单实用参考这里。

• 阻尼滑动
  什么是阻尼滑动？我们先来看看这张图：
  

  阻尼滑动效果
  从图中可以看到鼠标原来的位置在“更多精彩”图标的顶部，随着向上拖动，鼠标开始偏离图标顶部，就好像一根橡皮筋，拉得越开，需要用更大的力，阻尼滑动就给我们这样的感觉。想实现这样的效果，需要借助GestureDetector.OnGestureListener接口的onScroll API方法的第四个参数distanceY，通过简单算法的计算让其实际滑动位置随distanceY变大，不容易滑动（也就是改变的越小）。

• 锁屏状态禁止向下滑动
  通过重写onTouchListener方法，记录ACTION_DOWN的位置，然后记录ACTION_MOVE的位置，如果判断它有向下滑动的倾向，则在ACTION_MOVE里，将其复位，从而达到禁止下滑的效果。

（伪）代码实现

首先按自定义控件的套路来，new一个类，继承LinearLayout，填充写好的布局，重写onTouch方法：

public class PagerLayout extends LinearLayout {
    public PagerLayout(Context context) {
        this(context, null);
    }

    public PagerLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PagerLayout(final Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 填充视图
        mContainer = LayoutInflater.from(context).inflate(R.layout.default_view, this, false); 
        // 添加视图
        this.addView(mContainer);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
    
                break;
            case MotionEvent.ACTION_UP:

                break;
            case MotionEvent.ACTION_MOVE:

                break;
        }
        return super.onTouchEvent(event);
}

禁止下拉并判断是否为有效上滑：

switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
        // 获取收按下时的y轴坐标
        mDownY = event.getY();
        break;
    case MotionEvent.ACTION_UP:
        // 获取视图容器滚动的y轴距离
        int scrollY = this.getScrollY();
        // 未超过制定距离，则返回原来位置
        if (scrollY < 300) {
            // 准备滚动到原来位置
        } else { // 超过指定距离，则上滑隐藏
            // 准备滚动到屏幕上方
        }
        break;
    case MotionEvent.ACTION_MOVE:
        // 获取当前滑动的y轴坐标
        float curY = event.getY();
        // 获取移动的y轴距离
        float deltaY = curY - mDownY;
        // 阻止视图在原来位置时向下滚动
        if (deltaY < 0 || getScrollY() > 0) {
            // 滚动至原始位置
        } else {
            return true;
        }
}

流畅滑动实现：

private Scroller mScroller = new Scroller(context);

// 重写computeScroll
@Override
public void computeScroll() {
    if (mScroller.computeScrollOffset()) {
        scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
        //必须执行postInvalidate()从而调用computeScroll()
        //其实,在此调用invalidate();亦可
        postInvalidate();
    }
    super.computeScroll();
}

//滚动到目标位置
private void prepareScroll(int fx, int fy) {
    int dx = fx - mScroller.getFinalX();
    int dy = fy - mScroller.getFinalY();
    beginScroll(dx, dy);
}

//设置滚动的相对偏移
private void beginScroll(int dx, int dy) {
    //第一,二个参数起始位置;第三,四个滚动的偏移量
    mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), dx, dy);
    //必须执行invalidate()从而调用computeScroll()
    invalidate();
}

阻尼滑动实现：

private GestureDetector mGestureDetector = new GestureDetector(context, new GestureListenerImpl());

class GestureListenerImpl implements GestureDetector.OnGestureListener {
    @Override
    public boolean onDown(MotionEvent e) {
        return true;
    }

    @Override
    public void onShowPress(MotionEvent e) {
    }

    @Override
    public boolean onSingleTapUp(MotionEvent e) {
        return false;
    }
    //控制拉动幅度:
    //int disY=(int)((distanceY - 0.5)/2);
    //亦可直接调用:
    //smoothScrollBy(0, (int)distanceY);
    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2,float distanceX, float distanceY) {
        int disY = (int) ((distanceY - 0.5) / 2);
        beginScroll(0, disY);
        return false;
    }

    public void onLongPress(MotionEvent e) {
    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) {
        return false;
    }
}

其他封装：
前面我们说到自定义控件的时候，填充布局，这里我们考虑到布局需要填充数据的情况，封装了常用的方法，大家可以根据自己的业务逻辑进行相应封装。

// 视图容器
private View mContainer;

/**
 * 填充视图
 * @param context
 * @param layoutId
 */
public void setLayout(Context context, int layoutId) {
    // 移除所有视图
    this.removeAllViews();
    // 填充视图
    mContainer = LayoutInflater.from(context).inflate(layoutId, this, false);
    // 添加视图
    this.addView(mContainer);
    // 初始化Scroller
    if (mScroller == null) {
        mScroller = new Scroller(context);
    }
    // 初始化手势检测器
    if (mGestureDetector == null) {
        mGestureDetector = new GestureDetector(context, new GestureListenerImpl());
    }
    invalidate();
}

/**
 * 设置文本
 * @param viewId
 * @param charSequence
 */
public void setText(int viewId, CharSequence charSequence) {
    TextView textView = (TextView) getView(viewId);
    textView.setText(charSequence);
}

/**
 * 设置文本颜色
 * @param viewId
 * @param color
 */
public void setTextColor(int viewId, int color) {
    TextView textView = (TextView) getView(viewId);
    textView.setTextColor(color);
}

/**
 * 设置文本字体大小
 * @param viewId
 * @param textSize
 */
public void setTextSize(int viewId, int textSize) {
    TextView textView = (TextView) getView(viewId);
    textView.setTextSize(textSize);
}

/**
 * 设置按钮点击事件
 * @param viewId
 * @param listener
 */
public void setButtonClickListener(int viewId, OnClickListener listener) {
    Button button = (Button) getView(viewId);
    button.setOnClickListener(listener);
}

/**
 * 设置图片资源
 * @param viewId
 * @param resId
 */
public void setImageResource(int viewId, int resId) {
    if (mContainer != null) {
        ImageView imageView = (ImageView) getView(viewId);
        imageView.setImageResource(resId);
    }
}

/**
 * 设置图片bitmap
 * @param viewId
 * @param bitmap
 */
public void setImageBitmap(int viewId, Bitmap bitmap) {
    if (mContainer != null) {
        ImageView imageView = (ImageView) getView(viewId);
        imageView.setImageBitmap(bitmap);
    }
}

/**
 * 设置图片drawable
 * @param viewId
 * @param drawable
 */
public void setImageDrawable(int viewId, Drawable drawable) {
    if (mContainer != null) {
        ImageView imageView = (ImageView) getView(viewId);
        imageView.setImageDrawable(drawable);
    }
}

/**
 * 设置图片缩放类型
 * @param viewId
 * @param type
 */
public void setImageScaleType(int viewId, ImageView.ScaleType type) {
    if (mContainer != null) {
        ImageView imageView = (ImageView) getView(viewId);
        imageView.setScaleType(type);
    }
}

/**
 * 设置背景颜色
 * @param color
 */
public void setBackgroundColor(int color) {
    mContainer.setBackgroundColor(color);
}

/**
 * 设置背景图片
 * @param background
 */
public void setBackground(Drawable background) {
    mContainer.setBackground(background);
}

/**
 * 设置背景图片资源id
 * @param resId
 */
public void setBackgroundResource(int resId) {
    mContainer.setBackgroundResource(resId);
}

/**
 * 获取视图控件
 * @param viewId
 * @return
 */
public View getView(int viewId) {
    return mContainer.findViewById(viewId);
}

扩展

效果图

基于公司的需求，需要实现上图的效果，除了上滑隐藏推荐页外，列表用力下拉需要实现让推荐页重新出现。这里有一个难点就是刷新与推荐页显示的区分，我想到的是重写列表控件的onTouchEvent方法，通过判断其下拉的距离来区分。

使用到的控件有：

• XRecyclerView
• 自定义控件引导页控件PagerLayout（上述实现的控件）

封装PagerLayout的show和hide方法：

// 显示视图
public void show() {
    isHidden = false;
    prepareScroll(0, 0);
}

// 隐藏视图
public void hide() {
    isHidden = true;
    prepareScroll(0, mViewHeight);
}

重写XRecyclerView的onTouchEvent事件：

mRecyclerView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        final float[] downY = {0};
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downY[0] = event.getY();
                break;
            case MotionEvent.ACTION_UP:
                float curY = event.getY();
                float delta = curY - downY[0];
                int screen = DensityUtil.getWindowHeight(MainActivity.this);
                if (delta > screen - DensityUtil.dip2px(MainActivity.this, 240)) {
                    myLinearLayout.show();
                }
                break;
        }
        return false;
    }
});

如此，效果基本实现。PS：这里说的刷新与显示推荐页的区分实则是对是否显示推荐页的区分，因能力有限，没有对XrecyclerView源码就是否刷新进行修改。

问题与改进

• 问题出现
  基于上述的扩展，在RecyclerView的item里的控件添加点击事件后，发现推荐页无法按预期显示隐藏：无论滑动多短的距离甚至是向上滑动，只要是在屏幕下方滑动，推荐页总是会自己显示出来。通过打印了Log，发现原因出在onTouchEvent的ACTION_DOWN里面，即：ACTION_DOWN没有触发，但是ACTION_UP触发了，导致上述的downY[0]值为0，而curY很大，因此得到了下滑距离很大的假象。

• 问题解决
  知其然知其所以然，通过百度得知，RecyclerView的item里的控件设置onClick方法，会抢占onTouchEvent，在ACTION_DOWN动作发生的时候，所以解决办法就是将那个点击控件重写onTouchEvent返回false，从而让touch事件继续向外传递到RecyclerView。
  但是若item里面有N多个点击控件，每一个都写过去的话，这肯定不是解决办法。经公司里带我的师父点播，发现XRecyclerView类里面有这样一个东西：
  

  mRefreshHeader.getVisibleHeight()
  于是我想到通过判断XRecyclerView刷新头部可见高度来决定是否显示推荐页，在XRecyclerView源码(导入第三方源码方法详见这里)里面写了这样一个方法：

// 获取刷新头部可见高度
public int getHeaderVisibleHeight() {
    if (mRefreshHeader == null) {
        return 0;
    }
    return mRefreshHeader.getVisibleHeight();}

如此一来，onTouchEvent里面的代码量大大减少：

mXrvLive.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_UP:
                // 获取刷新头可见范围的高度
                int visibleHeight = mXrvLive.getHeaderVisibleHeight();
                // 如果可见高度大于133dp
                if (visibleHeight >= DensityUtil.dip2px(getActivity(), 133)) {
                    // 显示推荐页
                    mRecommendPage.show();
                }
                break;
        }
        return false;
    }
});

参考

Android Scroller简单用法
Android学习Scroller(四)——实现拉动后回弹的布局

以上就是上滑解锁效果的所有内容，代码已上传Github，欢迎访问指导！
手打不容易，请支持原创，转载时请注明链接：http://www.jianshu.com/p/826238318551