Android自定义控件之大图轮播

大图轮播是在ViewPager的基础上，实现（1）永远自动循环播放，（2）增加红点指示器，（3）标题自动变更，（4）图片相应点击事件。界面展示如下：


自定义空间代码如下：

public class LoopingViewPager extends ViewPager {

    // 图片
    private List<String> setImgurls = new ArrayList<String>();
    private ImageCache imageCache = null;
    public void setImgurls(List<String> imgurls) {
        this.setImgurls = setImgurls;
    }

    // 标题
    private List<String> titles = new ArrayList<String>();
    private TextView titleTextView;

    public void setTitles(List<String> titles, TextView titleTextView) {
        this.titles = titles;
        this.titleTextView = titleTextView;
        this.titleTextView.setText(titles.get(0));
    }

    //暴露提供图片的方法
    private int [] imagesIds;
    public void setimagesIds(int [] imagesIds){
        this.imagesIds = imagesIds;
    }


    private ArrayList<ImageView> dotsList = new ArrayList<ImageView>();
// private int[] imagesId = { R.drawable.recommend_14,
// R.drawable.recommend_15, R.drawable.recommend_16,
// R.drawable.recommend_17, R.drawable.recommend_18 };

    private int preposition = 0;
    private boolean isLooping = false;

    // 暴露方法由外界控制是否需要一直循环下去：
    public void setLooping(boolean isLooping) {
        this.isLooping = isLooping;
    }

