Android从零开搞系列：自定义View（4）基本的自定义ViewPager指示器+开源项目分析（上）

最新推荐文章于 2024-05-14 09:35:01 发布

MDove

最新推荐文章于 2024-05-14 09:35:01 发布

阅读量776

点赞数 1

分类专栏： Android 自定义View 从零开搞系列文章标签： ViewPager 指示器自定义View

本文链接：https://blog.csdn.net/wjzj000/article/details/53646358

版权

Android 同时被 3 个专栏收录

89 篇文章 1 订阅

订阅专栏

从零开搞系列

25 篇文章 0 订阅

订阅专栏

自定义View

19 篇文章 0 订阅

订阅专栏

转载请注意：http://blog.csdn.net/wjzj000/article/details/53646358
本菜开源的一个自己写的Demo，希望能给Androider们有所帮助，水平有限，见谅见谅…
https://github.com/zhiaixinyang/PersonalCollect （拆解GitHub上的优秀框架于一体，全部拆离不含任何额外的库导入）
https://github.com/zhiaixinyang/MyFirstApp（Retrofit+RxJava+MVP）

基本的自定义ViewPager的指示器

当然关于ViewPager指示器，如果只需要简洁大方，那么我们最简单的方案就是使用TabLayout+ViewPager。
当然咱们也有很多非常不错的开源框架可以选择。
本次的记录的内容就是为了自己对其中涉及的内容进行几率和梳理。

关于本次：基础自定义+开源框架分析

一、基础的自定义部分

这个效果的代码思路来自于鸿洋大神的博客还有他在慕课上的视频。感觉看博客蛋疼菊紧可以去慕课看洋神的视频。

先让我们看一下效果

这里写图片描述

思路梳理

主体分为俩个部分：ViewPager+指示器。ViewPager没啥好说的该咋霍霍咋霍霍。
指示器：需要我们自己去自定义。既然是横向的，那就继承与LinearLayout，然后动态增加里边的内容（Tab）。关于那个可以移动的小三角形，我们将使用Canvas进行绘制，它的移动将和ViewPager进行相关。通过addOnPageChangeListener()监听。

代码分析

先让我们看一看添加动态Tab

//这里仿照TabLayout的写法。设置全部Tab的标题
public void setTitles(List<String> titles){
        //先移除内部的全部子View（虽然现阶段根本啥也没有...）
        removeAllViews();
        //默认排列方式是居中的
        setGravity(Gravity.LEFT);
        if (titles!=null) {
            for (String title : titles) {
                TextView textView = new TextView(MyApplication.getAllContext());
                textView.setText(title);
                LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
                /**
                 * 注意getScreenWidth是获取屏幕宽度的自定义的方法。
                 * 此处为什么要自己写一个获取屏幕宽度的方式，please往下看。
                 */
                lp.width= (int) (getScreenWidth()/3);
                textView.setTextColor(Color.WHITE);
                textView.setGravity(Gravity.CENTER);
                textView.setTextSize(TypedValue.COMPLEX_UNIT_SP,14);
                addView(textView,lp);
            }
            setTabClickEvent();
        }
    }
    private float getScreenWidth(){
        DisplayMetrics displayMetrics = new DisplayMetrics();
        WindowManager windowManager = (WindowManager) getContext()
                .getSystemService(Context.WINDOW_SERVICE);
        windowManager.getDefaultDisplay().getMetrics(displayMetrics);
        return displayMetrics.widthPixels;
    }

这里解释为什么调用系统的获取屏幕的宽度。

先让我们看一张图

这是个方法的回调顺序。让我们一点点看：

构造方法第一个被调用这个没啥好说咱们跳过….
正式第一个被回调的onFinishInflate()：当我们的布局中的XML加载完毕后，这个方法回调。此时通过getWidth()获取的控件的宽度是为0。
第二第三个方法，是我们自己设置的。写在View初始化之后。但是我们要注意！他们先于View的绘制系列方法之前被调用。因此此时通过getWidth()获取的控件的宽度是为0。所以我们要使用系统的方式在此处获取屏幕宽高来动态的给Tab赋值。
- 紧接着我们可以看到onMeasure()被调用俩次，这里没啥有价值的东西。核心是onSizeChanged()方法别调用后，这里的getWidth()即可得到控件的宽高！然后onMeasure()onLayout()onDarw()被执行。父View完成绘制。
最后一个回调dispatchDraw()：此方法用于绘制父控件中的子控件。

那么为什么要使用系统的方式获取宽高这个问题便有了答案。

接下来让我们看一看画三角形

这里真的没有什么难的，大家这自信心上一定不要打怵，不难！

首先是先关的初始操作

        //初始化画笔
        paint=new Paint();
        paint.setColor(Color.WHITE);
        //抗锯齿开启
        paint.setAntiAlias(true);
        //传入的此类，会使画笔的线段拐角有圆角效果
        paint.setPathEffect(new CornerPathEffect(3));
        paint.setStyle(Paint.Style.FILL);

    //绘制三角形，就是三条线段（Path）按自己想要的长度围成的闭合图形，然后通过Canvas.drawPath完成绘制。
    //此方法在每次View尺寸发生变化时回调。因此在此处我们可以拿到这个控件的宽和高
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        triangleWidth=w/18;//三角形的宽（设置为屏幕宽度的十八分之一）
        //三角形的高，此处我直接用的宽的一半。也就是说我们绘制的是一个直角三角形
        triangleHeight=triangleWidth/2;
        //开始时三角形的初始偏移量。（就是第一个Tab宽度的一半然后减去半个三角形的宽。）
        initLenght=w/6-triangleHeight/2;
        width=w;
        height=h;
        //通过Path路径来画三角形
        path=new Path();
        //首先移动到（0,0）
        path.moveTo(0,0);
        //然后从（0,0）画到（三角形宽度，0）这个点
        path.lineTo(triangleWidth,0);
        /**
         *然后从（triangleWidth，0）画到三角形的定点（triangleWidth/2,-triangleHeight）
         * 因为我们的（0,0）是起点，所以顶点的y在（0,0）之上，根据安卓的特性所以顶点y为负
         */
        path.lineTo(triangleWidth/2,-triangleHeight);
        //闭合路径
        path.close();
    }

