自定义控件之首页轮播控件

轮播条控件是最常用的一种控件，以前在都是在github上找来直接用的，今天我来自定义一个自己的轮播控件。

完成图片滑动

我将轮播控件分为几个模块，首先完成图片的轮转

  • 继承ViewPager
  • 建立init()方法进行初始化，并设置适配器，代码如下
public class AutoScrollViewPager extends ViewPager{
    private List<String> imgUrl;//图片地址
    private ImageLoadCache imageLoadCache;

    public void setImgUrl(List<String> imgUrl) {
        this.imgUrl = imgUrl;
    }

    public AutoScrollViewPager(Context context) {
        super(context);
    }

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

    public void init(){
        imageLoadCache = new ImageLoadCache(getContext());
        this.setAdapter(new MyPagerAdapter());
    }

    /**
     * ViewPager的适配器
     */
    class MyPagerAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            return imgUrl.size();
        }

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = new ImageView(getContext());
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);//设置图片显示样式
            //设置布局参数
            ViewPager.LayoutParams params = new LayoutParams();
            params.width = ViewPager.LayoutParams.MATCH_PARENT;
            params.height = ViewPager.LayoutParams.MATCH_PARENT;
            //加载图片
            imageLoadCache.displayImage(imageView,imgUrl.get(position));
            //将imageView加入到容器中
            container.addView(imageView,params);
            return imageView;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            //将ImageView从容器中移除
            container.removeView((View) object);
        }
    }
1.gif

添加指示器

因为指示器的个数是随图片的数量增加而增加的，因此指示器是动态生成的

修改布局

总布局如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp">

    <com.dmzj.akitajyx.circleprogressbar.AutoScrollViewPager
        android:id="@+id/au"
        android:layout_width="match_parent"
        android:layout_height="180dp">
    </com.dmzj.akitajyx.circleprogressbar.AutoScrollViewPager>

    <LinearLayout
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="#eee58f">
        <!--标题-->
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="我是标题"
            android:textSize="15sp"/>
        <!--指示器的父容器-->
        <LinearLayout
            android:id="@+id/lll_dot"
            android:layout_gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

修改init()方法

public void init(int pageNum,LinearLayout layout){
        pageCount = pageNum;//得到总页数

        for (int i = 0; i < pageCount; i++) {
            ImageView imageView = new ImageView(getContext());
            imageView.setBackgroundResource(R.drawable.dot_selector);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);
            params.rightMargin = 6;//设置指示器之间的距离
            imageViews.add(imageView);
            layout.addView(imageView,params);
        }
        imageViews.get(0).setSelected(true);//默认第一个选中

        imageLoadCache = new ImageLoadCache(getContext());
        this.setAdapter(new MyPagerAdapter());
    }

在MainActivity中这样调用

 autoScrollViewPager = (AutoScrollViewPager) findViewById(R.id.au);
 layout = (LinearLayout) findViewById(R.id.lll_dot);
 autoScrollViewPager.setImgUrl(img);
 autoScrollViewPager.init(img.size(),layout);

效果如下

1.jpg

指示器随图片滑动而滑动

要想达成这个效果，我们必须重写ViewPage的OnPageChangeListener的方法

    /**
     * 页面切换监听器
     */
    class MyPageChangeListener implements OnPageChangeListener{

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            //修改上一个的状态
            imageViews.get(currentPage).setSelected(false);
            //更新新的未位置
            currentPage = position;
            //修改当前位置指示器的状态
            imageViews.get(currentPage).setSelected(true);

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

然后在init()中加入

this.setOnPageChangeListener(new MyPageChangeListener());

效果如下

2.gif

添加标题

首先加入如下代码

    private List<String> titles;
    private TextView textView;
    public void setTitles(List<String> titles,TextView textView) {
        this.titles = titles;
        this.textView = textView;
        textView.setText(titles.get(0));//默认设置第一个标题
    }

在往自定义的OnPageChangeListener中修改为

        @Override
        public void onPageSelected(int position) {
            //修改上一个的状态
            imageViews.get(currentPage).setSelected(false);
            //更新新的未位置
            currentPage = position;
            //修改当前位置指示器的状态
            imageViews.get(currentPage).setSelected(true);

            if (titles!=null && textView!=null){
                textView.setText(titles.get(position));
            }

        }

最后在MainActivity中

        autoScrollViewPager = (AutoScrollViewPager) findViewById(R.id.au);
        textView = (TextView) findViewById(R.id.tv_title);
        layout = (LinearLayout) findViewById(R.id.lll_dot);
        autoScrollViewPager.setImgUrl(img);
        autoScrollViewPager.setTitles(strings,textView);
        autoScrollViewPager.init(img.size(),layout);

效果如下

3.gif

添加无限滚动

为了使控件的扩展性变得更强，我增加无限轮播的功能，可让使用者自定义

    private boolean isLooping = false;//是否启用自动轮播,默认为false

    public void setLooping(boolean looping) {
        isLooping = looping;
    }

修改ViewPage的适配器，在取加载图片的地方对位置做取余操作，让下标不越界

imageLoadCache.displayImage(imageView,imgUrl.get(position%pageCount));

修改OnPageChangeListener

//修改上一个的状态
imageViews.get(currentPage%pageCount).setSelected(false);
//更新新的未位置
currentPage = position;
//修改当前位置指示器的状态
imageViews.get(currentPage%pageCount).setSelected(true);

if (titles!=null && textView!=null){
      textView.setText(titles.get(position%pageCount));
}

效果如下

4.gif

添加点击事件

在一般的轮播图的功能中，大多数是点击进入详情页，因此在这，我给控件增加点击事件

首先增加

    private OnItemClickListener itemClickListener;

    public interface OnItemClickListener{
        void itemClickListener(int postion);
    }

    public void setItemClickListener(OnItemClickListener itemClickListener) {
        this.itemClickListener = itemClickListener;
    }

再是重写OnTouchListener

    /**
     * 页面触摸监听器
     */
    class MyOnTouchListener implements OnTouchListener{

        int downx;
        long downTime;
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()){
                case MotionEvent.ACTION_DOWN:
                    downx = (int) getX();
                    downTime = System.currentTimeMillis();
                    break;
                case MotionEvent.ACTION_MOVE:
                    break;
                case MotionEvent.ACTION_UP:
                    int upx = (int) getX();
                    if (downx==upx && System.currentTimeMillis() - downTime<300){
                        if (itemClickListener!=null){
                            itemClickListener.itemClickListener(currentPage%pageCount);
                        }
                    }
                    break;
                case MotionEvent.ACTION_CANCEL:
                    break;
            }
            return true;
        }
    }

