ViewPager的小点点与触摸事件

1. 
   
2. > 这里小编给大家分享一下，ViewPager滑动式的小点点是怎么得到的，通常在公司了这都是由公司的UI设置师给提供的图片，这里为了方便练习操作，简单的介绍一下程序员自己怎么来实现。
   

首先在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="200dp" />
   > 
   >     <LinearLayout
   >         android:id="@+id/ll_dots"
   >         android:layout_width="match_parent"
   >         android:layout_height="wrap_content"
   >         android:gravity="center"
   >         android:layout_alignBottom="@id/viewPager" >
   >     </LinearLayout>
   > 
   > </RelativeLayout>
   >

在res文件下新建一个drawable文件，建两个xml,属性为shape

```
<?xml version="1.0"
> encoding="utf-8"?> <shape
> xmlns:android="http://schemas.android.com/apk/res/android"
>     android:shape="rectangle" > 
>           <-设置点点的颜色 ，红色->
>     <solid android:color="#ff0000" />     
>     <-设置点点的半径->
>     <corners android:radius="8dp" /> </shape>
>      第二个
>       <?xml version="1.0" encoding="utf-8"?> <shape
> xmlns:android="http://schemas.android.com/apk/res/android"
>     android:shape="rectangle" >       
>     <-设置点点的颜色 ，灰色->
>     <solid android:color="#88000000" /> 
>       <-设置点点的半径->
>     <corners android:radius="8dp" />
> 
> </shape>

然后我们在java代码中操作，这里我们演示获取到本地的图片为例子。

>  import java.util.ArrayList;
> import android.app.Activity; import android.content.Context; import
> android.graphics.drawable.Drawable; import android.os.Bundle; import
> android.os.Handler; import android.support.v4.view.ViewPager; import
> android.support.v4.view.ViewPager.OnPageChangeListener; import
> android.util.Log; import android.widget.ImageView; import
> android.widget.LinearLayout; import
> android.widget.LinearLayout.LayoutParams;
> 
> public class MainActivity extends Activity { 
>   //定义一个数组    
> String[] picUrls = new String[] { "http://169.254.238.174:8080/ab.jpg",
>           "http://169.254.238.174:8080/ae.jpg",
>           "http://169.254.238.174:8080/af.jpg",
>           "http://169.254.238.174:8080/ah.jpg",
>           "http://169.254.238.174:8080/bd.jpg" }; 
>   private ViewPager viewPager; 
>   private LinearLayout ll_dots; 
>   private ArrayList<ImageView> dotsList; 
>   //获得到Handler
>   Handler handler = new Handler() { 
>               public void handleMessage(android.os.Message msg) {
>           //获取消息为0    
>       if (msg.what == 0) {
>               //获取到当前的位子
>               int currentItem = viewPager.getCurrentItem();
>               //自增
>               currentItem++;
>               设置自增后的页面
>               viewPager.setCurrentItem(currentItem);
>               // 继续轮播
>               startRool();            
                > }         
                }; 
                    };
> 
>   @Override 
>   protected void onCreate(Bundle savedInstanceState) {
>       super.onCreate(savedInstanceState);
>       setContentView(R.layout.activity_main); 
>       //找到控件  
>   viewPager =(ViewPager) findViewById(R.id.viewPager);    
>   ll_dots = (LinearLayout) findViewById(R.id.ll_dots);    
>   // 初始化小点
>       initDots();
> 
>       // 设置适配器 
>       viewPager.setAdapter(new MyPagerAdapter(this, picUrls, handler)); 
>       // 设置当前页，后面*10000是为了设置无限轮播
>       viewPager.setCurrentItem(picUrls.length * 10000);   
>   //设置ViewPager的监听    
>   viewPager.setOnPageChangeListener(new OnPageChangeListener() {
> 
>           @Override           
    > public void onPageSelected(int position) {
>               //遍历数组
>               for (int i = 0; i < picUrls.length; i++) {
>                   //判断i等于当前的值，注意当前的值求于数组的长度
>                   if (i == position % picUrls.length) {
>                       //设置点点是什么颜色
>                       dotsList.get(i).setImageDrawable(
>                               getResources().getDrawable(
>                                       R.drawable.dots_focuse));
>                   } else {
>                       //设置点点是什么颜色
>                       dotsList.get(i).setImageDrawable(
>                               getResources().getDrawable(
>                                       R.drawable.dots_normal));
>                   }
> 
>               }           }
> 
>           @Override   
>       public void onPageScrolled(int arg0, float arg1, int arg2) {
> 
>           }
> 
>           @Override 
>           public void onPageScrollStateChanged(int arg0) {
> 
>           }       });     
>   // 开始轮播         
> startRool();
> 
>   }
> 
>   private void startRool() {  
>   // 开始轮播
>       handler.sendEmptyMessageDelayed(0, 2000);   }
> 
>   /**      * 初始化小点     */     
> private void initDots() {     
>   //定义集合接收点点的图片
>       dotsList = new ArrayList<ImageView>();      
> //每次加载清空集合，重新加载
>       dotsList.clear();   
>   // 移除小点         
> ll_dots.removeAllViews();     
>   //遍历数组
>       for (int i = 0; i < picUrls.length; i++) {  
>       //实例化ImageView
>           ImageView imageView = new ImageView(this); 
>           Drawable drawable =null;        
>   //判断默认第一个页面的点点是亮的       
>   if (i == 0) {
>               // 亮色图片
>               drawable = getResources().getDrawable(R.drawable.dots_focuse);  
>       } else {
>               drawable = getResources().getDrawable(R.drawable.dots_normal);  
>       }           
> //设置图片            
> imageView.setImageDrawable(drawable);         
>   // 考虑屏幕适配
>           LayoutParams params = new LayoutParams(dip2px(this, 10), dip2px(this, 10));             params.setMargins(dip2px(this, 5), 0, dip2px(this, 5), 0);      
>   ll_dots.addView(imageView, params);         
>   // 将小点的控件添加到集合中
>           dotsList.add(imageView);    
>   }   }
> 
>   /**      * 根据手机的分辨率从 dp 的单位 转成为 px(像素)   */ 
>   public int dip2px(Context context, float dpValue) { 
>       final float scale =context.getResources().getDisplayMetrics().density;  
>   return (int)(dpValue * scale + 0.5f);   
> }
> 
>   @Override   protected void onDestroy() { 
>       // 移除所有的handler信息
>       handler.removeCallbacksAndMessages(null);   
>   super.onDestroy(); 
>   }
> 
> }

下面是适配器里面的操作，注意触摸也在这里操作

public class MyPagerAdapter extends PagerAdapter {

    private String[] urls;
    private Context context;
    private Handler handler;
    //在这里通过构造器获得到要用的值
    public MyPagerAdapter(Context context, String[] urls,Handler handler) {
        this.handler=handler;
        this.context = context;
        this.urls = urls;
    }
    //这里把页数设置为int 的最大值
    @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) {
        // ImageView
        //获得到ImageView对象；
        ImageView imageView = new ImageView(context);
        //这个是工具包xUtils-2.6.14里的方法，来显示网络请求到的图片
        BitmapUtils bitmapUtils = new BitmapUtils(context);
        bitmapUtils.display(imageView, urls[position % urls.length]);
        //图片的触摸事件
        imageView.setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    //按下鼠标的操作
                case MotionEvent.ACTION_DOWN:
                    //移除handler消息
                    handler.removeCallbacksAndMessages(null);

                    break;
                    //松开鼠标的操作
                case MotionEvent.ACTION_UP:

                    handler.sendEmptyMessageDelayed(0, 2000);
                    break;

                case MotionEvent.ACTION_CANCEL:
                    handler.sendEmptyMessageDelayed(0, 2000);

                    break;

                default:
                    break;
                }
                //处理这个事件
                return true;
            }
        });
        //添加视图
        container.addView(imageView);

        return imageView;
    }
@Override
        public void destroyItem(ViewGroup container, int position, Object object) {
        //注意这里要移除object
        container.removeView((View) object);
    }