Viewpager实现图片轮播，广告轮播

在应用开发中会经常用到 viewpager，比如广告轮播，图片切换，启动页等等。小生在网上找了很多demo实现结果不一，自己总结了一小下。

1.首先是需要用到 XML代码

 广告轮播主界面需要的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.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent<span style="font-family: Arial, Helvetica, sans-serif;">"</span>
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/viewpager"
        android:background="#33000000"
        android:orientation="vertical"
        android:padding="5dip" >

        <TextView
            android:id="@+id/tv_image_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="第一个引导页面"
            android:textColor="@android:color/white"
            android:textSize="14sp" />

        <LinearLayout
            android:id="@+id/ll_points"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dip"
            android:layout_gravity="center_horizontal"
            android:orientation="horizontal" >
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

2. MainActivitty这里主要代码块

public class ViewPagerActivity extends BaseActivity implements OnPageChangeListener {

private List<ImageView> imageViewList;
private TextView tvDescription;
private LinearLayout llPoints;
private String[] imageDescriptions;
private int previousSelectPosition = 0;
private ViewPager mViewPager;
private boolean isLoop = true;
private Handler handler = new Handler() {

@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);

mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1);
}
};

@Override
public void setView() {
setContentView(R.layout.activity_splash_viewpager);

// 自动切换页面功能
new Thread(new Runnable() {

@Override
public void run() {
while (isLoop) {
SystemClock.sleep(2000);
handler.sendEmptyMessage(0);
}
}
}).start();
}

@Override
public void initView() {
mViewPager = (ViewPager) findViewById(R.id.viewpager);
tvDescription = (TextView) findViewById(R.id.tv_image_description);
llPoints = (LinearLayout) findViewById(R.id.ll_points);

prepareData();

ViewPagerAdapter adapter = new ViewPagerAdapter();
mViewPager.setAdapter(adapter);
mViewPager.setOnPageChangeListener(this);

tvDescription.setText(imageDescriptions[previousSelectPosition]);
llPoints.getChildAt(previousSelectPosition).setEnabled(true);

/**
* 2147483647 / 2 = 1073741820 - 1
*/
int n = Integer.MAX_VALUE / 2 % imageViewList.size();
int itemPosition = Integer.MAX_VALUE / 2 - n;

mViewPager.setCurrentItem(itemPosition);
}

private void prepareData() {
imageViewList = new ArrayList<ImageView>();
int[] imageResIDs = getImageResIDs();
imageDescriptions = getImageDescription();

ImageView iv;
View view;
for (int i = 0; i < imageResIDs.length; i++) {
iv = new ImageView(this);
iv.setBackgroundResource(imageResIDs[i]);
imageViewList.add(iv);

// 添加点view对象
view = new View(this);
view.setBackgroundDrawable(getResources().getDrawable(R.drawable.point_background));
LayoutParams lp = new LayoutParams(5, 5);
lp.leftMargin = 10;
view.setLayoutParams(lp);
view.setEnabled(false);
llPoints.addView(view);
}
}

private int[] getImageResIDs() {
return new int[]{
R.drawable.bg1,
R.drawable.bg2,
R.drawable.bg3,
R.drawable.pic_01,
R.drawable.pic_02
};
}

private String[] getImageDescription() {
return new String[]{
"第一个引导页面",
"第二个引导页面",
"第三个引导页面",
"第四个引导页面",
"第五个引导页面"
};
}

class ViewPagerAdapter extends PagerAdapter {

@Override
public int getCount() {
return Integer.MAX_VALUE;
}

/**
* 判断出去的view是否等于进来的view 如果为true直接复用
*/
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}

/**
* 销毁预加载以外的view对象, 会把需要销毁的对象的索引位置传进来就是position
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(imageViewList.get(position % imageViewList.size()));
}

/**
* 创建一个view
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(imageViewList.get(position % imageViewList.size()));
return imageViewList.get(position % imageViewList.size());
}
}

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

}

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

}

@Override
public void onPageSelected(int position) {
// 改变图片的描述信息
tvDescription.setText(imageDescriptions[position % imageViewList.size()]);
// 切换选中的点
llPoints.getChildAt(previousSelectPosition).setEnabled(false); // 把前一个点置为normal状态
llPoints.getChildAt(position % imageViewList.size()).setEnabled(true); // 把当前选中的position对应的点置为enabled状态
previousSelectPosition = position % imageViewList.size();
}

@Override
public void setListener() {

}

@Override
protected void onDestroy() {
super.onDestroy();
isLoop = false;
}

}

3.drawable： point_enable 和 point_normal是提示的小点 ，可以自己随意搭配

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/point_enable" android:state_enabled="true"></item>
<item android:drawable="@drawable/point_normal" android:state_enabled="false"></item>

</selector>

4.进一步探究：当轮播只有2张或者3张报错 removeview。。。就感觉很麻烦，轮播为什么需要4张以上才行呢？

解决办法：在pageadapter  下的instantiateItem中使用如果代码 和 xml

@Override
public Object instantiateItem(ViewGroup container, int position) {
View channelView = LayoutInflater.from(context).inflate(
R.layout.image, container, false);
ImageView mImageView = (ImageView) channelView
.findViewById(R.id.avatar);
mImageView.setImageResource(imageResIDs[position % views.size()]);
container.addView(channelView);
return channelView;
}

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/avatar"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content" />

</LinearLayout>

整合起来就这么多了，发现真的比较简单！