自定义控件由浅到深(二)实现ViewPager滑动时的小圆点变化

最新推荐文章于 2020-03-01 15:36:44 发布

bo543937071

最新推荐文章于 2020-03-01 15:36:44 发布

阅读量1.8k

点赞数 1

文章标签： ViewPager滑动小圆点的实现自定义view 自定义控件

本文链接：https://blog.csdn.net/bo543937071/article/details/53486745

版权

本文深入探讨自定义View，通过实现ViewPager滑动时小圆点的变化效果，讲解如何创建自定义view、动态改变view及设置属性。示例代码展示如何在ViewPager中结合自定义Indicator实现这一功能，并推荐了GitHub上的相关开源控件。

摘要由CSDN通过智能技术生成

在我的之前两个博客有介绍ViewPager的使用和简述自定义控件，但在ViewPager的使用中，我没有添加当ViewPager滑动状态改变时，下方小圆点跟随变化的效果并没有实现。

实现ViewPager小圆点滑动效果的方法有多种方法，这次我们主要是为了深入的研究自定义View，那就以此实现该效果。如果开发有这方面的需求,可以在www.github.com搜索Indicator,有很多这方面非常好的开源控件。

通过这个例子，引申出：

1.如何创建自定义view

2.自定义view的动态改变

3.自定义view怎样设置属性

先看一张效果图：

一、布局文件：

其中用到v4包下的ViewPager，Indicator是我们自定义的view(在第二步创建)，也就是效果图中的小圆点。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="200dp"></android.support.v4.view.ViewPager>
    <com.gaojianbo.indicator.Indicator
        android:id="@+id/indicator"
        android:layout_width="200dp"
        android:layout_height="60dp"
        android:layout_alignBottom="@+id/viewPager"
        android:layout_centerHorizontal="true"/>
</RelativeLayout>
二、新建一个类Indicator继承View，完成自定义view
思考1.需要两个画笔进行绘画：第一个画空心圆，第二个画实心的移动的圆(后面简称实心圆)。
2.怎样实现动态的添加空心圆？
编程思路：动态添加，一般使用for循环,根据一个int变量,来决定代码执行次数，可以节省很多代码。
3.实现实心圆跟随ViewPager的滑动而改变位置是怎样实现的？
关键在于偏移量的问题，在Indicator设置好接收偏移量的方法，在MainActivity中的ViewPager监听事件的回调方法中在调用,
传递Position位置和移动百分比给Indicator自定义控件(详细在代码中)。
public class Indicator extends View {
    //实心圆的画笔
    private Paint forePaint;
    //空心圆的画笔
    private Paint bgPaint;
    //规定圆的数量，默认是6个，如果有XML指定的数量，使用指定的
    private int number = 6;
    //圆的半径，规定默认值为10，如果有XML指定的值，使用指定的
    private int r = 10;
    //定义空心圆的背景颜色，默认红色，如果有XML指定的颜色，使用指定的
    private int bgColor = Color.RED;
    //定义实心圆的背景颜色，默认蓝色，如果有XML指定的颜色，使用指定的
    private int foreColor = Color.BLUE;

    //该方法在我们java代码添加控件时回调
    public Indicator(Context context) {
        super(context);
        initPaint();
    }
    //