自定义控件02-仿ViewPager，继承ViewGroup

自定义控件实现ViewPager的效果

1. 新建一个类继承ViewGroup，实现构造方法和onLayout方法

public class MyViewPager extends ViewGroup {
    
    public MyViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {

    }
}

2. 添加View到这个ViewGroup中

public class MainActivity extends AppCompatActivity {

    private MyViewPager mViewPager;
    private int[] ids = {
            R.drawable.a1,
            R.drawable.a2,
            R.drawable.a3,
            R.drawable.a4,
            R.drawable.a5,
            R.drawable.a6
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager = (MyViewPager) findViewById(R.id.viewpager);

        for (int i = 0; i < ids.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setBackgroundResource(ids[i]);
            mViewPager.addView(imageView);
        }
    }
}

onLayout(boolean changed, int l, int t, int r, int b)坐标位置分析
以左上角为原点，分别是距离左边的距离，距离上边的距离，距离右边的距离，距离上边的距离。
每个左边表示：（到Y轴的距离，到X轴的距离）

左上角和右下角两个点确定一个View的位置，
公式：左上角（igetWidth，0）
右下角（(i+1) * getWidth,getHeight）
view.layout(l，t，r，b)
就是说
l = igetWidth
t = 0
r = (i+1) * getWidth
t = getHeight

遍历每个孩子，给每个孩子指定在屏幕上的位置

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //遍历每个孩子，给每个孩子指定在屏幕上的位置
//        l = i * getWidth
//        t = 0
//        r =  (i+1) * getWidth
//        t =  getHeight
        for (int i = 0; i < getChildCount(); i++) {
            View childView = getChildAt(i);
            childView.layout(i * getWidth(),0,(i + 1) * getWidth(),getHeight());
        }

    }

这样就可以显示第一张图片了


代码：代码

3. 给ViewPager添加手势识别器

手势识别器的使用步骤
* 1，定义出来
* 2，实例化--重写想要的方法
* 3，在onTouchEvent()中把事件传递给手势识别器

   /**
     * 手势识别器
     * 1，定义出来
     * 2，实例化--重写想要的方法
     * 3，在onTouchEvent()中把事件传递给手势识别器
     *
     */
    private GestureDetector mDetector;

    /**
     * 构造方法
     * @param context
     * @param attrs
     */
    public MyViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    private void initView(Context context) {
        //实例化手势识别器
        mDetector = new GestureDetector(context,new MyGestureListener());
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        //3,把事件传递给手势识别器
        mDetector.onTouchEvent(event);
        return true;//自己处理
    }

    class MyGestureListener implements GestureDetector.OnGestureListener {

        @Override
        public boolean onDown(MotionEvent e) {
            return false;
        }

        @Override
        public void onShowPress(MotionEvent e) {

        }

        @Override
        public boolean onSingleTapUp(MotionEvent e) {
            return false;
        }

        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
            return false;
        }

        @Override
        public void onLongPress(MotionEvent e) {

        }

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

在onScroll方法中，设置在X轴和Y轴都能滑动：

scrollBy((int) distanceX, (int) distanceY);

scrollBy和scrollTo的区别
两者 移动的都是view的内容 view本身 是不移动的 所以getx gety 一直是不变的
scrollTo ：相对于初始位置移动
scrollBy : 相对于上次移动的最后位置移动

源码：

    /**
     * Move the scrolled position of your view. This will cause a call to
     * {@link #onScrollChanged(int, int, int, int)} and the view will be
     * invalidated.
     * @param x the amount of pixels to scroll by horizontally
     * @param y the amount of pixels to scroll by vertically
     */
    public void scrollBy(int x, int y) {
        scrollTo(mScrollX + x, mScrollY + y);
    }

    /**
     * Set the scrolled position of your view. This will cause a call to
     * {@link #onScrollChanged(int, int, int, int)} and the view will be
     * invalidated.
     * @param x the x position to scroll to
     * @param y the y position to scroll to
     */
    public void scrollTo(int x, int y) {
        if (mScrollX != x || mScrollY != y) {
            int oldX = mScrollX;
            int oldY = mScrollY;
            mScrollX = x;
            mScrollY = y;
            invalidateParentCaches();
            onScrollChanged(mScrollX, mScrollY, oldX, oldY);
            if (!awakenScrollBars()) {
                postInvalidateOnAnimation();
            }
        }
    }

