自定义卡片效果的ViewGroup

不逼逼，看效果！两边有点露出来的效果，比如腾讯视频App的上方的效果，都是轻量级的控件，请勿见怪，总体时间花费大约9个小时，其中找Bug找了3个小时，哈哈！

• 第一个效果是正常的滑动情况
  
• 第二个效果是禁止滑动情况，同时呢，有一个回弹的效果，四川话讲这个很巴适
  
  ##分享两个东西
  • 今天发现的一个Android UI 开发效率的 UI 库：https://github.com/QMUI/QMUI_Android
  • 这个我都不好意思分享，嘿嘿，周天就做这个，做完了发现根本没有什么东西可以分享，所以就写了现在这个博客，等我以后研究下hexo，才来更新
    https://shimingli.github.io/

##写在前面的话：如果我手写慢一点，多看看一下api，我就不会把两个api写错了，由于手滑写错了，导致我这篇博客现在才来写，兴奋感都快磨完了。

• 这辈子我都不会忘记这个值了，getScaledTouchSlop()是一个距离，表示滑动的时候，手的移动要大于这个距离才开始移动控件。viewpager就是用这个距离来判断用户是否翻页，只不过呢

  ViewConfiguration.get(mContext).getScaledTouchSlop()

---

原理如下： mTouchSlop = configuration.getScaledPagingTouchSlop();就是这个值，但是你可能会说有毛的的关系啊，别急

往ViewConfiguration类看记住这个值

看这个值mTouchSlop，对吧只不过在ViewPager判断是否需要移动的时候，这个距离是*2。

由于我这里需要更高的精度，所以获取了这个值getScaledTouchSlop()

• 可千万不要拿到getScaledDoubleTapSlop()这个值了啊！

  //第一次触摸和第二次触摸之间的距离,Distance in pixels between the first touch and second touch
     ViewConfiguration.get(mContext).getScaledDoubleTapSlop();

##继承ViewGroup,重写构造方法

public class CardViewPager extends ViewGroup{

 public CardViewPager(Context context) {
        this(context,null);
    }

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

##初始化init

   private void init(Context context) {
        mContext = context;
        //滑动的对象
        mScroller = new Scroller(mContext);
        //getScaledTouchSlop是一个距离，表示滑动的时候，手的移动要大于这个距离才开始移动控件。
        // 如果小于这个距离就不触发移动控件，如viewpager就是用这个距离来判断用户是否翻页
//        mScaledDoubleTapSlop = ViewConfiguration.get(mContext).getScaledTouchSlop();
        mScaledDoubleTapSlop = ViewConfiguration.get(mContext).getScaledPagingTouchSlop();
        //第一次触摸和第二次触摸之间的距离,Distance in pixels between the first touch and second touch
        ViewConfiguration.get(mContext).getScaledDoubleTapSlop();
        FIRST_width = dp2px(mContext, 10);
        TWO_GAP_WIDTH = FIRST_width * 2;
        THREE_GAP_WIDTH = FIRST_width * 3;
        FOUR_GAP_WIDTH = FIRST_width * 4;
    }

##onMeasure,重写测量这里记住widthMeasureSpec、heightMeasureSpec是一个32位的int值，其中高两位是物理模式，低的30位才是控件的宽度和高度的信息。
MeasureSpec.EXACTLY：父视图希望子视图的大小应该是specSize中指定的。
MeasureSpec.AT_MOST：子视图的大小最多是specSize中指定的值，也就是说不建议子视图的大小超过specSize中给定的值。
MeasureSpec.UNSPECIFIED：我们可以随意指定视图的大小。

@Override
   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
       super.onMeasure(widthMeasureSpec, heightMeasureSpec);
       //这才是真正的宽度和高度
       int widthSize = MeasureSpec.getSize(widthMeasureSpec);
       int heighSize = MeasureSpec.getSize(heightMeasureSpec);
       //设置测量的大小
       setMeasuredDimension(widthSize,heighSize);
       //测量孩子的大小
       mChildCount = getChildCount();
       for (int i=0;i<mChildCount;i++){
           //这里需要把模式也传入进去
           getChildAt(i).measure(widthMeasureSpec,heightMeasureSpec);
       }
   }

