自定义Android圆点指示器

先上效果图

大概思路就是自定义View 从左至右绘制圆点 然后在ViewPager的OnPageChangeListener中设置当前页面的圆点

下面是代码

先定义属性

<resources>    <attr name="selectedColor" format="color"/>    <attr name="unselectedColor" format="color"/>    <declare-styleable name="Indicator">        <attr name="selectedColor"/>        <attr name="unselectedColor"/>    </declare-styleable></resources>

接下来是自定义的View

public class Indicator extends View{    private static final int DEFAULT_TOTAL_INDEX = 5;    private static final int DEFAULT_CURRENT_INDEX = 0;    private static final int DEFAULT_CIRCLE_DISTANCE = 40;    private static final int DEFAULT_CIRCLE_RADIUS = 8;    private static final int DEFAULT_CIRCLE_SELECTED_RADIUS = 11;    private int selectedColor;    private int unselectedColor;    private int currentIndex;    private int totalIndex;    private Paint paint;    private int startX;    private int startSelectedY;    private int startY;    private int centreX;    public Indicator(Context context) {        this(context,null);    }    public Indicator(Context context, AttributeSet attrs) {        this(context, attrs,0);    }    public Indicator(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs,R.styleable.Indicator,defStyleAttr,0);        selectedColor = typedArray.getColor(R.styleable.Indicator_selectedColor, Color.LTGRAY);        unselectedColor = typedArray.getColor(R.styleable.Indicator_unselectedColor,Color.WHITE);        typedArray.recycle();        totalIndex = DEFAULT_TOTAL_INDEX;        currentIndex = DEFAULT_CURRENT_INDEX;        paint = new Paint();    }

从TypedArray中获取自定义的属性，totalIndex是总的圆点个数，currentIndex是当前页面的圆点

接下来是重写的OnDraw()方法

@Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        centreX = getWidth() / 2;        startSelectedY = getHeight() / 2 - DEFAULT_CIRCLE_SELECTED_RADIUS;        startY = getHeight() / 2 - DEFAULT_CIRCLE_RADIUS;        if (totalIndex % 2 == 0){            startX = centreX - (int)(1.0 * (totalIndex - 1)/2 * DEFAULT_CIRCLE_DISTANCE);        }else{            startX = centreX - totalIndex / 2 * DEFAULT_CIRCLE_DISTANCE;        }        paint.setAntiAlias(true);        paint.setColor(unselectedColor);        int tempX = startX;        for(int i = 0 ; i < totalIndex ; i++ ){            RectF rectF = new RectF(tempX - DEFAULT_CIRCLE_RADIUS,startY,                    tempX + DEFAULT_CIRCLE_RADIUS,startY + 2 * DEFAULT_CIRCLE_RADIUS);            if (i == currentIndex) {                paint.setColor(selectedColor);                rectF = new RectF(tempX - DEFAULT_CIRCLE_SELECTED_RADIUS,startSelectedY,                        tempX + DEFAULT_CIRCLE_SELECTED_RADIUS,startSelectedY + 2 * DEFAULT_CIRCLE_SELECTED_RADIUS);            }            canvas.drawOval(rectF,paint);            if (paint.getColor() == selectedColor)                paint.setColor(unselectedColor);            tempX += DEFAULT_CIRCLE_DISTANCE;        }    }

因为当前页面的圆点和未选中页面的圆点要设置不同的大小 所以分别设置每个圆点的坐标 然后用for循环绘制圆点

这里有一点要注意 new RectF() 的四个参数分别是圆点外面的矩形的左上角的X,Y和右下角的X,Y

接下来是设置当前页面的圆点的方法

public void setCurrentIndex(int currentIndex){        //if (currentIndex < 0)        //    currentIndex += totalIndex ;        //if (currentIndex > totalIndex - 1)        //    currentIndex %= totalIndex;        this.currentIndex = currentIndex;        invalidate();    }

注释里的代码是当页面可以循环的时候设置的

接下来是设置总的圆点个数的方法

public void setTotalIndex(int totalIndex){        int oldTotalIndex = this.totalIndex;        if (totalIndex < 1)            return;        if (totalIndex < oldTotalIndex){            if (currentIndex == totalIndex )                currentIndex = totalIndex - 1;        }        this.totalIndex = totalIndex;        invalidate();    }

当删除圆点的时候 如果currentIndex是最后一个 让currentIndex向前移动

接下来是重写的OnMeasure()方法

@Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        setMeasuredDimension(measureWidth(widthMeasureSpec),measureHeight(heightMeasureSpec));    }    private int measureHeight(int measureSpec){        int result;        int specMode = MeasureSpec.getMode(measureSpec);        int specSize = MeasureSpec.getSize(measureSpec);        int desired = DEFAULT_CIRCLE_SELECTED_RADIUS * 2 + getPaddingBottom() + getPaddingTop();        if(specMode == MeasureSpec.EXACTLY) {            result = Math.max(desired,specSize);        }else{            if(specMode == MeasureSpec.AT_MOST){                result = Math.min(desired,specSize);            }            else result = desired;        }        return result;    }    private int measureWidth(int measureSpec){        int result;        int specMode = MeasureSpec.getMode(measureSpec);        int specSize = MeasureSpec.getSize(measureSpec);        int desired = (totalIndex - 1) * DEFAULT_CIRCLE_DISTANCE + DEFAULT_CIRCLE_SELECTED_RADIUS * 2 + getPaddingLeft() + getPaddingRight();        if(specMode == MeasureSpec.EXACTLY) {            result = Math.max(desired,specSize);        }else{            if(specMode == MeasureSpec.AT_MOST){                result = Math.min(desired,specSize);            }else result = desired;        }        return result;    }

下面是MainActivity的布局代码，很简单

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.lzh123.learnviewpager.MainActivity">    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent"/>    <com.example.lzh123.learnviewpager.Indicator        app:selectedColor="#FFFFFF"        app:unselectedColor="#C7C7C7"        android:id="@+id/indicator"        android:layout_centerInParent="true"        android:layout_width="wrap_content"        android:layout_height="wrap_content" /></RelativeLayout>

下面是MainActivity的代码

public class MainActivity extends AppCompatActivity {    View layout1,layout2,layout3;    ViewPager viewPager;    Indicator indicator;    List<View> viewList;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        viewPager = (ViewPager) findViewById(R.id.viewPager);        LayoutInflater inflater = getLayoutInflater();        layout1 = inflater.inflate(R.layout.layout1,null);        layout2 = inflater.inflate(R.layout.layout2,null);        layout3 = inflater.inflate(R.layout.layout3,null);        viewList = new ArrayList<>();        viewList.add(layout1);        viewList.add(layout2);        viewList.add(layout3);        indicator = (Indicator) findViewById(R.id.indicator);        indicator.setTotalIndex(viewList.size());        PagerAdapter pagerAdapter = new PagerAdapter() {            @Override            public int getCount() {                return viewList.size();            }            @Override            public void destroyItem(ViewGroup container, int position, Object object) {                container.removeView(viewList.get(position));            }            @Override            public Object instantiateItem(ViewGroup container, int position) {                container.addView(viewList.get(position));                return position;            }            @Override            public boolean isViewFromObject(View view, Object object) {                return view == viewList.get(Integer.parseInt(object.toString()));            }        };        viewPager.setAdapter(pagerAdapter);        viewPager.setOnPageChangeListener(new PageChangeListener());    }    public class PageChangeListener implements ViewPager.OnPageChangeListener{        @Override        public void onPageSelected(int position) {            indicator.setCurrentIndex(position);        }        @Override        public void onPageScrollStateChanged(int state) {        }        @Override        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        }    }

ViewPager里添加了三个空页面 然后设置指示器的圆点个数，最后在ViewPager的OnPageChangeListener中设置当前的页面的圆点。

以上