1）scrollTo()是一步到位；
2）scrollBy()是逐步累加

1）假设有一个View，如果想把SView从(0, 0)移动到(100, 100)。注意，这里说的(0, 0)和(100, 100)，指的是SView左上角的坐标。那么偏移量就是原点(0, 0)到目标点(100, 100)的距离，即(0 , 0) - (100, 100) = (-100, -100)。
只需要调用SView.scrollTo(-100, -100)就可以了。scrollTo(int x, int y)的两个参数x和y，代表的是偏移量，这时的参照物是(0, 0)点。

然而，scrollBy()是有一定的区别的。scrollBy()的参照物是(0, 0)点加上偏移量之后的坐标。
2）假设SView调用了scrollTo(-100, -100)，此时SView左上角的坐标是(100, 100)，这时再调用scrollBy(-20, -20)，此时SView的左上角就被绘制到了(120, 120)这个位置

滑动显示页面的原理

滑动显示页面的原理

//下标位置
int tempIndex = currentIndex;
if ((startX - endX) > getWidth() / 2) {
//显示下一个页面
tempIndex ++;
} else if ((endX - startX) > getWidth() / 2) {
//显示上一个页面
tempIndex --;
}
滑动显示指定页面

private float startX;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        //3,把事件传递给手势识别器
        mDetector.onTouchEvent(event);
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //记录坐标
                startX = event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
                //结束坐标
                float endX = event.getX();

                //下标位置
                int tempIndex = currentIndex;
                if ((startX - endX) > getWidth() / 2) {
                    //显示下一个页面
                    tempIndex ++;
                } else if ((endX - startX) > getWidth() / 2) {
                    //显示上一个页面
                    tempIndex --;
                }

                //根据下标位置移动到指定页面
                scrollToPager(tempIndex);

                break;
            default:
                break;
        }
        return true;//自己处理
    }

    /**
     * 根据下标位置移动到指定页面 过滤非法值
     * @param tempIndex
     */
    private void scrollToPager(int tempIndex) {
        if (tempIndex < 0) {
            tempIndex = 0;
        }
        if (tempIndex > getChildCount() - 1) {
            tempIndex = getChildCount() - 1;
        }
        //把过滤后的值赋值给当前页面下标
        currentIndex = tempIndex;

        scrollTo(currentIndex * getWidth(),0);

    }

解决生硬回弹问题的原理
把一次移动改为多次移动

解决生硬回弹问题的原理

自定义滑动帮助类MyScroller

package com.zhang.custom_viewpager;

import android.os.SystemClock;

class MyScroller {
    /**
     * X轴起始坐标
     */
    private float startX;
    /**
     * Y轴起始坐标
     */
    private float startY;
    /**
     * 在X轴移动的距离
     */
    private int distanceX;
    /**
     * 在Y轴移动的距离
     */
    private int distanceY;
    /**
     * 开始时间
     */
    private long startTime;
    /**
     * 是否 移动完成
     * FALSE没有移动完成
     * TRUE移动完成
     */
    private boolean isFinish;
    /**
     * 总时间 写死
     */
    private long totalTime = 500;

    private float currX;

    public float getCurrX() {
        return currX;
    }

    void startScroll(float startX, float startY, int distanceX, int distanceY) {
        this.startX = startX;
        this.startY = startY;
        this.distanceX = distanceX;
        this.distanceY = distanceY;
        this.startTime = SystemClock.uptimeMillis();
        this.isFinish = false;
    }

    /**
     * 速度
     * 求移动一小段的距离
     * 求移动一小段对应的坐标
     * 求移动一小段对应的时间
     * true:正在移动
     * false:移动结束
     *
     * @return
     */
    boolean computeScrollOffset() {
        if (isFinish) {
            return false;
        }
        long endTime = SystemClock.uptimeMillis();
        //一小段花的时间
        long passTime = endTime - startTime;
        if (passTime < totalTime) {
            //移动还没有结束
            //计算平均速度
//            float v = distanceX / totalTime;
            //移动这个一小段对应的距离
            float distanceSmallX = passTime * distanceX / totalTime;

            currX = startX + distanceSmallX;

        } else {
            //移动结束
            isFinish = true;
            currX = startX + distanceX;
        }

        return true;
    }
}


