Android之利用Viewpager实现图片的轮播效果

最近在做项目的时候，要用图片轮播的效果，自己就在研究轮播的实现原理。主要是利用ViewPager，通过Handler来发送Message实现效果的。

首先图片轮播的时候底部小圆点的实现，是自己自定义View来实现，可以控制小圆点的个数，以及选中的颜色。

代码如下：

public class StepPagerStrip extends View{
private int mPageCount = 0;
private int mViewRadius = 4;
private int mCurrentPage = 0;
private Paint mPrevTabPaint;
private Paint mSelectedTabPaint;
private int mCircleSpace;
public StepPagerStrip(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public StepPagerStrip(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
final Resources res = context.getResources();
// TODO Auto-generated constructor stub
mCircleSpace = res.getDimensionPixelSize(R.dimen.stip_view_padding);
//没有选中的颜色
mPrevTabPaint = new Paint();
mPrevTabPaint.setColor(res.getColor(R.color.sliver));

mSelectedTabPaint = new Paint();
mSelectedTabPaint.setColor(res.getColor(R.color.white));

}

@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
if(mPageCount == 0){
return ;
}
float totalWidth = mPageCount * (mCircleSpace + mViewRadius) - mViewRadius;
float totalLeft = (getWidth() - totalWidth)/2;
for(int i =0;i<mPageCount;i++){
canvas.drawCircle(totalLeft + i*(mCircleSpace + mViewRadius), getHeight()/2,
mViewRadius,  (mCurrentPage == i ? mSelectedTabPaint:mPrevTabPaint));
}
}

public void setPageCount(int count) {
mPageCount = count;
invalidate();

// TODO: Set content description appropriately
}

public void setCurrentPage(int currentPage) {
mCurrentPage = currentPage;
invalidate();

// TODO: Set content description appropriately
}

}

利用Viewpager来实现效果的xml布局文件代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.lwqcarouseldemo.MainActivity" >

<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="256dp"
android:id="@+id/viewpager"
/>
<com.example.lwqcarouseldemo.StepPagerStrip
android:layout_width="fill_parent"
android:layout_height="12dp"
android:layout_gravity="center"
android:layout_alignBottom="@id/viewpager"
android:id="@+id/ste_view"
android:gravity="center_horizontal"/>

</RelativeLayout>

重写PagerAdapter类实现：

public class ViewPagerAdapter extends PagerAdapter{
private List<ImageView> mImageViews;
public ViewPagerAdapter(List<ImageView> imageViews) {
// TODO Auto-generated constructor stub
this.mImageViews = imageViews;
}

@Override
public int getCount() {
// TODO Auto-generated method stub
return Integer.MAX_VALUE;
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
container.addView(mImageViews.get(position % mImageViews.size()));
return mImageViews.get(position % mImageViews.size());
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
container.removeView(mImageViews.get(position % mImageViews.size()));
object = null;
}

}

最后利用handler在Activity里面实现轮播效果：

public class MainActivity extends ActionBarActivity {
private ViewPager mViewPager;
private ViewPagerAdapter mViewPagerAdapter;
private List<ImageView> mImageViewList;
private StepPagerStrip mStepPagerStrip;
private int mCurrentItem = Integer.MAX_VALUE / 2;
private int[] pictures = { R.drawable.ic_image_first, R.drawable.ic_image_zero, R.drawable.ic_image_two,
R.drawable.ic_image_third, R.drawable.ic_image_four, R.drawable.ic_image_five };

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mImageViewList = new ArrayList<ImageView>();
for (int i = 0; i < pictures.length; i++) {
ImageView imageView = new ImageView(this);
ViewGroup.LayoutParams viewPagerImageViewParams = new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT);
imageView.setLayoutParams(viewPagerImageViewParams);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setImageResource(pictures[i]);
mImageViewList.add(imageView);
}
findViews();
setListener();
mStepPagerStrip.setPageCount(6);

}

private void findViews() {
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mStepPagerStrip = (StepPagerStrip) findViewById(R.id.ste_view);
}

@SuppressWarnings("deprecation")
private void setListener() {
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
mStepPagerStrip.setCurrentPage(arg0 % 6);
mCurrentItem = arg0 ;

}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub

}

@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub

}
});
}

@Override
protected void onResume() {
// TODO Auto-generated method stub
super.onResume();
mViewPagerAdapter = new ViewPagerAdapter(mImageViewList);
mViewPager.setAdapter(mViewPagerAdapter);
mViewPager.setCurrentItem(mCurrentItem);
mStepPagerStrip.setCurrentPage(mCurrentItem % 6);
mHandler.sendEmptyMessageDelayed(0, 2000);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}

/**
* 接收子线程传递过来的数据
*/
private Handler mHandler = new Handler() {
public void handleMessage(android.os.Message msg) {
switch (msg.what) {
case 0:
mCurrentItem = mCurrentItem + 1;
mViewPager.setCurrentItem(mCurrentItem);
mStepPagerStrip.setCurrentPage(mCurrentItem % 6);
mHandler.sendEmptyMessageDelayed(0, 2000);
break;

default:
mHandler.removeCallbacksAndMessages(null);
break;
}

};
};

protected void onPause() {
super.onPause();
mHandler.sendEmptyMessageDelayed(1, 3000);

}
}

Demo下载地址：图片轮播Demo下载地址