自动添加轮播图导航条(小圆点)

在项目中开发,轮播图是必须有的技术点,但是从产品及设计的角度来说,轮播图和导航条是绝配!
所以,自己就写了自动添加轮播图导航条,直接贴代码,都有注释,并且很详细
先上效果图:

第一步:主布局视图

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                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"/>
    <!--小圆点容器-->
    <LinearLayout
        android:layout_centerHorizontal="true"
        android:id="@+id/indicator_llyout"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:layout_marginBottom="100dp"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</RelativeLayout>

第二步:重点代码

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    private LinearLayout mLinearLayout;

    //轮播的图片资源
    int[] imagResStr = new int[]{R.mipmap.ic_launcher,R.mipmap.ic_launcher_round,R.mipmap.ic_launcher,R.mipmap.ic_launcher_round};

    //轮播小圆点
    ImageView[] mIndicatorImags ;

    //转载图片的集合
    private List<View> ImgeList;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        mLinearLayout = (LinearLayout) findViewById(R.id.indicator_llyout);
        //动态添加导航条圆点
        //获取数据资源
        initData();

        //设置图片轮播
        mViewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return ImgeList.size();
            }

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

            //销毁资源
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                //去掉继承父类的方法
                container.removeView(ImgeList.get(position));
            }

             //添加资源
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                //去掉继承父类的方法
              container.addView(ImgeList.get(position));
                return ImgeList.get(position);
            }

        });

        //设置滑动监听
        mViewPager.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 < mIndicatorImags.length; i++) {
                    //红色
                    mIndicatorImags[i].setBackgroundResource(R.drawable.ic_indicators_red);
                    if(i != position) {
                        //白色
                        mIndicatorImags[i].setBackgroundResource(R.drawable.ic_indicators_white);
                    }
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void initData() {
        mIndicatorImags = new ImageView[4];
        ImgeList = new ArrayList<>(4);
        for (int i = 0;i<4 ;i++){
            View view = LayoutInflater.from(this).inflate(R.layout.activity_guide_item, null);
            ImageView imagOder = (ImageView) view.findViewById(R.id.guide_image);
            //设置图片资源
            imagOder.setBackgroundResource(imagResStr[i]);


            //将视图资源添加到集合当中(不是图片资源imagOder,否则会报错如下:)
           // 备注: java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
            ImgeList.add(view);
            //圆点图片
            mIndicatorImags[i] = new ImageView(this);
            if(i== 0) {
                //默认圆点为红色
                mIndicatorImags[i].setBackgroundResource(R.drawable.ic_indicators_red);
            }else {
                //为白色,并添加间隔距离
                mIndicatorImags[i].setBackgroundResource(R.drawable.ic_indicators_white);
                LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(-2,-2);
                //设置左右间隔
                params.setMargins(20,0,0,0);
                mIndicatorImags[i].setLayoutParams(params);
            }
            //为容器添加圆点
            mLinearLayout.addView(mIndicatorImags[i]);
        }
    }
}

第三步:添加的图片视图

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

    <ImageView
        android:id="@+id/guide_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:scaleType="center" />
</LinearLayout>

以上就可以实现了