上一篇内容只是简单的实现了viewpager的页面自动轮播,但有以下两个缺点:
1.还没有小圆点,用户看不出总共有几页,当前在哪一页。
2.固定5秒轮播,比如在第一张图过了4秒后,用户手动滑到第二张图,那么过了一秒后,定时器也会将viewpager进行代码轮播,而滑到第三张,体验不好。
此次将对以上两个问题进行解决。
BannerAdapter类和布局,不需要修改了,只要改MainActivity和他的布局就行了
先看看布局,只是简单了加上了一个LinearLayout用于放置小圆点
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="180dp">
<android.support.v4.view.ViewPager
android:id="@+id/vp_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:id="@+id/ll_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:gravity="center"
android:orientation="horizontal" />
</RelativeLayout>
</RelativeLayout>
package com.chenjian.loopviewpager2;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.Timer;
import java.util.TimerTask;
public class MainActivity extends Activity {
private int[] imgIds = {
R.drawable.banner1,
R.drawable.banner2,
R.drawable.banner3,
};
private ViewPager mViewPager;
private LinearLayout mCircleLinearLayout;
private ImageView[] mCircleImageViews;
private Timer mTimer = new Timer();
private TimerTask mTimerTask;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findView();
setView();
setListener();
startLoop();
}
private void findView() {
mViewPager = (ViewPager) findViewById(R.id.vp_main);
mCircleLinearLayout = (LinearLayout) findViewById(R.id.ll_main);
}
private void setView() {
BannerAdapter bannerAdapter = new BannerAdapter(this, imgIds);
mViewPager.setAdapter(bannerAdapter);
mViewPager.setCurrentItem(1000 * imgIds.length);
// 添加小红点
mCircleLinearLayout.removeAllViews();
mCircleImageViews = new ImageView[imgIds.length];
for (int i = 0; i < imgIds.length; i++) {
View circleView = LayoutInflater.from(this).inflate(R.layout.view_circle_img, null);
mCircleImageViews[i] = (ImageView) circleView.findViewById(R.id.img_view_circle);
if (0 == i) {
mCircleImageViews[i].setImageResource(R.drawable.icon_dot_selected);
} else {
mCircleImageViews[i].setImageResource(R.drawable.icon_dot_normal);
}
mCircleLinearLayout.addView(circleView);
}
}
private void setListener() {
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
/**
* 本监听器只是实现了ViewPager循环时的小红点的跟随变化
*/
int curPosition = position % mCircleImageViews.length;
for (int i = 0; i < mCircleImageViews.length; i++) {
if (i == curPosition) {
mCircleImageViews[i].setImageResource(R.drawable.icon_dot_selected);
} else {
mCircleImageViews[i].setImageResource(R.drawable.icon_dot_normal);
}
}
startLoop();
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private Handler mHandler = new Handler() {
public void handleMessage(android.os.Message msg) {
int i = mViewPager.getCurrentItem();
/**
* 这里没必要做以下操作,
* 因为Adapter的长度为Integer.MAX_VALUE,
* 要跑多少年才能越界?
*/
// i = i % mViewPager.getAdapter().getCount();
mViewPager.setCurrentItem(i + 1);
}
};
/**
* 开启循环
*/
private void startLoop() {
synchronized (MainActivity.class) {
if (mTimerTask != null) {
mTimerTask.cancel();
}
mTimerTask = new TimerTask() {
@Override
public void run() {
mHandler.sendEmptyMessage(0);
}
};
mTimer.schedule(mTimerTask, 5000);
}
}
}
解决第一个问题,添加小圆点,比较简单。第二个问题,我的思路是在程序一进来,和每次页面滑到某一页的时候,都重置一下定时器。
最后看看效果(非动态图)
源码下载点击打开链接