Android 圆点导航的实现

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);
            imageview.setLayoutParams(new LayoutParams(35, 35));
            imageview.setPadding(10, 0, 10, 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);
        }
    }

}

4、使用

布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/theme_bg"
    android:orientation="vertical">

    <com..view.CustomMenuBar
        android:id="@+id/menubar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <RelativeLayout
        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="match_parent" />

        <com.view.HorizontalDotNavigation
            android:id="@+id/dot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="100dp" />

    </RelativeLayout>

</LinearLayout>

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);
    }

完！！！