banner图，android图片轮播，Handler+ViewPager

需求：图片不停循环播放，当按下时根据用户的操作变化

思路：ViewPager + handler + 事件处理

步骤：

1、书写viewpager的布局

2、自定义adapter继承PagerAdapter

3、利用handler控制图片展示时间

4、监听viewpager事件并处理

5、动态添加小灰点

6、添加监听事件，控制图片和小红点联动

7、利用布局参数控制小红点移动

需要注意的是：必须等效灰点布局完成后才能计算两个点之间的距离。

代码：

public class MainActivity extends Activity {
@ViewInject(R.id.graypoint)
private LinearLayout ll_graypoint;
@ViewInject(R.id.vp_bg)
private ViewPager vp;
@ViewInject(R.id.redpoint)
private ImageView redpoint;


private static Handler mHandler;


private int[] images;
private int distance;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewUtils.inject(this);


images = new int[] { R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e };


initGrayPoint();// 初始化小灰点


if (mHandler == null) {// 如果防止多次重发消息
mHandler = new Handler() {
public void handleMessage(android.os.Message msg) {
int currentItem = vp.getCurrentItem();
currentItem++;
if (currentItem > images.length - 1) {
currentItem = 0;// 当是最后一张图片时直接跳到第一张
}
vp.setCurrentItem(currentItem);
// 发送延时消息，造成循环
mHandler.sendEmptyMessageDelayed(0, 2000);
}
};
mHandler.sendEmptyMessageDelayed(0, 2000);// 发送延时消息
}


vp.setAdapter(new MyViewPagerAdapter());
vp.addOnPageChangeListener(new OnPageChangeListener() {


@Override
public void onPageSelected(int position) {


}


@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
int leftMargin = (int) (distance * positionOffset + distance * position);
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) redpoint.getLayoutParams();
layoutParams.leftMargin = leftMargin;
redpoint.setLayoutParams(layoutParams);
}


@Override
public void onPageScrollStateChanged(int state) {


}
});
// 监听ViewPager触摸事件
vp.setOnTouchListener(new OnTouchListener() {


@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 按下移除所有消息
mHandler.removeCallbacksAndMessages(null);
break;


case MotionEvent.ACTION_UP:
// 手抬起，重新发送消息
mHandler.sendEmptyMessageDelayed(0, 2000);
break;
}
return false;
}
});


}


// 动态的添加小灰点
private void initGrayPoint() {
for (int i = 0; i < images.length; i++) {
ImageView ivgray = new ImageView(MainActivity.this);
ivgray.setBackgroundResource(R.drawable.shape_point_gray);
ll_graypoint.addView(ivgray);
if (i > 0) {
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) ivgray.getLayoutParams();
layoutParams.leftMargin = 10;
ivgray.setLayoutParams(layoutParams);
}
}
// 当绘制完成后再测量(onLayout)
redpoint.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {


@Override
public void onGlobalLayout() {
redpoint.getViewTreeObserver().removeGlobalOnLayoutListener(this);


distance = ll_graypoint.getChildAt(1).getLeft() - ll_graypoint.getChildAt(0).getLeft();
}
});
}


class MyViewPagerAdapter extends PagerAdapter {


@Override
public int getCount() {
return images.length;
}


@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}


@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}


@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView view = new ImageView(MainActivity.this);
view.setBackgroundResource(images[position]);
container.addView(view);
return view;
}
}


}

布局文件：

<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/vp_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp" >


        <LinearLayout
            android:id="@+id/graypoint"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </LinearLayout>
        <ImageView 
            android:id="@+id/redpoint"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/shape_point_red"/>
    </RelativeLayout>


</RelativeLayout>

效果图：

重点代码截图：