神刀安全网

ViewPager详解(二)广告轮播图

效果图

ViewPager详解(二)广告轮播图
效果图

一、ViewPager填充图片

1.1 布局中申明

  • 由于是显示广告条,所以高度要固定住

      <android.support.v4.view.ViewPager       android:id="@+id/viewpager"       android:layout_width="match_parent"       android:layout_height="120dp"/>

1.2 代码中设置页面数据

  • 准备显示图片控件的集合

      // 准备显示的图片集合   mList = new ArrayList<>();   for (int i = 0; i < mImages.length; i++) {       ImageView imageView = new ImageView(this);       // 将图片设置到ImageView控件上       imageView.setImageResource(mImages[i]);        // 将ImageView控件添加到集合       mList.add(imageView);   }
  • 自定义类书写适配器

      @Override   public Object instantiateItem(ViewGroup container, int position) {       // return super.instantiateItem(container, position);       // 将图片控件添加到容器       container.addView(mList.get(position));        // 返回       return mList.get(position);   }

二、底部小圆点显示逻辑

原理分析:底部的小圆点时浮动在ViewPager上面的的,所以应该是一个RelativeLayout布局。
ViewPager页面切换时小圆点的颜色不一样,所以需要对小圆点做选择器,并且对ViewPager进行监听。

2.1 布局申明

  • 需要用一个RelativeLayout将ViewPager和包裹圆点的LinearLayout包裹起来
    <RelativeLayout         android:layout_width="match_parent"         android:layout_height="120dp">          <android.support.v4.view.ViewPager             android:id="@+id/viewpager"             android:layout_width="match_parent"             android:layout_height="120dp"/>          <LinearLayout             android:id="@+id/pointgroup"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_alignParentBottom="true"           android:layout_centerHorizontal="true"             android:layout_marginBottom="3dp"             android:orientation="horizontal">         </LinearLayout>       </RelativeLayout>

2.2 制作小圆点颜色选择器

  • 选择器的选中状态应该设置为selected,因为对ViewPager监听时可以设置selected的属性

      <selector xmlns:android="http://schemas.android.com/apk/res/android">       <item android:drawable="@drawable/shape_point_normal" android:state_selected="false"/>       <item android:drawable="@drawable/shape_point_selected" android:state_selected="true"/>   </selector>    <shape xmlns:android="http://schemas.android.com/apk/res/android"          android:shape="oval">       <solid android:color="#66000000"/>   </shape    <shape xmlns:android="http://schemas.android.com/apk/res/android"       android:shape="oval">       <solid android:color="#FFFFFF"/>   </shape>

2.3 将小圆点添加到LinearLayout容器

  • 小圆点其实就是一个ImageView,所以在做出ViewPager的页面图片时,一起把小圆点也做了
  • 初始化ImageView添加到LinearLayout之前,需要设置小圆点的布局参数,包括位置和大小

      LinearLayout pointGroup = (LinearLayout) findViewById(R.id.pointgroup);    for (int i = 0; i < mImages.length; i++) {       // 制作底部小圆点       ImageView pointImage = new ImageView(this);       pointImage.setImageResource(R.drawable.shape_point_selector);        // 设置小圆点的布局参数       int PointSize = getResources().getDimensionPixelSize(R.dimen.point_size);       LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(PointSize, PointSize);        if (i > 0) {           params.leftMargin = getResources().getDimensionPixelSize(R.dimen.point_margin);           pointImage.setSelected(false);       } else {           pointImage.setSelected(true);       }       pointImage.setLayoutParams(params);       // 添加到容器里       pointGroup.addView(pointImage);      }

三、小圆点随着ViewPager切换移动

  • 其实就是对ViewPager设置滑动监听,当滑动到每一页时就设置小圆点为选中状态,这样小圆点就显示白色,其他页面就设置为未选中状态显示灰色。

      // 对ViewPager设置滑动监听   viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {       @Override       public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        }        int lastPosition;       @Override       public void onPageSelected(int position) {           // 页面被选中           // 设置当前页面选中           pointGroup.getChildAt(position).setSelected(true);           // 设置前一页不选中           pointGroup.getChildAt(lastPosition).setSelected(false);            // 替换位置           lastPosition = position;        }        @Override       public void onPageScrollStateChanged(int state) {        }   });
  • 这里设置选中和未选中除了可以用替换position的方法之外,还可以再定义一个ImageView来记录选中的ImageView,然后在监听里替换,思想都是一样的。

经过前面的三步设置后就能显示一个简单的广告条了,这里再对其添加一个滑动到最后一页后再滑还能滑动到首页的功能。

四、无限滑动的ViewPager

实现原理: ViewPager之所以滑动到左右能显示页面,其实是因为左右都存在即将要显示的页面。当左右有很多页面时我们就能一直滑动,没有时就不能滑动。所以原理就是让ViewPager的左右都有很多的页面。

4.1 修改getCount方法

  • ViewPager能显示多少个页面全由getCount方法说了算,所以我们首先要改造它。

      @Override   public int getCount() {       // 返回整数的最大值       return Integer.MAX_VALUE;   }

4.2 修改instantiateItem方法

  • 因为position变了,所以显示的位置也变了,这里需要进行取%运算,来还原position。

      // 修改position   position = position % mList.size();

4.3 修改ViewPager监听器里的onPageSelected

  • 用到了position就要修改。

      position = position % mList.size();

修改之后,ViewPager当前页的右边就有了无数的页面,但是因为%了mList.size(),就只会显示mList.size()的大小,这样就实现了无限滑动轮播

五、无限自动轮播的广告图

实现原理:在前面四步的基础上,在代码里添加一个Handler,不断的给自己发消息就好了。

mHandler.postDelayed(new Runnable() {         @Override         public void run() {             int currentPosition = viewPager.getCurrentItem();              if(currentPosition == viewPager.getAdapter().getCount() - 1){                 // 最后一页                 viewPager.setCurrentItem(0);             }else{                 viewPager.setCurrentItem(currentPosition + 1);             }              // 一直给自己发消息             mHandler.postDelayed(this,5000);         }     },5000);

个人主页
Demo下载地址

以上纯属于个人平时工作和学习的一些总结分享,如果有什么错误欢迎随时指出,大家可以讨论一起进步。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » ViewPager详解(二)广告轮播图

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址