此时绘制三角形的画笔和路径都已经存在，接下来就是Canvas绘制了！
如果对Canvas类不是很了解，可以参考我的另一篇博客：
http://blog.csdn.net/wjzj000/article/details/53589024

//此方法会在父View画子View的时候回调，因此我们的三角形在此处绘制.此方法会被循环回调
    @Override
    protected void dispatchDraw(Canvas canvas) {
        canvas.save();
        //移动画布，我们的三角形要随ViewPager的滑动而滑动，
        /**
         * 这里的思路：
         * 我们绘制三角形的坐标不变，因此我们的画布要移动。怎么移动？移动多少？
         * 很明显，三角形的移动和ViewPager的移动有关联。
         * 而且这个移动值是一个动态变化的值。而通过addOnPageChangeListener()监听中的特定回调方法即可完成这个效果。offsetLenght这个变量就是接受ViewPager监听回调的。（初始为0）
         * /
        canvas.translate(initLenght+offsetLenght,getHeight());
        canvas.drawPath(path,paint);
        canvas.restore();
        super.dispatchDraw(canvas);
    }

OK，这样一个静态三角形就画好。上文中代码提到，想要三角形动，那么就要监听ViewPager的滑动，那么接下来让我们看一看ViewPager的监听。

//代码比较简单，而且注释已包含其中。
public void setViewPager(ViewPager viewPager){
        this.viewPager=viewPager;
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                /**
                 * position:ViewPager中Fragment的位置。本例则为：0,1,2
                 * positionOffset：简单打印一下就会发现这个值。随着滑动的完成,数值的变化时0-1。
                 */
                //我们在使用Canvas绘制三角形所用到的offsetLenght就是在这个方法中别动态赋值
                setOffsetLength(position,positionOffset);
                setSelectTab(position);
            }

            @Override
            public void onPageSelected(int position) {
                //当我们选择特定的ViewPager内部对象时返回这个对象的位置。
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                /**
                 * 基本上的滑动回调的状态都是这三种：
                 * SCROLL_STATE_IDLE 当前未滚动（滚动停止后调用）
                 * SCROLL_STATE_DRAGGING 当前正在被外部输入（如用户触摸输入）拖动（正在滑动，且手指不离开屏幕）
                 * SCROLL_STATE_SETTLING 目前正在动画到最终位置，而不在外部控制之下（惯性滑动）
                 */
            }
        });
        //设置默认Viewpager显示的页面
        viewPager.setCurrentItem(0);
        setSelectTab(0);
    }

public void setOffsetLength(int position,float offsetLenght){
        this.offsetLenght = (int) ((getWidth() / 3) * (offsetLenght + position));
        if (position>=1){
            //导航条的移动
            //此方法用于View（也就是Tab）的滑动。
            scrollTo((int) ((position-1)*getWidth()/3+getWidth()/3*offsetLenght),0);
        }
        //此方法作用在UI线程使自身重新绘制。重新调用draw()。
        invalidate();
    }

这样之后，我们三角形就可以跟随ViewPager的移动而移动。当然我们的Tab也可以随着滑动。核心就是上边那个方法中的scrollTo()。
到这我们基本上已经完成了大部分，接下啦就是Tab被选中的高亮效果和点击效果。

    //这里真心没有啥好解释的- -！
    private void setSelectTab(int position){
        resetTabColor();
        if (getChildAt(position) instanceof TextView){
            ((TextView) getChildAt(position)).setTextColor(Color.BLUE);
            ((TextView) 
            //这种方式可以直接设置18sp
            getChildAt(position)).setTextSize(TypedValue.COMPLEX_UNIT_SP,18);
        }
    }

    private void resetTabColor() {
        for (int i = 0; i < getChildCount(); i++) {
            if (getChildAt(i) instanceof TextView){
                ((TextView) getChildAt(i)).setTextColor(Color.WHITE);
                ((TextView) getChildAt(i)).setTextSize(TypedValue.COMPLEX_UNIT_SP,18);
            }
        }
    }
    //此方法应该在Tab被初始化的时候调用。
    private void setTabClickEvent(){
        resetTabColor();
        for (int i=0;i<getChildCount();i++){
            final int a=i;
            final View view=getChildAt(i);
            if (view instanceof  TextView){
                view.setOnClickListener(new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        viewPager.setCurrentItem(a);
                    }
                });
            }
        }
    }

Ok，关于基本的自定义ViewPager指示器的部分就到此结束了。那么接下来便是：

二：开源项目分析

先看一波效果

这里写图片描述

此项目来自于：
https://github.com/hackware1993/MagicIndicator
篇幅过长，所以开源项目分析请移步：
http://blog.csdn.net/wjzj000/article/details/53664920

尾声

先记录到此，以后遇到实用的就继续加上。

最后希望各位看官可以star我的GitHub，三叩九拜，满地打滚求star：
https://github.com/zhiaixinyang/PersonalCollect
https://github.com/zhiaixinyang/MyFirstApp

MDove

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android从零开搞系列：自定义View（4）基本的自定义ViewPager指示器+开源项目分析（上）

基本的自定义ViewPager的指示器。ViewPager指示器的原理以及思路解析。开源ViewPager指示器源码分析。
复制链接

扫一扫