自定义View 篇三 《手动打造ViewPage》

Android自定义View 同时被 2 个专栏收录
15 篇文章 0 订阅
23 篇文章 3 订阅

有了之前自定义View的理论基础,有了ViewPage、事件分发机制、滑动冲突、Scroller使用等相关知识的铺垫,今天纯手动打造一款ViewPage。

1、完成基本的显示:

在MainActivity中:

public class MainActivity extends AppCompatActivity {

    private MyViewPage mViewPage;

    int[] imageIds = new int[]{
           R.drawable.pic_0,
           R.drawable.pic_1,
           R.drawable.pic_2,
           R.drawable.pic_3,
           R.drawable.pic_4,
           R.drawable.pic_5
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPage = (MyViewPage) findViewById(R.id.myviewpage);

        //给自定义ViewPage添加孩子组件
        for (int i = 0; i < imageIds.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setBackgroundResource(imageIds[i]);
            mViewPage.addView(imageView);
        }

    }
}
在MyViewPage中:

public class MyViewPage extends ViewGroup {

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

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

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int count = getChildCount();
        for (int i = 0; i < count; i++) {
            //遍历所有孩子,手动安放每个孩子控件的位置
           getChildAt(i).layout(i*getWidth(),0,(i+1)*getWidth(),getHeight());
        }
    }
}

首先往自定义view里面添加了6张图片,在view的onLayout方法中,给每个孩子组件进行布局安放位置,因为位置都确定了,因而不用去进行测量和绘制也可以显示。

给每个孩子布局位置的算法如下:


此时运行:


2、实现可滑动效果

运行后,按照添加的顺序显示,第一张肯定显示的是第一个孩子控件对象的图片。但是此时是无法进行滑动的,我们使用手势识别器GestureDetector,让自定义的控件可以滑动:

private void init() {
    mGestureDetector = new GestureDetector(getContext(), new GestureDetector.SimpleOnGestureListener() {
        //手势识别器移动的监听回调。每次移动,都会回调该方法
        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
            //参数1:起点动作封装;参数2:终点动作封装;参数3x方向的移动距离;参数4y方向滑动距离
            scrollBy((int) distanceX,0);
            return true;
        }
    });
}
初始化手势识别器,重写手势滑动监听回调。每当滑动的时候,都会调用这里的方法,我们在这里直接调用ScrollBy()方法,更新当前控件(MyViewPage)内部孩子控件(图片)的位置。在这里需要知道 ScrollBy() Scroll To ()的区别:


scrollBy来移动一段相对的距离,属于温柔性质的。表示在原来坐标的基础上再改变参数大小的距离。对于x:大于零表示往左移,小于零表示往右移。对于y:大于零表示往上移,小于零表示往下移。
scrollBy(10, 0);从右往左移动10个像素
scrollBy(-10, 0);从左往右动10个像素

scrollTo就是把View移动屏幕的X和Y位置,属于强迫性质的。参数代表我一次性跳跃到该坐标位置。
我擦,中国语言真是博大精深啊~

   瞬间移动视图的内容: 利用View的scroll方法
    1). scrollBy(int x, int y) : 滑动指定的偏移量(从当前位置瞬间)
     x: x轴上的偏移量, x>0内容向左滑动, x<0内容向右滑动, x=0水平方向不滑动
     y: y轴上的偏移量, y>0内容向上滑动, y<0内容向下滑动, y=0垂直方向不滑动
    2). scrollTo(int x, int y) : 滑动到指定的偏移量(从当前位置瞬间)
     x: 目标位置x轴上的偏移量, x>0移动到原始位置的左侧, x<0移动到原始位置的右侧,x=0移动到水平原始位置,
     y: 目标位置y轴上的偏移量, y>0移动到原始位置的上侧, y<0移动到原始位置的下侧, y=0移动到垂直原始位置
 
View类的源代码如下所示,mScrollX记录的是当前View针对屏幕坐标在水平方向上的偏移量(getScrollX();),而mScrollY则是记录的时当前View针对屏幕在竖值方向上的偏移量(getScrollY();)。

    scrollTo就是把View移动到屏幕的X和Y位置,也就是绝对位置。而scrollBy其实就是调用的scrollTo,但是参数是当前mScrollX和mScrollY加上X和Y的位置,所以ScrollBy调用的是相对于mScrollX和mScrollY的位置。

手势识别器要想使用,需要把touch事件委托给手势识别器来处理:

@Override
public boolean onTouchEvent(MotionEvent event) {
    //事件委托交手势识别器
    mGestureDetector.onTouchEvent(event);
    return true;
}
运行程序效果:


可以看到,此时我们实现了滑动效果。

3、滑动到某个位置后自动到合适位置下标停留

此时的滑动显然是不可行的,我们需要跟ViewPage那样,滑动小于屏幕一半时,跳转到当前页面,滑动距离大于一半时,跳转到下一页。让我们来实现利逻辑吧:

switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
        break;
    case MotionEvent.ACTION_MOVE:
        break;
    case MotionEvent.ACTION_UP:
        //松开手的时候,根据当前位置,来确定下一个页面
        int scrollX = getScrollX();
        //当前页的索引值
        int pageIndex = scrollX / getWidth();
        int offset = scrollX % getWidth();
        if(offset > getWidth()/2){
            pageIndex++;
        }
        //处理越界问题
        if(pageIndex > getChildCount()-1){
            pageIndex = getChildCount()-1;
        }
         goCurrentPage(pageIndex);
        break;
    default:
        break;
    }

我们重写了touch事件,因为监听到底是否在页面一半位置,是手指离开屏幕时候决定的,因而逻辑写在UP事件里面即可。相信这个小算法难不倒你。

