自定義控件之首頁輪播控件

輪播條控件是最常用的一種控件，以前在都是在github上找來直接用的，今天我來自定義一個自己的輪播控件。

完成圖片滑動

我將輪播控件分為幾個模塊，首先完成圖片的輪轉(zhuǎn)

  • 繼承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);//設置圖片顯示樣式
            //設置布局參數(shù)
            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

添加指示器

因為指示器的個數(shù)是隨圖片的數(shù)量增加而增加的，因此指示器是動態(tài)生成的

修改布局

總布局如下

<?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;//得到總頁數(shù)

        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中這樣調(diào)用

 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的方法

    /**
     * 頁面切換監(jiān)聽器
     */
    class MyPageChangeListener implements OnPageChangeListener{

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

        }

        @Override
        public void onPageSelected(int position) {
            //修改上一個的狀態(tài)
            imageViews.get(currentPage).setSelected(false);
            //更新新的未位置
            currentPage = position;
            //修改當前位置指示器的狀態(tài)
            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) {
            //修改上一個的狀態(tài)
            imageViews.get(currentPage).setSelected(false);
            //更新新的未位置
            currentPage = position;
            //修改當前位置指示器的狀態(tài)
            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

//修改上一個的狀態(tài)
imageViews.get(currentPage%pageCount).setSelected(false);
//更新新的未位置
currentPage = position;
//修改當前位置指示器的狀態(tài)
imageViews.get(currentPage%pageCount).setSelected(true);

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

效果如下

4.gif

添加點擊事件

在一般的輪播圖的功能中，大多數(shù)是點擊進入詳情頁，因此在這，我給控件增加點擊事件

首先增加

    private OnItemClickListener itemClickListener;

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

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

再是重寫OnTouchListener

    /**
     * 頁面觸摸監(jiān)聽器
     */
    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中調(diào)用

        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);
                //通過重復發(fā)送消息達到無限輪播
                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);
    }

而我們的觸摸監(jiān)聽器也需修改

/**
     * 頁面觸摸監(jiān)聽器
     */
    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;//總頁數(shù)
    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;//得到總頁數(shù)

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

    /**
     * 頁面觸摸監(jiān)聽器
     */
    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;
        }
    }

    /**
     * 頁面切換監(jiān)聽器
     */
    class MyPageChangeListener implements OnPageChangeListener{

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

        }

        @Override
        public void onPageSelected(int position) {
            //修改上一個的狀態(tài)
            imageViews.get(currentPage%pageCount).setSelected(false);
            //更新新的未位置
            currentPage = position;
            //修改當前位置指示器的狀態(tài)
            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);//設置圖片顯示樣式
            //設置布局參數(shù)
            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);
        }
    }


}

項目中使用

好了這項自定義輪播條已經(jīng)完成，在項目中使用下吧

6.gif

結(jié)尾

項目已傳致Github，看完有收獲的小伙伴們點下star吧
Github鏈接

最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,856評論 25贊 709
  • 很多很多年沒有寫過東西，我發(fā)現(xiàn)我已經(jīng)不會寫什么長篇的文章了（論文除外）。措辭不通，腦子也不靈光，這個缺點我要糾正，...
    Welle閱讀 411評論 0贊 1
  • 姓名：巴桂成 公司：寧波大發(fā)化纖有限公司 寧波盛和塾《六項精進》235期學員 【日精進打卡第4天】 【知~學習】 ...
    巴桂成_c6dd閱讀 323評論 0贊 0
  • 我從未有過這樣的待遇，也沒想過要這樣的待遇。 聽弟弟說，他們班為了給班上四個女生過女生節(jié)。全班男生一起送四個機械鍵...
    女爾閱讀 342評論 0贊 0
  • 前言 圖片的加載一直是安卓開發(fā)中的一個重要環(huán)節(jié)，因為相較于文字，圖片的數(shù)據(jù)量非常大。處理不好圖片，也就無法提供給用...
    akak18183閱讀 926評論 0贊 0

友情鏈接更多精彩內(nèi)容