public class MyViewPager extends ViewGroup {

    /**
     * 手势识别器
     * 1，定义出来
     * 2，实例化--重写想要的方法
     * 3，在onTouchEvent()中把事件传递给手势识别器
     */
    private GestureDetector mDetector;
    /**
     * 当前页面下标位置
     */
    private int currentIndex;

    private MyScroller mScroller;//自己写的
//    private Scroller mScroller;//系统的

    /**
     * 构造方法
     *
     * @param context
     * @param attrs
     */
    public MyViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    private void initView(Context context) {
        mScroller = new MyScroller();
//        mScroller = new Scroller(context);

        //实例化手势识别器
        mDetector = new GestureDetector(context, new MyGestureListener());
    }

    private float startX;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        //3,把事件传递给手势识别器
        mDetector.onTouchEvent(event);
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //记录坐标
                startX = event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
                //结束坐标
                float endX = event.getX();

                //下标位置
                int tempIndex = currentIndex;
                if ((startX - endX) > getWidth() / 2) {
                    //显示下一个页面
                    tempIndex ++;
                } else if ((endX - startX) > getWidth() / 2) {
                    //显示上一个页面
                    tempIndex --;
                }

                //根据下标位置移动到指定页面
                scrollToPager(tempIndex);

                break;
            default:
                break;
        }
        return true;//自己处理
    }

    /**
     * 根据下标位置移动到指定页面 过滤非法值
     * @param tempIndex
     */
    private void scrollToPager(int tempIndex) {
        if (tempIndex < 0) {
            tempIndex = 0;
        }
        if (tempIndex > getChildCount() - 1) {
            tempIndex = getChildCount() - 1;
        }
        //把过滤后的值赋值给当前页面下标
        currentIndex = tempIndex;

//        scrollTo(currentIndex * getWidth(),0);

        int distanceX = currentIndex*getWidth() - getScrollX();

        mScroller.startScroll(getScrollX(),getScrollY(),distanceX,0);

        invalidate();//这个方法会导致onDraw()和computeScroll()执行

    }

    @Override
    public void computeScroll() {
        super.computeScroll();
        if (mScroller.computeScrollOffset()) {
            float currentX = mScroller.getCurrX();
            scrollTo((int) currentX,0);
            invalidate();
        }
    }

    class MyGestureListener implements GestureDetector.OnGestureListener {

        @Override
        public boolean onDown(MotionEvent e) {
            return false;
        }

        @Override
        public void onShowPress(MotionEvent e) {

        }

        @Override
        public boolean onSingleTapUp(MotionEvent e) {
            return false;
        }

        /**
         * @param e1
         * @param e2
         * @param distanceX：在X轴滑动的距离
         * @param distanceY：在Y轴滑动的距离
         * @return
         */
        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
//            scrollBy((int) distanceX, (int) distanceY);//这样可以同时在X轴和Y轴滑动
            scrollBy((int) distanceX, 0);//只能在X轴滑动

            return true;//自己处理滑动事件
        }

        @Override
        public void onLongPress(MotionEvent e) {
            showLog("长按");
        }

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

    private void showLog(String msg) {
        Log.e("===z", msg);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //遍历每个孩子，给每个孩子指定在屏幕上的位置
//        l = i * getWidth
//        t = 0
//        r =  (i+1) * getWidth
//        t =  getHeight
        for (int i = 0; i < getChildCount(); i++) {
            View childView = getChildAt(i);
            childView.layout(i * getWidth(), 0, (i + 1) * getWidth(), getHeight());
        }

    }
}

最后可以把自定义的Scroller改成系统的Scroller

mScroller = new Scroller(context);

限制第一页和最后一页不能滑动

        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
