Android指示器，轮播与循环轮播

Android UI Libs之CircleIndicator

1. 说明

CircleIndicator，顾名思义，圆形指示器，只一个可以用来做轮播的第三方库。

2. 配置

在模块的build.gradle中添加依赖：compile 'me.relex:circleindicator:1.2.1@aar'

3. 基本使用

在xml布局文件中定义ViewPager与CircleIndicator：

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="150dp">

<android.support.v4.view.ViewPager

android:id="@+id/view_pager"

android:layout_width="match_parent"

android:layout_height="150dp">

</android.support.v4.view.ViewPager>

<me.relex.circleindicator.CircleIndicator

android:id="@+id/indicator"

android:layout_width="match_parent"

android:layout_height="48dp"/>

</RelativeLayout>

注意：ViewPager与CircleIndicator一般放在同一个RelativeLayout中，并且CircleIndicator放在后面

在java文件中的相关操作：

this.indicator = (CircleIndicator) findViewById(R.id.indicator); this.viewpager = (ViewPager) findViewById(R.id.view_pager);

List<Fragment> list=new ArrayList<>();

myFragment1 = new MyFragment(R.drawable.image1);

myFragment2 = new MyFragment(R.drawable.image2);

myFragment3 = new MyFragment(R.drawable.image3); list.add(myFragment1); list.add(myFragment2); list.add(myFragment3);

MyPagerAdapter myPagerAdapter=new MyPagerAdapter(getSupportFragmentManager(),list);

viewpager.setAdapter(myPagerAdapter);

indicator.setViewPager(viewpager);

MyFragment是我自定义的Fragment，它里面包含一个ImageView，MyPagerAdapter是我自定义的Adapter。

程序运行界面：

我们发现可以轮播，但是不能循环，我们想要循环怎么办，别担心，下一节我们来实现循环轮播。

CircleIndicator还有下面一些属性，属性命名很规则，一看名字就知道属性是干什么的：

• app:ci_width：

• app:ci_height

• app:ci_margin

• app:ci_drawable

• app:ci_drawable_unselected

• app:ci_animator

• app:ci_animator_reverse

• app:ci_orientation (default:horizontal)

• app:ci_gravity (default:center)

4. 高级使用

该库的LoopingViewPager目录下面为我们提供了循环的ViewPager，我们需要将其中的LoopPagerAdapterWrapper，LoopViewPager这两个类复制到我们的项目中来就。然后要将android.support.v4.view.ViewPager改为com.lavor.circleindicatordemo.LoopViewPager。

• 当我们的Adapter是继承自FragmentPagerAdapter 时，无法使用该循环的ViewPager（即LoopViewPager）

• 当我们的Adapter是SamplePagerAdapter时，SamplePagerAdapter是该库实例中的一个Adapter时，可以循环轮播，但是明显从最后一个滑动到第一个时，第一页显示了两次，貌似利用该库中的LoopViewPager还无法解决这个问题。

我们要实现循环轮播的最佳解决方案：

• 利用另一个库LoopViewPager下面的LoopViewPager

• 修改CircleIndicator下面CircleIndicator的源代码，将setViewPager(ViewPager viewPager)方法中的ViewPager改为上面所提库中的LoopViewPager，并将与之关联的ViewPager都改为上面所提库中的LoopViewPager，其他关联代码对应改过来。

程序运行后的界面：

程序源代码下载，我的github仓库：https://github.com/lavor-zl/UILibs

欢迎关注我的微信公众号：Android技术漫谈

欢迎关注我的简述专题：Android技术漫谈