Android 圆点导航的实现

╰半橙微兮° 2022-05-25 14:12 201阅读 0赞

1、圆点

shape\_step\_bg.xml

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
    
        <size
            android:width="30dp"
            android:height="30dp" />
    
        <solid android:color="@color/theme_btn_bg" />
    
        <stroke
            android:width="0.3dp"
            android:color="@color/theme_btn_bg" />
    
    </shape>

shape\_step\_bg\_p.xml

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
    
        <size
            android:width="30dp"
            android:height="30dp" />
    
        <solid android:color="@color/white" />
    
        <stroke
            android:width="0.3dp"
            android:color="@color/white" />
    
    </shape>

2、布局文件lay\_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:id="@+id/lay_navigation" >
        
    
    </LinearLayout>

3、导航控件HorizontalDotNavigation.java

/**
     * 水平圆点导航
     *
     * @author xl
     */
    public class HorizontalDotNavigation extends LinearLayout {
    
        private LinearLayout m_layContainer;
        private int m_iSum = 0;
        private int m_iSelected = 0;
        private Context m_context;
    
        public HorizontalDotNavigation(Context context) {
            super(context);
            this.m_context = context;
            init(context);
        }
    
        public HorizontalDotNavigation(Context context, AttributeSet attrs) {
            super(context, attrs);
            this.m_context = context;
            init(context);
        }
    
        private void init(Context context) {
            LayoutInflater.from(context).inflate(R.layout.lay_navigation, this);
            setOrientation(LinearLayout.HORIZONTAL);
            setGravity(Gravity.CENTER_VERTICAL);
            m_layContainer = (LinearLayout) findViewById(R.id.lay_navigation);
        }
    
        // 设置圆点总数
        public void setLenght(int sum) {
            this.m_iSum = sum;
        }
    
        // 设置选中圆点的下标
        public void setSelected(int selected) {
            m_layContainer.removeAllViews();
            //this.removeAllViews();
            this.m_iSelected = selected;
            draw();
        }
    
        // 绘制指示器
        public void draw() {
            for (int i = 0; i < m_iSum; i++) {
                ImageView imageview = new ImageView(m_context);
                //LayoutParams单位为pix
                imageview.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, getPixelsFromDp(8)));
                imageview.setPadding(getPixelsFromDp(5), 0, getPixelsFromDp(5), 0);
                if (i == m_iSelected) {
                    imageview.setImageDrawable(getResources().getDrawable(
                            R.drawable.shape_step_bg_p));
                } else {
                    imageview.setImageDrawable(getResources().getDrawable(
                            R.drawable.shape_step_bg));
                }
                m_layContainer.addView(imageview);
                //this.addView(imageview);
            }
        }
    
        /**
         * dp转换为pix
         *
         * @param dp
         * @return
         */
        private int getPixelsFromDp(int dp) {
            //DisplayMetrics metrics =new DisplayMetrics();
            //getWindowManager().getDefaultDisplay().getMetrics(metrics);
            DisplayMetrics metrics = getResources().getDisplayMetrics();
            return (dp * metrics.densityDpi) / DisplayMetrics.DENSITY_DEFAULT;
        }
    
    }

4、使用

布局文件

activity->onCreate()

mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {
                    // 设置导航
                    setDotNavigation(position);
                    // 设置当前页
                    miCurrPager = position;
                    // 开始停止更新
                    switch (position) {
                        case 0:
                            break;
                        case 1:
                            break;
                    }
                }
    
                @Override
                public void onPageScrolled(int arg0, float arg1, int arg2) {
                }
    
                @Override
                public void onPageScrollStateChanged(int arg0) {
                }
            });
            // 设置默认为第一屏
            mViewPager.setCurrentItem(0);
            // 初始化导航
            initDotNavigation(mListFragment.size());

/**
         * 初始化导航
         */
        public void initDotNavigation(int sum) {
            mDotNavigation.setLenght(sum);
            mDotNavigation.setSelected(0);
        }
    
        /**
         * 设置导航
         */
        public void setDotNavigation(int select) {
            mDotNavigation.setSelected(select);
        }

完！！！