App引导页的实现带圆点指示器

项目中经常会用到引导页，鉴于此。
今天把项目上用到的一些自定义控件给拆了，然后来写一些demo目的是强化这方面的知识，先看图

再来看代码。
首先编写attrs文件代码如下：

<resources>

    <declare-styleable name="DotIndicator">
        <attr name="distance" format="dimension" />
    declare-styleable>
resources>

distance为圆点间的距离

实现类DotIndicator 继承LinearLayout

public class DotIndicator extends LinearLayout implements ViewPager.OnPageChangeListener {
    private static final int DEFAULT_DISTANCE = 6;
    private int oldPosition = -1;
    private int distance = 0;

    private ViewPager viewPager;

    public DotIndicator(Context context) {
        this(context, null);
    }

    public DotIndicator(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DotIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.DotIndicator);
        distance = array.getDimensionPixelSize(R.styleable.DotIndicator_distance,
                UIUtill.dp2px(context, DEFAULT_DISTANCE));
        array.recycle();
        init();
    }

    private void init() {
// 设置横向
        setOrientation(LinearLayout.HORIZONTAL);
        if (!(getLayoutParams() instanceof FrameLayout.LayoutParams)) {
            FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            params.gravity = Gravity.BOTTOM | Gravity.START;
            setLayoutParams(params);
        }
    }

    /**
 * 关联viewPager 并注册监听
 * @param viewPager
 */
    public void setViewPager(ViewPager viewPager) {
        this.viewPager = viewPager;
        viewPager.addOnPageChangeListener(this);
        if (viewPager != null) {
            setDotIndicator(viewPager.getAdapter().getCount(),getContext());
        }
    }

    /**
 * 设置圆点指示器
 * @param count
 * @param context
 */
    private void setDotIndicator(int count, Context context) {
        removeIndicator();
        if (count <= 0) {
            return;
        }
        for (int i = 0; i             ImageView iView = new ImageView(context);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, 
            LinearLayout.LayoutParams.WRAP_CONTENT);
            params.leftMargin = distance;
            params.rightMargin = distance;
            iView.setImageResource(R.drawable.dot_stroke);
            addView(iView, params);
        }
        notifyIndicator(viewPager.getCurrentItem());

    }

    /**
 * 移除指示器
 */
    private void removeIndicator() {
        removeAllViews();
    }

    /**
 * 通知更新圆点指示器
 * @param currentPosition
 */
    private void notifyIndicator(int currentPosition) {
        if (oldPosition != currentPosition){
            if (oldPosition == -1){
                ((ImageView)getChildAt(currentPosition)).setImageResource(R.drawable.dot_solid);
                oldPosition = currentPosition;
                return;
            }
            ((ImageView)getChildAt(oldPosition)).setImageResource(R.drawable.dot_stroke);
            ((ImageView)getChildAt(currentPosition)).setImageResource(R.drawable.dot_solid);
            oldPosition = currentPosition;
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        notifyIndicator(position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

这里用到的utill工具类为

public class UIUtill {
    public static int dp2px(Context context, int dpValue) {
        return (int) context.getResources().getDisplayMetrics().density * dpValue;
    }
}

其中R.drawable.dot_stroke 在drawable文件下为shape实现代码如下

<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
    <size android:width="10dp"
 android:height="10dp"/>
    <stroke android:width="1dp" android:color="@color/colorAccent"/>
shape>

R.drawable.dot_solid 为

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <size
 android:width="11dp"
 android:height="11dp"/>
    <stroke
 android:width="1dp"
 android:color="@color/colorAccent"
 android:dashWidth="2dp"/>
    <solid android:color="@android:color/white"/>
shape>

接下来再看activity_main.xml实现

"http://schemas.android.com/apk/res/android"
    xmlns:gao="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_hljs-string">"match_parent"
    android:layout_hljs-string">"match_parent"
    tools:cOntext="com.example.ui.testdotindicator.MainActivity">


    .support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_hljs-string">"match_parent"
        android:layout_hljs-string">"match_parent"/>

    <com.example.ui.widget.DotIndicator
        android:id="@+id/dot_indicator"
        android:layout_hljs-string">"wrap_content"
        android:layout_hljs-string">"wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizOntal="true"
        android:gravity="center_vertical"
        android:layout_marginBottom="40dp"
        gao:distance="8dp"/>

最后看MainActivity实现

public class MainActivity extends AppCompatActivity{

    private ViewPager viewPager;
    private DotIndicator dotIndicator;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }


    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        dotIndicator = (DotIndicator) findViewById(R.id.dot_indicator);
        DotPagerAdapter adapter = new DotPagerAdapter(this);
        viewPager.setAdapter(adapter);

        dotIndicator.setViewPager(viewPager);

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                Toast.makeText(MainActivity.this,"position:"+position,Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
}

DotPagerAdapter的实现如下：

public class DotPagerAdapter extends PagerAdapter {
    private List datas = new ArrayList<>();

    public DotPagerAdapter(Context c) {

        for (int i = 0; i <5; i ++){
            ImageView iView = new ImageView(c);
            iView.setImageResource(R.mipmap.a5);
            iView.setScaleType(ImageView.ScaleType.FIT_XY);
            datas.add(iView);
        }
    }

    @Override
    public int getCount() {
        return datas.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(datas.get(position));
// super.destroyItem(container, position, object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(datas.get(position));
        return datas.get(position);
    }
}

总结：在项目的第一次加载中我们经常看到引导页，本例即是通过引导页为需求实现的关联viewPager的圆点指示器。
demo链接