##onLayout重新布局:将孩子的view布局，这里横向的布局，一个字View接着右边,这是设计之初的方法，自己先明白到底是怎么样布局，就好像我明白的方式，是个伟大的ui妹子说，看这个app，就是这样，哈哈

/**
     * @param changed
     * @param l 左上角的left
     * @param t top
     * @param r  右下角right
     * @param b bottom值
     */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        View child;
        int widthLeft=0;
        for (int i=0;i<mChildCount;i++){
            child = getChildAt(i);
            //得到第一个孩子的宽度，两边都减去了两个参数，记住是这个4倍值
            int measuredWidth = child.getMeasuredWidth() - FOUR_GAP_WIDTH;
            int measuredHeight = child.getMeasuredHeight();
            //是第一个孩子
            if (i==0){
                child.layout(widthLeft+TWO_GAP_WIDTH,0,widthLeft+TWO_GAP_WIDTH+measuredWidth,measuredHeight);
                //改变向左的值
                widthLeft+=measuredWidth+THREE_GAP_WIDTH;
            }else {
                child.layout(widthLeft, 0, widthLeft + measuredWidth, measuredHeight);
                widthLeft += measuredWidth + FIRST_width;
            }
        }
    }

####效果虽然看了，但是真正理解的layout的话，还需明白其中的原理，这里我不讲了的太细，献上美图一张，嗦嘎，原理就是，不是每一个屏幕都在装着一个我们的卡片，我们每次移动的时候，也不是移动一个屏幕，而是通过运算的方式，移动到恰好能够看到两边10dp的值，这里的要转成像素

dp2px(mContext, 10);

关于像素px我还想说说: context.getResources().getDisplayMetrics().density;density显示器的逻辑密度，这是【独立的像素密度单位（首先明白dp是个单位）】的一个缩放因子，在屏幕密度大约为160dpi的屏幕上，一个dp等于一个px,这个提供了系统显示器的一个基线. 例如：屏幕为240320的手机屏幕，其尺寸为 1.5”2” 也就是1.5英寸乘2英寸的屏幕 它的dpi（屏幕像素密度，也就是每英寸的像素数，dpi是dot per inch的缩写）大约就为160dpi， 所以在这个手机上dp和px的长度（可以说是长度，最起码从你的视觉感官上来说是这样的）是相等的。 因此在一个屏幕密度为160dpi的手机屏幕上density的值为1，而在120dpi的手机上为0.75等等.例如：一个240320的屏幕尽管他的屏幕尺寸为1.8”1.3”,（我算了下这个的dpi大约为180dpi多点）但是它的density还是1(也就是说取了近似值) 然而，如果屏幕分辨率增加到320480 但是屏幕尺寸仍然保持1.5”2” 的时候（和最开始的例子比较）
这个手机的density将会增加（可能会增加到1.5）

public static int dp2px(Context context, float dpValue) {
       ///这个得到的不应该叫做密度，应该是密度的一个比例。不是真实的屏幕密度，
       /// 而是相对于某个值的屏幕密度。也可以说是相对密度
       final float scale = context.getResources().getDisplayMetrics().density;
       return (int) (dpValue * scale + 0.5f);
   }

##拦截事件:当大于了需要移动控件的距离的话，就需要把这个事件拦截自己处理。

@Override
   public boolean onInterceptTouchEvent(MotionEvent ev) {
       switch (ev.getAction()){
           case MotionEvent.ACTION_DOWN:
               int x = (int) ev.getX();
               mLastMotionX = x ;
               break;
           case MotionEvent.ACTION_MOVE:
               x= (int) ev.getX();
               //滑动的距离
               int delX = mLastMotionX - x;
               //如果说距离大于这个距离的话，就需要滚动了，拦截事件
               if (Math.abs(delX)>mScaledDoubleTapSlop){
                   return true;
               }
               break;
       }
       return super.onInterceptTouchEvent(ev);
   }

