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 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类型画的, 也很简单,还是贴一下吧

    
        <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 mPhoto;
        private Context mContext;
        private int mSize;
    
        public DetailsPhotoPageAdapter(Context context, List 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);

    最后再贴一下布局代码吧

    
    <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 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. 最终效果

你可能感兴趣的:(Android-入门)