在MyPagerAdapter中设置

imageView.setOnTouchListener(new MyOnTouchListener());

在MainActivity中调用

        autoScrollViewPager.setItemClickListener(new AutoScrollViewPager.OnItemClickListener() {
            @Override
            public void itemClickListener(int postion) {
                Toast.makeText(getBaseContext(),"第"+postion,Toast.LENGTH_SHORT).show();
            }
        });

效果如下

4.gif

增加自动轮播

最后我们增加自动轮播功能使控件更强大

    private boolean isAutoScroll = false;//默认不开启自动轮播
    private Handler mHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            if (msg.what==1){
                int index = getCurrentItem();
                index++;
                setCurrentItem(index);
                //通过重复发送消息达到无限轮播
                Message message = Message.obtain();
                message.what = 1;
                mHandler.sendMessageDelayed(message,delayMislls);
            }
        }
    };

    public void setAutoScroll(boolean autoScroll) {
        isAutoScroll = autoScroll;
    }
    //开始轮播
    public void startScroll(){
        Message message = Message.obtain();
        message.what = 1;
        mHandler.sendMessageDelayed(message,delayMislls);

    }
    //停止轮播，清空消息
    public void stopScroll(){
        mHandler.removeCallbacksAndMessages(null);
    }

而我们的触摸监听器也需修改

/**
     * 页面触摸监听器
     */
    class MyOnTouchListener implements OnTouchListener{

        int downx;
        long downTime;
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()){
                case MotionEvent.ACTION_DOWN:
                    downx = (int) getX();
                    downTime = System.currentTimeMillis();
                    if (isAutoScroll){
                        stopScroll();

                    }
                    break;
                case MotionEvent.ACTION_MOVE:
                    break;
                case MotionEvent.ACTION_UP:
                    int upx = (int) getX();
                    if (downx==upx && System.currentTimeMillis() - downTime<300){
                        if (itemClickListener!=null){
                            itemClickListener.itemClickListener(currentPage%pageCount);
                        }
                    }
                    if (isAutoScroll){
                        startScroll();
                    }
                    break;
                case MotionEvent.ACTION_CANCEL:
                    if (isAutoScroll){
                        startScroll();
                    }
                    break;
            }
            return true;
        }
    }

最后在MainActivity中使用

autoScrollViewPager.setAutoScroll(true);

效果如下

5.gif

完整代码