##处理事件:在down的事件一定需要拦截，才能记录坐标
返回值为True，代表拦截这次事件，直接进入到ViewGroup的onTouchEvent中，就不会进入到View的onTouchEvent了
返回值为False，代表不拦截这次事件，不进入到ViewGroup的onTouchEvent中，直接进入到View的onTouchEvent中

public boolean onTouchEvent(MotionEvent event) {
       //如果没有孩子的话，不需要拦截
       if (getChildCount()==0){
           return false;
       }
       //监听滑动的速度
       obtainTracker(event);
       switch (event.getAction()){
           case MotionEvent.ACTION_DOWN:
               if (!mScroller.isFinished()){
                   //停止动画
                   mScroller.abortAnimation();
               }
               int x = (int) event.getX();
               mLastMotionX=x;
               //不管怎么怎么样这个事件都必须拦截
               return true;

           case MotionEvent.ACTION_MOVE:
                x = (int) event.getX();
               int desX = mLastMotionX - x;
               //这个距离大于了屏幕的10/1的话，就给他赋值10/1
               if (!isAllowScroll&&desX>getWidth()/10){
                   desX=getWidth()/10;
                   //如果设置了不可以滑动的，这个flag需要到up事件单独处理
                   mCanScrolled = true;
               }
               //只需计算x的距离
               mVelocityTracker.computeCurrentVelocity(1000,ViewConfiguration.getMaximumFlingVelocity());
               mXVelocity = (int) mVelocityTracker.getXVelocity();
               //如果说距离滑动太小，或者是只有一个屏幕的话，就不往下去做操作了
               if (Math.abs(desX)<mScaledDoubleTapSlop||(desX>=0&&
                       mCurScreen==mChildCount-1)||(desX<=0&&mCurScreen==0)){
                   break;
               }

               //能到这里来的话，就必须往手指方向慢慢滚动了
               scrollTo(getChildAt(mCurScreen).getLeft()+desX,0);
               break;
           case MotionEvent.ACTION_UP:
               //mXVelocity为正数的话，这个是往left滚
               if (isAllowScroll&&mXVelocity>MAX_VELOCITY_VALUE&&mCurScreen>0){
                   scrollScreen(mCurScreen-1);
               }else if (isAllowScroll&&mXVelocity<-MAX_VELOCITY_VALUE&&mCurScreen<mChildCount-1){
                   scrollScreen(mCurScreen+1);
              //当设置了不能滑动时候，并且手指滑动的Move的距离已经超过了屏幕的10/1，有一个回弹的效果，左右摇摆
               }else if (mCanScrolled){
                   springToDestination();
               }else{
                   snapToDestination();
               }
               //最后不要忘记了释放
               releaseVelocityTracker();
               break;
       }
       return super.onTouchEvent(event);
   }

##滑动到指定的屏幕,在记住两个地方，就不需要滑动了，一个是在最右和最左端。

private void scrollScreen(int whichScreen) {
       //防止超出了最大的孩子的数量
       int min = Math.min(whichScreen, mChildCount - 1);
       whichScreen = Math.max(0, min);
       //getScrollX() 就是当前view的左上角相对于母视图的左上角的X轴偏移量。
       //在这里当getScrollX==0的时候，等于后面的whichScreen*getWidth()那么就滑动到第一页了
       //后续就不需要滑动了，也不需要重新绘制了
       // TODO: 2017/9/3 这里只在最左不能进去滑动了，其实在最右端也是不能够去滑动了，带解决
       if (getScrollX()!=whichScreen*getWidth()){
           int deltaX = whichScreen * (getWidth() - THREE_GAP_WIDTH) - getScrollX();
           mCurScreen = whichScreen;
           mScroller.startScroll(getScrollX(), 0, deltaX, 0, Math.abs(deltaX));
           invalidate();
       }
   }

