需求:图片不停循环播放,当按下时根据用户的操作变化
思路: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>
效果图:
重点代码截图: