Android ViewPager 小圆点 + 无限循环 + 动态滑动

• 前言

  最近的一个项目需要用到这种效果, 所以今天我们来实现这个ViewPager+小圆点+无限循环,这种效果可以用来作首页的广告啊, 各种显示图片的地方都就可以.

• ViewPager.OnPageChangeListener

  我们知道ViewPager有一个方法是经常用到的, 就是 onPageChangeListener(…) ,这个方法是用来监听Viewpager滑动的, 所以我们要加小圆点就需要自己实现这个方法.

  代码如下:

      public class DetailsPhotoPagerListener implements ViewPager.OnPageChangeListener {        private Context mContext;        private LinearLayout mLinearLayout;         //底部圆点布局        private int mSize;                          //圆点数量        private List<ImageView> mDotView;           //圆点容器        public DetailsPhotoPagerListener(Context context, LinearLayout linearLayout, int size) {            mContext = context;            mLinearLayout = linearLayout;            mSize = size;            initData();        }        private void initData() {            mDotView=new ArrayList<>();            for (int i = 0; i < mSize; i++) {                ImageView imageView = new ImageView(mContext);                LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));                params.leftMargin = 10;     //设置圆点相距距离                params.rightMargin = 10;                if (i == 0) {               //初始化为红点                    imageView.setBackgroundResource(R.drawable.bg_details_photo_viewindicator_red);                } else {                    imageView.setBackgroundResource(R.drawable.bg_details_photo_viewindicator_grey);                }                mLinearLayout.addView(imageView,params);                mDotView.add(imageView);            }        }        @Override        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        }        @Override        public void onPageSelected(int position) {            for (int i = 0; i < mSize; i++) {                if ((position % mSize) == i) {      //如果是当前的位置就设置为红点                    mDotView.get(i).setBackgroundResource(R.drawable.bg_details_photo_viewindicator_red);                } else {                    mDotView.get(i).setBackgroundResource(R.drawable.bg_details_photo_viewindicator_grey);                }            }        }        @Override        public void onPageScrollStateChanged(int state) {        }    }

  道理很简单, 这里的小圆点我是在Drawable里新建一个shape类型画的, 也很简单,还是贴一下吧

  <?xml version="1.0" encoding="utf-8"?>    <selector xmlns:android="http://schemas.android.com/apk/res/android">        <item>            <shape android:shape="oval" android:useLevel="false">                <solid android:color="@color/color_primary"/>                <size android:width="8dp" android:height="8dp"/>            </shape>        </item>    </selector>

• 无限循环滑动

  就是ViewPagerAdapter里面设置一下%, 跟哈希表一样, 循环一下,很简单, 代码如下.

  public class DetailsPhotoPageAdapter extends PagerAdapter {    private List<String> mPhoto;    private Context mContext;    private int mSize;    public DetailsPhotoPageAdapter(Context context, List<String> photo) {        mPhoto = photo;        mContext = context;        mSize = mPhoto.size();    }    @Override    public int getCount() {        return Integer.MAX_VALUE;   //实现无限滑动    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        position = position % mSize;        //永远不越界        View view = LayoutInflater.from(mContext).inflate(R.layout.viewpager_details_top, null);        ImageView imageView = (ImageView) view.findViewById(R.id.iv_details_top);        Glide.with(mContext).load(mPhoto.get(position)).into(imageView);        container.addView(view);        return view;    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView((View) object);    }}

  最后别忘了在初始化的时候, 设置加入以下代码, 让人以为是无限循环, 不加的话第一张不能向左滑动

         int startPage = Integer.MAX_VALUE / 2;       mVpDetailsTop.setCurrentItem(startPage);

  最后再贴一下布局代码吧

  <?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"            android:layout_width="match_parent"            android:layout_height="wrap_content">            <android.support.v4.view.ViewPager                android:id="@+id/vp_details_top"                android:layout_width="match_parent"                android:layout_height="180dp"                >            </android.support.v4.view.ViewPager>            <LinearLayout                android:id="@+id/ll_details_top_dot"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:gravity="center"                android:layout_gravity="bottom"                android:orientation="horizontal"                android:layout_marginBottom="5dp">            </LinearLayout>        </FrameLayout>

• 最终效果

  

---

• 小圆点动态滑动

  看了上面的介绍, 这是最简单的实现小圆点, 但是我们想要酷一点的效果就可以接着看下面.

  1. 首先要改的是布局, 布局增加一个View 然 放在后把他们同一个布局里面, 代码如下:

     <FrameLayout        android:layout_width="match_parent"        android:layout_height="wrap_content">        <android.support.v4.view.ViewPager            android:id="@+id/vp_details_top"            android:layout_width="match_parent"            android:layout_height="180dp"            >        </android.support.v4.view.ViewPager>        <RelativeLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="bottom|center"            android:layout_marginBottom="5dp">            <LinearLayout                android:id="@+id/ll_details_top_dot"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:orientation="horizontal">            </LinearLayout>            <View                android:id="@+id/view_details_top_dot_red"                android:layout_width="8dp"                android:layout_height="8dp"                android:background="@drawable/bg_details_photo_viewindicator_red"                />        </RelativeLayout>    </FrameLayout>

  2. 然后是OnPageChangeListener

     public class DetailsPhotoPagerListener implements ViewPager.OnPageChangeListener {    private Context mContext;    private LinearLayout mLinearLayout;         //底部圆点布局    private int mSize;                          //圆点数量    private List<ImageView> mDotView;           //圆点容器    private float mDistance;    private View mView;    RelativeLayout.LayoutParams mViewParams;    public DetailsPhotoPagerListener(Context context, LinearLayout linearLayout, View view, int size) {        mContext = context;        mLinearLayout = linearLayout;        mSize = size;        mView = view;        initData();    }    private void initData() {        mDotView = new ArrayList<>();        for (int i = 0; i < mSize; i++) {            ImageView imageView = new ImageView(mContext);            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));            imageView.setBackgroundResource(R.drawable.bg_details_photo_viewindicator_grey);            if (i != 0) {                params.leftMargin = 10;     //设置圆点相距距离            }            mLinearLayout.addView(imageView, params);            mDotView.add(imageView);        }          //以下为修改的主要代码        mViewParams = (RelativeLayout.LayoutParams) mView.getLayoutParams();        mView.post(new Runnable() {     //获得两个点之间的距离            @Override            public void run() {                mDistance = mLinearLayout.getChildAt(1).getLeft() - mLinearLayout.getChildAt(0).getLeft();            }        });    }    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        position = position % mSize;        float leftMargin = 0;        if (position != mSize - 1) {                                    //如果是在最后一页, 往右滑就不增加滑动距离            leftMargin = mDistance * (position + positionOffset);        } else {            leftMargin = mDistance * position;        }        if(mViewParams!=null){            mViewParams.leftMargin = Math.round(leftMargin);            mView.setLayoutParams(mViewParams);        }    }    @Override    public void onPageSelected(int position) {    }    @Override    public void onPageScrollStateChanged(int state) {    }}

     主要修改的地方还是在滑动监听的地方, 上面的注释也解释得挺清楚的.

  3. 最终效果