    public LoopingViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        imageCache = new ImageCache(context);
    }

    public LoopingViewPager(Context context) {
        super(context);
        imageCache = new ImageCache(context);
    }

    // 实行不停播放的效果，发送消息：
    private Handler handler = new Handler() {
        public void handleMessage(Message msg) {
            if (msg.what == 1) {
                int curr = getCurrentItem();
                curr++;
                setCurrentItem(curr);
                // 接着发消息：
                Message msg1 = handler.obtainMessage();
                msg1.what = 1;
                handler.sendMessageDelayed(msg1, 2000);
            }

        };
    };

    // 停止播放：即停止发送消息
    public void stopLoop() {
        handler.removeCallbacksAndMessages(null);
    }

    // 支持自动播放
    // 暴露给外面调用。
    public void startLoop() {
        Message msg = handler.obtainMessage();
        msg.what = 1;
        handler.sendMessageDelayed(msg, 2000);
    }

    /** * @param imageNumbers * :大图的数目 * @param layoutId * : 圆点的布局 */
    public void init(int imageNumbers, LinearLayout dotsLayout) {
        // 初始化圆点
        for (int i = 0; i < imageNumbers; i++) {
            // 初始化单一个的圆点
            ImageView dotImageView = new ImageView(getContext());
            dotImageView.setBackgroundResource(R.drawable.dot_selector);

            // 设置单一圆点的大小：由于imageview是要放在LinearLayout上，所以采用LinearLayout的布局参数
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);

            // 设置圆点与圆点之间的距离：
            params.rightMargin = 8;

            // 将设置好的图片和参数放置到布局中：
            dotsLayout.addView(dotImageView, params);

            // 将圆点控件装载到集合中：
            dotsList.add(dotImageView);

        }
        // 将第一个圆点设置为红点，其余为白点：
        dotsList.get(0).setSelected(true);

        // 为loopingviewpager设置适配器，装载大图片：
        PagerAdapter adapter = new LoopingPagerAdapter();
        this.setAdapter(adapter);

        // 为viewpager设置页面改变监听：
        OnPageChangeListener changelistener = new MyOnPageChangeListener();
        this.setOnPageChangeListener(changelistener);

        // 为viewpager设置页面触摸事件的监听：
        OnTouchListener touchlistener = new MyOnTouchListener();
        this.setOnTouchListener(touchlistener);
    }

    // 触摸事件：判断为点解的话，有点击时间，判断为触摸的话，停止自动轮播
    private class MyOnTouchListener implements OnTouchListener {

        private int beginX;
        private long begingTime;

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 当按下的时候。停止轮播
                stopLoop();

                beginX = (int) getX();
                begingTime = System.currentTimeMillis();

                break;
            case MotionEvent.ACTION_MOVE:
                stopLoop();
                break;
            case MotionEvent.ACTION_UP:
                // 开始轮播：
                startLoop();

                int endX = (int) getX();
                long endTime = System.currentTimeMillis();
                // 判断为点击事件：
                if (endX == beginX && (endTime - begingTime) < 300) {
                    // 被判定为点击事件，自定义接扣实行监听
                    if (listener != null) {

                        listener.onViewPagerClick();
                    }
                }
                break;
            case MotionEvent.ACTION_CANCEL:
                startLoop();
                break;
            default:
                break;
            }
            return true;
        }

    }

    // 自定义监听接口：
    private onViewPagerClickListener listener;

    public void setonViewPagerClickListener(onViewPagerClickListener listener) {
        this.listener = listener;
    }

    public interface onViewPagerClickListener {

        public void onViewPagerClick();
    }

    // 监听事件：
    private class MyOnPageChangeListener implements OnPageChangeListener {

        @Override
        public void onPageScrollStateChanged(int arg0) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onPageSelected(int position) {
            // 当页面被选中的时候，标题栏改变，圆点的状态改变：
            dotsList.get(preposition % dotsList.size()).setSelected(false);
            preposition = position;
            dotsList.get(position % dotsList.size()).setSelected(true);

            // 设置标题：
            if (titles != null && titleTextView != null) {
                titleTextView.setText(titles.get(position % dotsList.size()));
            }

        }

    }

    // 适配器：
    private class LoopingPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            if (isLooping) {
                return Integer.MAX_VALUE;
            } else {
                return dotsList.size();
            }

        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            // 初始化单一的布局：都是衣服图片：

            position = position % dotsList.size();
            Log.i("hxy", "position" + position);

            ImageView bigImageView = new ImageView(getContext());

            // 设置图片的的宽和高：
            ViewPager.LayoutParams params = new ViewPager.LayoutParams();
            params.height = ViewPager.LayoutParams.MATCH_PARENT;
            params.width = ViewPager.LayoutParams.MATCH_PARENT;

            // 图片来源：1.网络，2.本地，3.内存。在此省略从本地取数据
            // 在此假定数据是从内存中获取的
            if(imagesIds!=null){
                bigImageView.setBackgroundResource(imagesIds[position]);
                Log.i("hxy","imagesIds!=null");
                //imageCache.display(setImgurls.get(position), bigImageView);
            }
            Log.i("hxy", "位置是：" + position);
            container.addView(bigImageView, params);
            return bigImageView;
        }

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

activity中的代码，实现图片中的效果：

public class MainActivity extends Activity {

    private LoopingViewPager mLoopingViewPager;

    private int[] imagesId = { R.drawable.recommend_14,
            R.drawable.recommend_15, R.drawable.recommend_16,
            R.drawable.recommend_17, R.drawable.recommend_18 };

    private List<String> titles = new ArrayList<String>();

    private TextView titleTextView;


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

        titleTextView = (TextView) findViewById(R.id.tv_title);
        mLoopingViewPager = (LoopingViewPager) findViewById(R.id.lvp_image);
        LinearLayout dotsLayout = (LinearLayout) findViewById(R.id.ll_dots);
        mLoopingViewPager.setLooping(true);

        mLoopingViewPager.init(5, dotsLayout);
        mLoopingViewPager.startLoop();

        for( int i =0;i<imagesId.length;i++){
            titles.add("标题"+i);
        }

        mLoopingViewPager.setTitles(titles, titleTextView);
        mLoopingViewPager.setimagesIds(imagesId);
        onViewPagerClickListener listener = new MyonViewPagerClickListener();
        mLoopingViewPager.setonViewPagerClickListener(listener);

    }

    private class MyonViewPagerClickListener implements onViewPagerClickListener{

        @Override
        public void onViewPagerClick() {
            Toast.makeText(getApplication(), "响应大图点击", 0).show();
        }

    }
}