//            scrollBy((int) distanceX, (int) distanceY);//这样可以同时在X轴和Y轴滑动
            //限制第一页和最后一页不能滑动
            if (currentIndex == 0 || currentIndex == getChildCount() - 1) {
                return false;
            }
            scrollBy((int) distanceX, 0);//只能在X轴滑动

            return true;//自己处理滑动事件
        }

代码：代码

添加测试页面：

        //添加测试页面
        View view = View.inflate(this, R.layout.test, null);
        mViewPager.addView(view,2);

其他页面能显示 是因为在onLayout中强制设置一级子View的固定大小，并没有考虑它想要多大，自身多大。第三个添加的测试页面其实也显示了。只是一级子View下面的View没有被测量，所以没有显示。


image.png

获取自定义的ViewGroup中的子View并测量，就可以显示了

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //获取子View并测量
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            child.measure(widthMeasureSpec,heightMeasureSpec);
        }
    }

测量的过程

image.png
image.png
image.png

onMeasure()方法解析：
* @param widthMeasureSpec : 包含两个属性：父类建议的宽和测量模式
* @param heightMeasureSpec ：父类建议的高和测量模式

测量模式有这三种
MeasureSpec.AT_MOST; ：最大值模式，当控件宽高设置为wrap_content时
MeasureSpec.EXACTLY ：精确值模式，当控件match_parent时
MeasureSpec.UNSPECIFIED; ：未指定模式，View想多大就多大，通常在绘制自定义View时才会用

获取下一级子View的建议宽和测量模式
MeasureSpec.makeMeasureSpec(size, mode);

    /**
     *
     * @param widthMeasureSpec : 包含两个属性：父类建议的宽和测量模式
     * @param heightMeasureSpec ：父类建议的高和测量模式
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int size = MeasureSpec.getSize(widthMeasureSpec);
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        /**
         * 测量模式有这三种
         *         MeasureSpec.AT_MOST;       ：最大值模式，当控件宽高设置为wrap_content时
         *         MeasureSpec.EXACTLY        ：精确值模式，当控件match_parent时
         *         MeasureSpec.UNSPECIFIED;   ：未指定模式，View想多大就多大，通常在绘制自定义View时才会用
         */
        

        //获取下一级子View的建议宽和测量模式
        int makeMeasureSpec = MeasureSpec.makeMeasureSpec(size, mode);

        //获取子View并测量
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            child.measure(widthMeasureSpec,heightMeasureSpec);
        }
    }

事件冲突

在第三个页面滑动ScrollView部分时，没有反应。
触摸事件的传递过程：
事件 -》Activity -》传递给MyViewPager -》传递给子View

子View没有处理

事件再回传给MyViewPager，MyViewPager的touchEvent返回TRUE，消费了该事件。

当事件传递给ScrollView时，ScrollView消费了该事件，事件结束，所以不会回传到MyViewPager，所以滑动ScrollView时没有反应了。

该冲突的解决方案：

在ScrollView左右滑动时，MyViewPager拦截事件自己消费，ScrollView上下滑动时，MyViewPager不拦截事件继续传递

    private float eStartX;
    private float eStartY;

    /**
     * 事件拦截方法
     * 返回true,拦截事件，将会触发当前控件的onTouchEvent()方法
     * 返回false，不拦截事件，事件继续传递给子View
     *
     * @param ev
     * @return
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        //把事件传递给手势识别器
        mDetector.onTouchEvent(ev);
        boolean result = false;//默认传递事件
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                eStartX = ev.getX();
                eStartY = ev.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                float eEndX = ev.getX();
                float eEndY = ev.getY();
                float distanceX = Math.abs((eEndX - eStartX));
                float distanceY = Math.abs((eEndY - eStartY));
                //如果X轴滑动的距离大于Y轴滑动的距离，则拦截事件
                if (distanceX > distanceY && distanceX > 10) {
                    result = true;
                }

                break;
            case MotionEvent.ACTION_UP:
                break;
            default:
                break;
        }
        return result;
    }

代码：解决事件冲突

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,133评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,682评论 3赞 390
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,784评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,508评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,603评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,607评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,604评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,359评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,805评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,121评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,280评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,959评论 5赞 339
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,588评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,206评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,193评论 2赞 367
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,144评论 2赞 352

推荐阅读更多精彩内容