轮播图

renshaodong

于 2016-07-15 16:00:57 发布

阅读量277

点赞数

分类专栏：自定义view

本文链接：https://blog.csdn.net/renshaodong/article/details/51918615

版权

自定义view 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

使用ViewPager实现轮播图

原理就是把viewpager的count设置的很大，然后把当前item也设置到很大，这样前后翻都好像翻不到头。
先来个指示器的类，就是几个点，显示当前选中了第几个，以前都是写一个linearLayout放一堆ImageView来实现，感觉逼格有点低，就自定义个view实现。这也能用在引导图或多个图片下面之类的地方。
效果图
这里写图片描述
代码：

    private Paint paint;
    private int num;//一共几个点
    private int itemWidth;//每个点的大小
    private int index;//当前显示的第几个
    private int colorNormal;//默认颜色
    private int colorSelect;//选中颜色

    public RIndicatorView(Context context) {
        this(context, null);
    }

    public RIndicatorView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RIndicatorView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RIndicatorView, defStyleAttr, 0);
        num = array.getInt(R.styleable.RIndicatorView_number, 3);
        itemWidth = array.getDimensionPixelSize(R.styleable.RIndicatorView_itemWidth, 30);
        colorNormal = array.getColor(R.styleable.RIndicatorView_colorNormal, 0x88ffffff);
        colorSelect = array.getColor(R.styleable.RIndicatorView_colorSelect, 0xffffffff);
        array.recycle();
        init();
    }

    private void init() {
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = (num * 2 - 1) * itemWidth;
        setMeasuredDimension(width, itemWidth);//高度就是单个点的高度，这里设置点间距和点宽度一样。
    }

    //设置点个数
    public void setNum(int num) {
        this.num = num;
        invalidate();
    }

    //设置当前第几个
    public void setIndex(int index) {
        this.index = index;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float x;
        float y = itemWidth / 2;
        for (int i = 0; i < num; i++) {
            x = (i * 2 + 0.5f) * itemWidth;
            if (i == index) {
                paint.setColor(colorSelect);
            } else {
                paint.setColor(colorNormal);
            }
            canvas.drawCircle(x, y, itemWidth / 2, paint);
        }
    }

自定义属性：

<declare-styleable name="RIndicatorView">
        <attr name="number" format="integer" />
        <attr name="itemWidth" format="dimension" />
        <attr name="colorNormal" format="color" />
        <attr name="colorSelect" format="color" />
    </declare-styleable>

用法：

   <com.rsd.view.RIndicatorView
        android:layout_width="wrap_content"
        app:itemWidth="8dp"
        android:layout_height="wrap_content"
        app:colorNormal="@color/white"
        app:colorSelect="@color/red" />

轮播图布局是后面放一个viewpager前面一个指示器
代码：

    private static final int DelayTime = 4000;//隔几秒刷新
    private static final int CHANGE_PIC = 0;
    private Context context;
    private ViewPager viewPager;
    private RIndicatorView indicator;
    private BannerAdapter adapter;
    private int size;
    private List<RBanner> list;//数据列表

    private OnItemClickListener onClickListener;
    private LoopTouchListener loopTouchListener;
    private Handler handler = new Handler() {
        public void handleMessage(Message msg) {
            switch (msg.what) {
                case CHANGE_PIC:
                    viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
                    sendEmptyMessageDelayed(CHANGE_PIC, DelayTime);
                    break;
            }
        }
    };
    private ViewPager.OnPageChangeListener pageChangeListener = new ViewPager.OnPageChangeListener() {

        public void onPageSelected(int arg0) {
            if (size == 0) {
                return;
            }
            indicator.setIndex(arg0 % size);//改变指示器位置
        }

        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        public void onPageScrollStateChanged(int arg0) {

        }
    };
    private View.OnTouchListener touchListener = new View.OnTouchListener() {

        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                case MotionEvent.ACTION_MOVE:
                //滑动的时候不让滑动
                    if (loopTouchListener != null) {
                        loopTouchListener.onTouch();
                    }
                    handler.removeMessages(CHANGE_PIC);
                    break;
                case MotionEvent.ACTION_UP:
                case MotionEvent.ACTION_CANCEL:
                //手抬起后又开始滑动
                    if (loopTouchListener != null) {
                        loopTouchListener.onCancel();
                    }
                    handler.removeMessages(CHANGE_PIC);
                    if (size>1) {
                        handler.sendEmptyMessageDelayed(CHANGE_PIC, DelayTime);
                    }
                    break;
            }
            return false;
        }
    };

    public RBannerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public RBannerView(Context context) {
        this(context, null);
    }

    private void init(Context context) {
        this.context = context;
        LayoutInflater.from(context).inflate(R.layout.view_banner, this);
        viewPager = (ViewPager) findViewById(R.id.banner_viewPager);
        indicator = (RIndicatorView) findViewById(R.id.banner_indicator);
        adapter = new BannerAdapter();
        if (viewPager != null) {
            viewPager.setOnPageChangeListener(pageChangeListener);
            viewPager.setOnTouchListener(touchListener);
            viewPager.setAdapter(adapter);
        }
    }

//设置数据的方法
    public void setData(List<RBanner> list) {
        if (list == null || list.isEmpty()) {
            return;
        }
        this.list = list;
        this.size = list.size();
        initData();
    }

    private void initData() {
        adapter = new BannerAdapter();
        viewPager.setAdapter(adapter);
        indicator.setNum(size);
        viewPager.setCurrentItem(size * 1000); 设置当前要是点数的整数倍，要不默认选中就不是第一个了
        handler.removeMessages(CHANGE_PIC);//移除是为了防止第二次设置数据handler重复接收消息
        if (size <= 1) {
            return;
        }//一张图就不让滚动了
        handler.sendEmptyMessageDelayed(CHANGE_PIC, DelayTime);
    }

    public void setLoopTouchListener(LoopTouchListener loopTouchListener) {
        this.loopTouchListener = loopTouchListener;
    }

    public void setOnItemClickListener(OnItemClickListener clickListener) {
        this.onClickListener = clickListener;
    }

    public interface OnItemClickListener {
        public void onBannerClick(int position);//单张点击事件
    }

    public interface LoopTouchListener {
        public void onTouch();

        public void onCancel();
    }

    private class BannerAdapter extends PagerAdapter {

        private View.OnClickListener clickListener = new View.OnClickListener() {

            public void onClick(View v) {
                if (onClickListener != null) {
                    int position = (Integer) v.getTag();
                    onClickListener.onBannerClick(position);
                }
            }
        };

        public int getCount() {
            if (list == null) {
                return 0;
            }
            return Integer.MAX_VALUE >> 3;
        }

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

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

        public Object instantiateItem(ViewGroup container, int position) {
            position = position % size;
            ImageView imageView = new ImageView(context);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setTag(position);
            imageView.setOnClickListener(clickListener);
            imageView.setImageResource(R.mipmap.ic_launcher);
            container.addView(imageView);
            //ImageLoader.getInstance().displayImage(list.get(position).getUrl(), imageView, App.head);
            return imageView;
        }

        public void finishUpdate(View arg0) {
        }

        ;

        public void restoreState(Parcelable state, ClassLoader loader) {

        }

        public Parcelable saveState() {
            return null;
        }

        public void startUpdate(View arg0) {
        }

        public int getItemPosition(Object object) {
            return POSITION_NONE;
        }

    }