前言
图片轮播在各类手机App中都很常见，尤其是新闻类App（知乎日报）。在 Android 中，使用 ViewPager + Timer + Handler 可以实现这个功能，本文将介绍具体实现。实际运
行效果如下：
运行效果
xml布局
由于 ViewPager 底部小圆点是覆盖在上面的，所以这里使用帧布局 FrameLayout 比较方便。android:layout_gravity="bottom|center" 使圆点指示器底部居中.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.qishun.viewpagerdemo.MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:background="@color/colorPrimary"
android:layout_height="250dp">
<android.support.v4.view.ViewPager
android:id="@+id/mPager"
android:layout_width="wrap_content"
android:layout_height="250dp"/>
<LinearLayout
android:id="@+id/mIndicator"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_gravity="bottom|center"
android:layout_marginBottom="5dp"
android:gravity="center"
android:orientation="horizontal"/>
</FrameLayout>
</LinearLayout>
xml 预览如下：
预览效果
创建图片实体类
接下来创建图片实体 PagerBean 对象，包含图片 id 和图片来源 url。如果需要，还可以加个链接属性，以便在点击图片之后跳转进入指定页面
/**
* Created by zbj on 2017/1/12.
* 图片地址实体类
*/
public class PagerBean {
//新闻ID
private int index;
//新闻图片的url
private String imageUrl;
public PagerBean(int index, String imageUrl) {
this.imageUrl = imageUrl;
this.index = index;
}
public int getIndex() {
return index;
}
public void setIndex(int index) {
this.index = index;
}
public String getImageUrl() {
return imageUrl;
}
public void setImageUrl(String imageUrl) {
this.imageUrl = imageUrl;
}
}
自定义 PagerAdaper 适配器
新建 MyPagerAdapter 继承自 PagerAdapter
构造方法传递集合对象 List<PagerBean> :
private Activity context;
private List<PagerBean> pagers;
private List<SimpleDraweeView> images = new ArrayList<>();
public MyPagerAdapter(Activity context, List<PagerBean> pagers) {
this.context = context;
if (pagers == null || pagers.size() == 0) {
this.pagers = new ArrayList<>();
} else {
this.pagers = pagers;
}
for (int i = 0; i < pagers.size(); i++) {
SimpleDraweeView simpleDraweeView = new SimpleDraweeView(context);
Uri uri = Uri.parse(pagers.get(i).getImageUrl());
simpleDraweeView.setImageURI(uri);
images.add(simpleDraweeView);
}
}
这里我用到的图片缓存框架是 Facebook 开源的 Fresco，附上使用说明。只需创建一个 application 调用 Fresco.initialize 即可完成初始化。然后使用 SimpleDraweeView 代替你所需要的 ImageView 即可。
接着覆写 PagerAdapter 的四个方法:
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(images.get(position));
return images.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(images.get(position));
}
@Override
public int getCount() {
return pagers.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
/*Log.i(TAG, "isViewFromObject view: " + view + " object: "
+ object + " equal: " + (view == object));*/
return view == object;
}
关于这四个函数的详细说明在这儿.
instantiateItem() 用于创建视图，将我们位于具体 position 的视图添加到集合中;
destroyItem() 则是用于从容器中移除视图;
getCount() 返回集合长度即可;
isViewFromObject() 判断 instantiateItem 返回的 object 是否与当前视图是对应的,返回 view == object 即可.
初始化数据和视图
准备工作都做好了，现在就可以在 MainActivity 中添加数据和初始化了。
首先添加底部小圆点指示器
private ImageView[] dots;// 小圆点数组
dots = new ImageView[pagers.size()];// 设置小圆点
int j = dots.length;
for (int i = 0; i < j; i++) {
ImageView dot = new ImageView(MainActivity.this);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(15, 15);
params.setMargins(8, 0, 8, 0);
dot.setLayoutParams(params);
if (i == 0) {
dot.setBackgroundResource(R.drawable.indicator_select);
} else {
dot.setBackgroundResource(R.drawable.indicator_not_select);
}
dots[i] = dot;
mIndicator.addView(dots[i]);
}
给 ViewPager 设置页面滑动事件. 其中我们只需覆写 onPageSelected() 方法，在滚动完成后更改小圆点样式即可
mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
// 将当前页的小圆点设为选中状态
for (int j = 0; j < dots.length; j++) {
if (j == position) {
dots[j].setBackgroundResource(R.drawable.indicator_select);
} else {
dots[j].setBackgroundResource(R.drawable.indicator_not_select);
}
}
currentIndex = position;// 设置全局变量，currentIndex为选中圆点的Index
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
附上小圆点样式：选中状态 indicator_select.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!--实心填充-->
<solid android:color="#5fcbff"/>
<!-- 边角的圆弧半径 -->
<corners android:radius="2dp"/>
<size
android:width="4dp"
android:height="4dp"/>
</shape>
未选中状态 indicator_not_select.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#dbdbdb"/>
<corners android:radius="2dp"/>
<size
android:width="4dp"
android:height="4dp"/>
</shape>
实现自动循环播放
创建 Handler，在 UI 线程中更新视图
private Handler mHandler = new Handler() {// 定时轮播图片，需要在主线程里面修改UI
@Override
public void handleMessage(Message msg) {
if (msg.what == UPDATE_PAGER) {
if (msg.arg1 != 0) {
mPager.setCurrentItem(msg.arg1);
} else {
// 当从末页调到首页时，不显示翻页动画效果 false
mPager.setCurrentItem(msg.arg1, false);
}
}
}
};
Timer 周期性的向 handler 发送消息以执行更新操作:
// 设置图片自动轮播，5S后执行，周期5S
timer.schedule(new TimerTask() {
@Override
public void run() {
Message message = new Message();
message.what = UPDATE_PAGER;
if (currentIndex == pagers.size() - 1) {
currentIndex = -1;
}
message.arg1 = currentIndex + 1;
mHandler.sendMessage(message);
}
}, 5000, 5000);
总结
MainActivity 完整代码如下:
public class MainActivity extends AppCompatActivity {
private ViewPager mPager;
private LinearLayout mIndicator;
private ImageView[] dots;// 小圆点数组
private int currentIndex = 0;// 设置当前第几个图片被选中
private static final int UPDATE_PAGER = 0;// 更新图片标记
private Timer timer = new Timer();// 为了方便取消定时轮播，将 Timer 设为全局
private Handler mHandler = new Handler() {// 定时轮播图片，需要在主线程里面修改UI
@Override
public void handleMessage(Message msg) {
if (msg.what == UPDATE_PAGER) {
if (msg.arg1 != 0) {
mPager.setCurrentItem(msg.arg1);
} else {
// 当从末页调到首页时，不显示翻页动画效果 false
mPager.setCurrentItem(msg.arg1, false);
}
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mPager = (ViewPager) findViewById(R.id.mPager);
mIndicator = (LinearLayout) findViewById(R.id.mIndicator);
initData();// 初始化图片数据
}
private void initData() {
List<PagerBean> pagers = new ArrayList();
pagers.add(new PagerBean(1, "http://n.sinaimg.cn/news/20170220/h2n6-fyarrcf4825004.jpg"));
pagers.add(new PagerBean(2, "http://n.sinaimg.cn/photo/20170228/hP2S-fyavvth8349463.jpg"));
pagers.add(new PagerBean(3, "http://n.sinaimg.cn/public_column/20170209/QaSU-fyafqxp6369897.jpg"));
pagers.add(new PagerBean(4, "http://n.sinaimg.cn/photo/20170215/DCav-fyamkqa6273519.jpg"));
initPager(pagers);
}
// 设置适配器，添加指示小圆点
private void initPager(final List<PagerBean> pagers) {
MyPagerAdapter adapter = new MyPagerAdapter(this, pagers);
mPager.setAdapter(adapter);
dots = new ImageView[pagers.size()];// 设置小圆点
int j = dots.length;
for (int i = 0; i < j; i++) {
ImageView dot = new ImageView(MainActivity.this);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(15, 15);
params.setMargins(8, 0, 8, 0);
dot.setLayoutParams(params);
if (i == 0) {
dot.setBackgroundResource(R.drawable.indicator_select);
} else {
dot.setBackgroundResource(R.drawable.indicator_not_select);
}
dots[i] = dot;
mIndicator.addView(dots[i]);
}
// 给 viewPager 设置页面滑动事件
mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
// 将当前页的小圆点设为选中状态
for (int j = 0; j < dots.length; j++) {
if (j == position) {
dots[j].setBackgroundResource(R.drawable.indicator_select);
} else {
dots[j].setBackgroundResource(R.drawable.indicator_not_select);
}
}
currentIndex = position;// 设置全局变量，currentIndex为选中圆点的Index
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
// 设置图片自动轮播，5S后执行，周期5S
timer.schedule(new TimerTask() {
@Override
public void run() {
Message message = new Message();
message.what = UPDATE_PAGER;
if (currentIndex == pagers.size() - 1) {
currentIndex = -1;
}
message.arg1 = currentIndex + 1;
mHandler.sendMessage(message);
}
}, 5000, 5000);
}
}