但是在这里我留下一个问题，但是在这里我留下一个问题在我的手机上我测试了1到5个孩子的情况分别数据如下：
getScrollX()和whichScreen*getWidth()
1个屏幕是0 0——–0
2个屏幕是90 990 ——-1080
3个屏是 120
4个屏 =270 2970 ——-3240
5个屏 =380 3960 ——-4320
当我们滑动到最有端的时候，其实也是不能够去滑动了，但是我这个方法呢是能够 走到if当中的，而且对应关系也不太明确，这个问题我还得想想。

##还需要理解一个东西getScrollX()到底是什么值？再次献上我的美作，哈哈，反正我是明白了，我怕讲不明白，所以先看图，然后抓日记，一下就明白!

##监听滑动的速度，在上篇笔锋效果里面有讲到过，还是Viewpager里面的东西,记住要释放这个算是监听吧！

   //监听滑动的速度
      obtainTracker(event);

  private void obtainTracker(MotionEvent event) {
      if (mVelocityTracker==null) {
          mVelocityTracker = VelocityTracker.obtain();
      }
      //绑定事件
      mVelocityTracker.addMovement(event);
  }
/**
   * 释放监听滑动速度方法
   */
  private void releaseVelocityTracker() {
      if (mVelocityTracker != null) {
          mVelocityTracker.recycle();
          mVelocityTracker = null;
      }
  }

##其实你就把上面的工作全部都做好了，你会发现还是不能够翻页，来吧去Viewpager看看，再去度娘看看

/**
   * 计算滚动的位置
   */
  @Override
  public void computeScroll() {
      super.computeScroll();
      //返回值为boolean，mScroller.computeScrollOffset()==true说明滚动尚未完成，false说明滚动已经完成。
      if (mScroller.computeScrollOffset()) {
          scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
          postInvalidate();
      }

  }

个人翻译就是在viewpager中需要重新计算滑动的位置

##回弹滑动目的屏,这里就是需要有点动画的效果，先回到原来的位置，然后左右摇摆摇摆！

/**
     * 回弹滑动目的屏
     */
    private void springToDestination() {
        System.out.println("shiming  ==springToDestination");
        int screenWidth = getWidth();
        int whichScreen = (getScrollX() + screenWidth / 2) / screenWidth;
        whichScreen = Math.max(0, Math.min(whichScreen, mChildCount - 1));
        final int deltaX = whichScreen * (getWidth() - THREE_GAP_WIDTH) - getScrollX();
        mCurScreen = whichScreen;
        //先给我滚动到原来的位置
        springToScroll(deltaX * 1.0f, Math.abs(deltaX));
        //向右的给我摆动两下
        postDelayed(new Runnable() {
            @Override
            public void run() {
                springToScroll(-deltaX * 0.3f, Math.abs(deltaX));
            }
        }, Math.abs(deltaX));
        //让后给我向左摆动两下
        postDelayed(new Runnable() {
            @Override
            public void run() {
                springToScroll(deltaX * 0.3f, Math.abs(deltaX));
            }
        }, Math.abs(deltaX * 2));
        mCanScrolled = false;
    }

 /**
     *  getScrollX() 水平方向滚动的偏移值，以像素为单位。正值表明滚动将向左滚动
     　　startY 垂直方向滚动的偏移值，以像素为单位。正值表明滚动将向上滚动
     　　(int) deltaX 水平方向滑动的距离，正值会使滚动向左滚动
     　 0  垂直方向滑动的距离，正值会使滚动向上滚动
     * @param deltaX
     * @param duration
     */
    private void springToScroll(float deltaX, int duration) {
        mScroller.startScroll(getScrollX(), 0, (int) deltaX, 0, duration);
        invalidate();
    }

##好了，以上，我写的写的都要睡早了，代码有些注释还比较详细一点，如有需要看代码吧，由于工程逻辑上，还有很多复杂的代码，我这里就提取了一部分，以供学习之用，谢谢！
地址Git：https://github.com/Shimingli/CardViewPager