1 首先需要绘制小圆点,小圆点最后需要使用ImageView控件进行显示,ImageView控件根据图片的数量自动创建;并且同一张ImageView需要根据场景显示不同的资源;所以创建图片资源文件目录如下;
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <corners android:radius="8dp" /> <solid android:color="#fff" > </solid> </shape>
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <corners android:radius="8dp" /> <solid android:color="#000" > </solid> </shape>
2 图片轮播布局
<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=".MainActivity" > <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="200dp" /> <LinearLayout android:id="@+id/ll_dot" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:layout_alignBottom="@id/vp" > </LinearLayout> </RelativeLayout>
3.1 需要根据图片地址个数,创建对应个数的小圆点
private void initdot() { for (int i = 0; i < urls.length; i++) { ImageView img = new ImageView(this); // 现在空 if (i == 0) { img.setImageResource(R.drawable.dot_focus); } else { img.setImageResource(R.drawable.dot_normal); } LayoutParams params = new LayoutParams(20, 20); /** * */ params.setMargins(5, 0, 5, 5); // 加载到布局容器 ll_dot.addView(img, params); dots.add(img); } }
3.2 因为需要延时显示图片,所以需要使用Handler进行每2秒自动播放图片
Handler handler = new Handler() { public void handleMessage(android.os.Message msg) { switch (msg.what) { case 1: int po = vp.getCurrentItem(); vp.setCurrentItem(++po); // 发送延迟消息 this.sendEmptyMessageDelayed(1, 2000); break; default: break; } }; };
3.3 使用ViewPager进行轮播图片
String[] urls = BbImages.imgs; // 记录小圆点个数的容器 List<ImageView> dots = new ArrayList<ImageView>(); private ViewPager vp; private LinearLayout ll_dot; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); vp = (ViewPager) findViewById(R.id.vp); ll_dot = (LinearLayout) findViewById(R.id.ll_dot); initdot(); vp.setAdapter(new VPAdapter(urls, this, handler)); handler.sendEmptyMessageDelayed(1, 2000); vp.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int postion) { // for (int i = 0; i < dots.size(); i++) { ImageView img = dots.get(i); if (i == postion % dots.size()) { img.setImageResource(R.drawable.dot_focus); } else { img.setImageResource(R.drawable.dot_normal); } } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }); }
4 ViewPager的适配页面类
getCount() 方法的返回值:这个值直接关系到ViewPager的“边界”,因此当我们把它设置为Integer.MAX_VALUE之后,用户基本就看不到这个边界了(估计滑到这里的时候电池已经挂了吧o_O)。当然,通常情况下设置为100倍实际内容个数也是可以的,之前看的某个实现就是这么干的。
•instantiateItem() 方法position的处理:由于我们设置了count为 Integer.MAX_VALUE,因此这个position的取值范围很大很大,但我们实际要显示的内容肯定没这么多(往往只有几项),所以这里肯定会有求模操作。但是,简单的求模会出现问题:考虑用户向左滑的情形,则position可能会出现负值。所以我们需要对负值再处理一次,使其落在正确的区间内。
•instantiateItem() 方法父组件的处理:通常我们会直接addView,但这里如果直接这样写,则会抛出IllegalStateException。假设一共有2个view,则当用户第2次滑动第一view的时候就会触发这个异常,原因是我们试图把一个有父组件的View添加到另一个组件。所以我们可以每次都初始化一个新的布局视图,然后把去改变布局中控件的内容,这样就不用担心view的个数和postion位置冲突问题
package com.example.day17_viewpagerround.adapter; import android.content.Context; import android.os.Handler; import android.support.v4.view.PagerAdapter; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener; import android.view.ViewGroup; import android.widget.ImageView; import com.example.day17_viewpagerround.R; import com.lidroid.xutils.BitmapUtils; public class VPAdapter extends PagerAdapter { String[] urls; Context context; Handler handler; public VPAdapter(String[] urls, Context context, Handler handler) { super(); this.urls = urls; this.context = context; this.handler = handler; } @Override public int getCount() { return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public Object instantiateItem(ViewGroup container, int position) { View v = View.inflate(context, R.layout.view_item, null); ImageView img = (ImageView) v.findViewById(R.id.imageView1); /** * 给img添加触摸监听 */ img.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: handler.removeCallbacksAndMessages(null); break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: handler.sendEmptyMessageDelayed(1, 2000); break; } return true; } }); BitmapUtils utils = new BitmapUtils(context); String uri = urls[position % urls.length]; utils.display(img, uri); /** * 加载到容器 */ container.addView(v); return v; } @Override public void destroyItem(ViewGroup container, int position, Object object) { // TODO Auto-generated method stub container.removeView((View) object); } }