Android自定义圆点指示器

更新时间：2021年06月16日 15:00:54 作者：z11h

这篇文章主要为大家详细介绍了Android自定义圆点指示器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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中设置当前的页面的圆点。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Android5.0+ CollapsingToolbarLayout使用详解
这篇文章主要为大家详细介绍了Android5.0+ CollapsingToolbarLayout使用，感兴趣的小伙伴们可以参考一下
2016-09-09
Android实现拍照截图功能
这篇文章主要介绍了Android实现拍照截图功能，简单介绍了Android实现拍照截图功能的步骤，供大家参考，感兴趣的小伙伴们可以参考一下
2016-01-01
关于Android中WebView远程代码执行漏洞浅析
这篇文章主要给大家介绍了关于Android中WebView远程代码执行漏洞的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-05-05
Android绘制炫酷引导界面
这篇文章主要帮助大家使用Android绘制炫酷引导界面，具有实用性和参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
Android实现手机拍照功能
这篇文章主要介绍了Android实现手机拍照功能，感兴趣的小伙伴们可以参考一下
2015-12-12
Android使用Jni实现压力锅数据检测效果示例
这篇文章主要介绍了Android使用Jni实现压力锅数据检测效果,涉及Android结合Jni实现进度条模拟压力锅数据监测效果的相关操作技巧,需要的朋友可以参考下
2017-12-12
Android系统添加Linux驱动
今天小编就为大家分享一篇关于Android系统添加Linux驱动的文章，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2018-10-10
Android源码导入Eclipse步骤详解
在本文中我们给大家详细讲述了Android源码导入Eclipse的步骤和具体方法，需要的朋友们跟着学习下。
2019-03-03
Android TraceView和Lint使用详解及性能优化
这篇文章主要介绍了Android TraceView和Lint使用详解及性能优化的相关资料,需要的朋友可以参考下
2017-03-03
android开发教程之子线程中更新界面
本文主要介绍Android的Handler的使用方法。Handler可以发送Messsage和Runnable对象到与其相关联的线程的消息队列
2014-01-01

Android自定义圆点指示器

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具