当前的pageIndex就是对应的页码,而且处理了越界问题。最后再生成一个方法,专门用于跳转页面功能。具体代码如下:

/**
 * 根据当前
 * @param pageIndex
 *      当前的page页面
 */
private void goCurrentPage(int pageIndex) {

    scrollTo(pageIndex*getWidth(),0);
}
是的,只需要一行代码就可以了!运行起来看看效果吧:


此时跟原生的ViewPgae挺像了,但是还是稍有区别的,即滑动跳转很是生硬。这是由于使用了ScrollTo()进行了强制跳转的缘故。为了与ViewPage更贴近,我们使用系统提供的类:Scoller来解决生硬问题。

Scoller的具体用法可以参考博客:Android Scroller完全解析

4、回弹过程解决办法

修改ScrollTo(),被Scoller取代:

private void goCurrentPage(int pageIndex) {
    //scrollTo(pageIndex*getWidth(),0);

    int dx = pageIndex*getWidth() - getScrollX();

    Log.e("YDL",dx+"-------");

    //参数1x的起始值;参数2y的起始值;参数3x的偏移量;参数4y的偏移量
    //对于参数3dx>0往左移动;dx<0往右移动
    mScroller.startScroll(getScrollX(),0,dx,0,Math.abs(dx));//dx绝对值作为时间值,按比例可以实现了匀速移动
    //使用Scroller必须重新刷新界面,不刷新的话不会滑动
    invalidate();
}
在这里 需要借助Scroller来完成后续的滚动操作。接下来我们就调用startScroll()方法来初始化滚动数据并刷新界面。startScroll()方法接收四个参数,第一个参数是滚动开始时X的坐标,第二个参数是滚动开始时Y的坐标,第三个参数是横向滚动的距离,正值表示向左滚动,第四个参数是纵向滚动的距离,正值表示向上滚动。紧接着调用invalidate()方法来刷新界面。

在这里比较难理解的可能是dx值的计算方式。我也通过两张图片来分析里面的算法:

图一:移动距离超过半个屏幕,应该执行跳转下一页的功能。因此dx=i*getWidth()-getScrollX();可以自行测试。


图二:移动的距离小于屏幕一半,执行跳转上一页的功能:


现在前两步都已经完成了,最后我们还需要进行第三步操作,即重写computeScroll()方法

//Scroller使用调用invalidate();后,会同步调用computeScroll()方法
@Override
public void computeScroll() {
    if(mScroller.computeScrollOffset()){
        int currX = mScroller.getCurrX();
        Log.e("YDL",currX+"");
        scrollTo(mScroller.getCurrX(),0);
        //也要刷新界面
        invalidate();
    }
}

并在其内部完成平滑滚动的逻辑 。在整个后续的平滑滚动过程中,computeScroll()方法是会一直被调用的,因此我们需要不断调用Scroller的computeScrollOffset()方法来进行判断滚动操作是否已经完成了,如果还没完成的话,那就继续调用scrollTo()方法,并把Scroller的currenX和currentY坐标传入,然后刷新界面从而完成平滑滚动的操作。
那么我们运行程序看看效果吧:


可以看到,效果跟系统自带的ViewPage几乎一模一样了。那么最后,再分析一下Scroller进行滚动的原理吧。


平滑移动视图的内容: 利用Scoller和View的scroll方法
    1). Scoller是实现View平滑移动的帮助类, 它本身并不能实现对View的移动
    2). 平滑移动的基本原理: 将整个从起始位置到结束位置的移动分解成多个小的距离, 循环调用scrollTo()实现平滑移动
    3). 相关API:
     a. Scoller类:
       -->Scoller(Context context) : 创建对象的构造方法
       -->startScroll(int startX, int startY, int dx, int dy, int duration) : 开始平滑移动视图(这个方法本身不会产生滑动)
         startX : 起始位置的X偏移量
         startY : 起始位置的Y偏移量
         dx: 滑动多大的X偏移量(如果是0,X方向不会滑动)
         dy: 滑动多大的Y偏移量(如果是0,Y方向不会滑动)
         duration : 整个过程持续的时间(ms)
       -->startScroll(int startX, int startY, int dx, int dy): 开始平滑移动视图(时间为250ms)
       -->boolean computeScrollOffset() : 计算当前移动的偏移量, 并将其保存到Scoller对象中, 如果滑动还没有完成返回true
       -->int getCurrX() : 得到计算出的X偏移量
       -->int getCurrY() : 得到计算出的Y偏移量
     b. View类
       -->invalidate() : 强制重绘, 导致draw()-->computeScroll()
         在scoller.startScroll()后必须执行此方法
       -->computeScroll() : 需要重写此方法, 用于计算移动, 此方法在draw()中调用
         调用scoller计算移动偏移量
         调用view对象scrollTo()到计算出的偏移量
         调用View对象invalidate()强制重绘, 导致computeScroll()再次执行


我们在上面的代码中可以看到当我们手指不段移动屏幕时,就会调用scrollBy来移动一段相对的距离。而当我们手指松开后,会调用mScroller.startScroll(mUnboundedScrollX, 0, delta, 0, duration);来产生一段动画来移动到相应的页面,在这个过程中系统会不断调用computeScroll(),我们再使用scrollTo来把View移动到当前Scroller所在的绝对位置。


到目前为止,该自定义ViewPage控件算是讲完了。

源码下载地址


打开微信扫描下方二维码查看更多安卓文章:


打开微信搜索公众号    Android程序员开发指南   或者手机扫描下方二维码 在公众号阅读更多Android文章。

微信公众号图片:




  • 2
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

杨道龙

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值