public class AutoScrollViewPager extends ViewPager{
    private List<String> imgUrl;//图片地址
    private List<ImageView> imageViews = new ArrayList<>();//指示器控件集合
    private List<String> titles;
    private TextView textView;
    private ImageLoadCache imageLoadCache;
    private int pageCount;//总页数
    private int currentPage;//当前页
    private boolean isLooping = false;//是否启用自动轮播,默认为false
    private OnItemClickListener itemClickListener;
    private int delayMislls = 3000;//默认间隔3秒
    private boolean isAutoScroll = false;//默认不开启自动轮播
    private Handler mHandler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            if (msg.what==1){
                int index = getCurrentItem();
                index++;
                setCurrentItem(index);

                Message message = Message.obtain();
                message.what = 1;
                mHandler.sendMessageDelayed(message,delayMislls);
            }
        }
    };

    public void setAutoScroll(boolean autoScroll) {
        isAutoScroll = autoScroll;
    }

    public interface OnItemClickListener{
        void itemClickListener(int postion);
    }

    public void setItemClickListener(OnItemClickListener itemClickListener) {
        this.itemClickListener = itemClickListener;
    }

    public void setLooping(boolean looping) {
        isLooping = looping;
    }

    public void setTitles(List<String> titles, TextView textView) {
        this.titles = titles;
        this.textView = textView;
        textView.setText(titles.get(0));//默认设置第一个标题
    }

    public void setImgUrl(List<String> imgUrl) {
        this.imgUrl = imgUrl;
    }

    public AutoScrollViewPager(Context context) {
        super(context);
    }

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

    public void init(int pageNum,LinearLayout layout){
        pageCount = pageNum;//得到总页数

        for (int i = 0; i < pageCount; i++) {
            ImageView imageView = new ImageView(getContext());
            imageView.setBackgroundResource(R.drawable.dot_selector);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);
            params.rightMargin = 6;//设置指示器之间的距离
            imageViews.add(imageView);
            layout.addView(imageView,params);
        }
        imageViews.get(0).setSelected(true);//默认第一个选中

        imageLoadCache = new ImageLoadCache(getContext());
        this.setAdapter(new MyPagerAdapter());
        this.setOnPageChangeListener(new MyPageChangeListener());
        if (isAutoScroll){
            startScroll();
        }

    }

    public void startScroll(){
        Message message = Message.obtain();
        message.what = 1;
        mHandler.sendMessageDelayed(message,delayMislls);

    }

    public void stopScroll(){
        mHandler.removeCallbacksAndMessages(null);
    }

    /**
     * 页面触摸监听器
     */
    class MyOnTouchListener implements OnTouchListener{

        int downx;
        long downTime;
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()){
                case MotionEvent.ACTION_DOWN:
                    downx = (int) getX();
                    downTime = System.currentTimeMillis();
                    if (isAutoScroll){
                        stopScroll();

                    }
                    break;
                case MotionEvent.ACTION_MOVE:
                    break;
                case MotionEvent.ACTION_UP:
                    int upx = (int) getX();
                    if (downx==upx && System.currentTimeMillis() - downTime<300){
                        if (itemClickListener!=null){
                            itemClickListener.itemClickListener(currentPage%pageCount);
                        }
                    }
                    if (isAutoScroll){
                        startScroll();
                    }
                    break;
                case MotionEvent.ACTION_CANCEL:
                    if (isAutoScroll){
                        startScroll();
                    }
                    break;
            }
            return true;
        }
    }

    /**
     * 页面切换监听器
     */
    class MyPageChangeListener implements OnPageChangeListener{

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            //修改上一个的状态
            imageViews.get(currentPage%pageCount).setSelected(false);
            //更新新的未位置
            currentPage = position;
            //修改当前位置指示器的状态
            imageViews.get(currentPage%pageCount).setSelected(true);

            if (titles!=null && textView!=null){
                textView.setText(titles.get(position%pageCount));
            }

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

    /**
     * ViewPager的适配器
     */
    class MyPagerAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            if (isLooping){
                return Integer.MAX_VALUE;//如果启动无限轮播，则返回int的最大值
            }else {
                return imgUrl.size();
            }
        }

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = new ImageView(getContext());
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);//设置图片显示样式
            //设置布局参数
            ViewPager.LayoutParams params = new LayoutParams();
            params.width = ViewPager.LayoutParams.MATCH_PARENT;
            params.height = ViewPager.LayoutParams.MATCH_PARENT;
            //加载图片
            //对postion做取余操作，让下标不越界
            imageLoadCache.displayImage(imageView,imgUrl.get(position%pageCount));
            //将imageView加入到容器中
            container.addView(imageView,params);
            imageView.setOnTouchListener(new MyOnTouchListener());
            return imageView;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            //将ImageView从容器中移除
            container.removeView((View) object);
        }
    }


}

项目中使用

好了这项自定义轮播条已经完成，在项目中使用下吧

6.gif

结尾

项目已传致Github，看完有收获的小伙伴们点下star吧
Github链接

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,813评论 25赞 708
  • 开始千字文练习（1）
    很多很多年没有写过东西，我发现我已经不会写什么长篇的文章了（论文除外）。措辞不通，脑子也不灵光，这个缺点我要纠正，...
    Welle阅读 383评论 0赞 1
  • 日精进打卡第（4）天
    姓名：巴桂成 公司：宁波大发化纤有限公司 宁波盛和塾《六项精进》235期学员 【日精进打卡第4天】 【知~学习】 ...
    巴桂成_c6dd阅读 269评论 0赞 0
  • 女生节-送2000元的礼物给班上四朵金花
    我从未有过这样的待遇，也没想过要这样的待遇。 听弟弟说，他们班为了给班上四个女生过女生节。全班男生一起送四个机械键...
    女尔阅读 292评论 0赞 0
  • Glide初步使用小结
    前言 图片的加载一直是安卓开发中的一个重要环节，因为相较于文字，图片的数据量非常大。处理不好图片，也就无法提供给用...
    akak18183阅读 846评论 0赞 0