ViewPager无限轮播与小点点

1. 在Android开发中经常简单会用到 ViewPager无限轮播与小点点，下面就简单介绍一下，其中的小点点可以找美工绘制，Android工程师也可以自己手动简易制作

2. 定义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>

• Android工程师自己手动简易制作小点点

  1. 在res目录下建一个drawable的文件夹，
  2. 在drawable文件夹中建二个xml文件，其类型是shape， 其中一个作为选中时的小点点颜色，另一个作为没有选中时的小点点颜色，下面是xml文件

• 选中时的小点点颜色为红色

<?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>

• 代码

• activity中的代码

package com.example.roolpage;

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 {

    protected static final String TAG = "MainActivity";
    //图片数据
    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) {
            if (msg.what == 0) {
                //获取viewPager当前的位置
                int currentItem = viewPager.getCurrentItem();
                currentItem++;
                //设置viewPager的位置
                viewPager.setCurrentItem(currentItem);
                // 继续轮播
                Log.i(TAG, "bobobo.....");//测试
                //调用发送消息的方法
                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));
        // 设置当前页
        viewPager.setCurrentItem(picUrls.length * 10000);
        // 设置ViewPager的监听
        viewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                //遍历存放图片的数组
                for (int i = 0; i < picUrls.length; 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();

    }

    /**
     * 每隔2秒发送一次消息
     */
    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 = 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();
    }

}

• ViewPager适配器代码

package com.example.roolpage;

import android.content.Context;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.lidroid.xutils.BitmapUtils;

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;
    }

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

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        // ImageView
        ImageView imageView = new ImageView(context);
        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);
                    Log.i("MainActivity", "down....");
                    break;
                case MotionEvent.ACTION_UP:
                    Log.i("MainActivity", "up....");
                    handler.sendEmptyMessageDelayed(0, 2000);
                    break;
                case MotionEvent.ACTION_CANCEL:
                    Log.i("MainActivity", "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) {
        container.removeView((View) object);
    }
}

• 代码中的Log仅为了测试，

• 添加权限

 <uses-permission android:name="android.permission.INTERNET"/>