在编写应用的过程中经常会使用到viewpager进行自动或者手动的图片轮播,如下图效果所示:
下面通过一个viewpager 的应用实例实现上图效果:
一、创建MainActivity():
public class MainActivity extends Activity implements ViewPager.OnPageChangeListener {
private ViewPager mAdViewPager; //页面顶部推广轮播视图
private ViewPagerAdapter mViewPagerAdapter; //顶部轮播推广图适配器
private ImageView[] mImageView; //装顶部轮播推广图数组
private int[] mImgId; //图片资源ID数组
private ImageView[] mImgTips; //图片页签数组
private ViewGroup mViewGroup;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化viewpager、viewGroup、mImageId、
mAdViewPager = (ViewPager) findViewById(R.id.ad_viewpager);mViewGroup = (ViewGroup) findViewById(R.id.view_group);
mImgId = new int[]{R.drawable.top_picture_one, R.drawable.top_picture_two, R.drawable.top_picture_three, R.drawable.top_picture_four};
initImageViews();// 顶部轮播推广图初始化
initImageTips();// 推广图页签初始化
/*
* 创建MyViewPagerAdapter适配器对象,将mImageView作为参数,且给mAdViewPager设置适配器
* */
mViewPagerAdapter = new ViewPagerAdapter(mImageView);
mAdViewPager.setAdapter(mViewPagerAdapter);
/*
给mAdViewPager设置页面切换监听,根据被选中的图片改变页签
*/
mAdViewPager.setOnPageChangeListener(this);
/*
* 设定timer,顶部推广图2s自动轮播
* */
Timer timer = new Timer();
timer.schedule(new myTask(), 1000, 2000);
}
/* 顶部轮播推广图初始化*/
public void initImageViews() {
mImageView = new ImageView[mImgId.length];
for (int i = 0; i < mImgId.length; i++) {
mImageView[i] = new ImageView(this);
mImageView[i].setBackgroundResource(mImgId[i]);
}
}
/* 推广图页签初始化*/
public void initImageTips() {
mImgTips = new ImageView[mImgId.length];
for (int i = 0; i < mImgTips.length; i++) {
mImgTips[i] = new ImageView(this);
if (i == 0) {
mImgTips[i].setBackgroundResource(R.drawable.circle_checked);
} else {
mImgTips[i].setBackgroundResource(R.drawable.circle_unchecked);
}
// 给viewgroup添加子view,并传入子view宽高左右间距等信息参数包layoutParams
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
layoutParams.leftMargin = 5;
layoutParams.rightMargin = 5;
mViewGroup.addView(mImgTips[i], layoutParams);
}
}
@Override
public void onPageScrolled(int i, float v, int i2) {
}
/* 给mAdViewPager设置页面切换监听,根据被选中的图片改变页签*/
@Override
public void onPageSelected(int i) {
for (int j = 0; j < mImgTips.length; j++) {
if (j == (i % mImgTips.length)) {
mImgTips[j].setBackgroundResource(R.drawable.circle_checked);
} else {
mImgTips[j].setBackgroundResource(R.drawable.circle_unchecked);
}
}
}
@Override
public void onPageScrollStateChanged(int i) {
}
/*
* 计时器每2s执行myTask一次,顶部推广图切换到下一页
* */
public class myTask extends TimerTask {
@Override
public void run() {
runOnUiThread(new Runnable() {
@Override
public void run() {
mAdViewPager.setCurrentItem((mAdViewPager.getCurrentItem() + 1), true);
}
});
}
}
对应MainActivity 的布局activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/ad_viewpager"
android:layout_width="match_parent"
android:layout_height = "200dp"
android:scaleType = "fitCenter"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/ad_viewpager"
android:layout_marginBottom="10dp"
>
<LinearLayout
android:id="@+id/view_group" // viewgroup 是linearLayout 的基类
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal">
</LinearLayout>
</RelativeLayout>
二、创建viewpager 的适配器ViewPagerAdapter :
public class ViewPagerAdapter extends PagerAdapter {
ImageView[] imageViews;
public ViewPagerAdapter(ImageView[] imageViews) {
this.imageViews = imageViews;
}
/*
* 为保证图片能无限次轮播(且可从最后一张切换到第一张)getcount数量需返回integer.MAX_VALUE;
* */
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View view, Object o) {
return view == o;
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager)container).removeView(imageViews[position %imageViews.length]);
}
/**
* 将传入的imageview图片数组载入到viewpager里
*/
@Override
public Object instantiateItem(View container, int position) {
((ViewPager)container).addView(imageViews[position %imageViews.length], 0);
return imageViews[position % imageViews.length];
}
}