带有引导小点的ViewPager的实现

工作中遇到了需要写一个带有引导的小点的viewpager展示界面，由于网络上的第三方库都不太满意，东西太多，自己试着写了个。

附上demo：带小点的ViewPager图片展示界面demo

界面图预览：

ViewPagerWithPoint.java

package violetjack.viewpagerwithpoints;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.ArrayList;

/**
 * 自定义下方带小点引导的ViewPager
 *
 * @author violetjack
 */
public class ViewPagerWithPoints extends FrameLayout {

    private Context context;
    private ViewPager imageViewPager;
    private LinearLayout llPoints;
    private ArrayList<ImageView> pointList;
    private OnPagerClickListener pagerClickListener;

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

    public ViewPagerWithPoints(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        init();
    }

    /**
     * 初始化
     */
    private void init() {
        LayoutInflater.from(context).inflate(R.layout.viewpager_with_points, this, true);
        imageViewPager = (ViewPager) findViewById(R.id.viewpager_image_viewpager_with_points);
        llPoints = (LinearLayout) findViewById(R.id.linearlayout_points_viewpager_with_points);
        pointList = new ArrayList<>();
        llPoints.setVisibility(View.INVISIBLE);
    }

    /**
     * 设置页
     *
     * @param imageViewList：ImageView集合
     * @param dotId：未被选择图片的ID
     * @param dotSelectedId：被选择图片的ID
     */
    public void setPager(ArrayList<ImageView> imageViewList, final int dotId, final int dotSelectedId) {
        llPoints.removeAllViews();
        if (imageViewList.size() == 0) {
            llPoints.setVisibility(View.INVISIBLE);
        } else {
            llPoints.setVisibility(View.VISIBLE);
        }
        for (int i = 0; i < imageViewList.size(); i++) {
            ImageView ivPoint = new ImageView(context);
            ivPoint.setLayoutParams(new LayoutParams(30, 30));
            ivPoint.setPadding(5, 0, 5, 0);
            llPoints.addView(ivPoint);
            pointList.add(ivPoint);
        }
        for (int i = 0; i < pointList.size(); i++) {
            pointList.get(i).setImageResource(dotId);
        }
        pointList.get(0).setImageResource(dotSelectedId);
        ImagePagerAdapter imagePagerAdapter = new ImagePagerAdapter(imageViewList);
        imageViewPager.setAdapter(imagePagerAdapter);
        imageViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                for (int i = 0; i < pointList.size(); i++) {
                    pointList.get(i).setImageResource(dotId);
                }
                pointList.get(position).setImageResource(dotSelectedId);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    /**
     * 图片适配器
     */
    private class ImagePagerAdapter extends PagerAdapter {

        private ArrayList<ImageView> imageViewList;

        public ImagePagerAdapter(ArrayList<ImageView> imageViewList) {
            this.imageViewList = imageViewList;
        }

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

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

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

        @Override
        public Object instantiateItem(ViewGroup container, final int position) {
            ImageView imageView = imageViewList.get(position);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (pagerClickListener != null) {
                        pagerClickListener.onPageClick(context, position);
                    }
                }
            });
            container.addView(imageView);
            return imageView;
        }

    }

    /**
     * 图片单击事件接口回调
     *
     * @param onPagerClickListener：图片单击事件接口
     */
    public void setPagerClickListener(OnPagerClickListener onPagerClickListener) {
        this.pagerClickListener = onPagerClickListener;
    }

    /**
     * 图片单击事件接口
     */
    public interface OnPagerClickListener {
        void onPageClick(Context context, int position);
    }

}

view_pager_with_point.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_image_viewpager_with_points"
        android:layout_marginBottom="40dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:id="@+id/linearlayout_points_viewpager_with_points"
        android:orientation="horizontal"
        android:layout_gravity="bottom"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="35dp"/>

</FrameLayout>

该自定义view的使用：

viewPagerWithPoints.setPager(imageViewList, R.drawable.ic_dot_normal, R.drawable.ic_dot_selected);
viewPagerWithPoints.setPagerClickListener(new ViewPagerWithPoints.OnPagerClickListener() {
    @Override
    public void onPageClick(Context context, int position) {
        Toast.makeText(MainActivity.this, "点击了第" + (position + 1) + "个图片", Toast.LENGTH_LONG).show();
    }
});