轉(zhuǎn)載清注明出處：http://www.reibang.com/p/a090ee379c65

前言

今天給大家?guī)?lái)一個(gè)新的控件--輪播圖混坞，網(wǎng)上已經(jīng)有很多這類的博客來(lái)講解如何實(shí)現(xiàn)的嘱朽，那么我的這個(gè)有哪些特點(diǎn)呢蔽氨？或是說(shuō)有哪些不同呢早歇？

• 滿足了輪播圖的基本要求娃善，循環(huán)滑動(dòng)山析，在最后一張切到第一張時(shí)可以平穩(wěn)的過(guò)渡

• 簡(jiǎn)潔簡(jiǎn)潔簡(jiǎn)潔
• 擴(kuò)展性強(qiáng)

如何使用

下面我們先展示兩種效果圖

1 默認(rèn)效果

代碼實(shí)現(xiàn)

//布局代碼
<com.landptf.view.BannerM
        android:id="@+id/bm_banner"
        android:layout_width="match_parent"
        android:layout_height="200dp" />

//java代碼
BannerM banner = (BannerM) findViewById(R.id.bm_banner);
if (banner != null) {
    banner.setBannerBeanList(bannerList).show();
}

//初始化數(shù)據(jù)
private void initData() {
    bannerList = new ArrayList<>(4);
    BannerBean banner1 = new BannerBean("測(cè)試圖片1", url1, "");
    BannerBean banner2 = new BannerBean("測(cè)試圖片2", url2, "");
    BannerBean banner3 = new BannerBean("測(cè)試圖片3", url3, "");
    BannerBean banner4 = new BannerBean("測(cè)試圖片4", url4, "");
    bannerList.add(banner1);
    bannerList.add(banner2);
    bannerList.add(banner3);
    bannerList.add(banner4);
}

其實(shí)關(guān)鍵代碼就一行遥椿，這里面用到了BannerBean的實(shí)體類基矮，有三個(gè)參數(shù)，分別是圖片的描述文字冠场，圖片地址家浇，點(diǎn)擊后對(duì)應(yīng)的鏈接

以上全部都是默認(rèn)值，下面來(lái)看一下都哪些可以自定義

2 自定義效果

圖1和圖2主要有以下幾點(diǎn)不同

1 指示器和文字的位置結(jié)構(gòu)碴裙，這里面我只實(shí)現(xiàn)了兩種钢悲，大家也可以下載源碼后擴(kuò)展
2 圓點(diǎn)指示器選中后的顏色
3 自動(dòng)播放的時(shí)間間隔
4 支持圖片未加載出來(lái)之前顯示默認(rèn)圖片

自定義效果的代碼實(shí)現(xiàn)

下面通過(guò)xml和java代碼來(lái)分別演示一下圖2的實(shí)現(xiàn)

1 xml

<com.landptf.view.BannerM
        android:id="@+id/bm_banner"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        landptf:defaultImageDrawable="@drawable/default_image"
        landptf:intervalTime="3"
        landptf:indexPosition="bottom"
        landptf:indexColor="@color/colorPrimary"
        />

BannerM banner = (BannerM) findViewById(R.id.bm_banner);
if (banner != null) {
    banner.setBannerBeanList(bannerList)
            .setOnItemClickListener(new BannerM.OnItemClickListener() {
                @Override
                public void onItemClick(int position) {
                    Log.e("landptf", "position = " + position);
                }
            })
            .show();
}

2 java

<com.landptf.view.BannerM
        android:id="@+id/bm_banner"
        android:layout_width="match_parent"
        android:layout_height="200dp" />

BannerM banner = (BannerM) findViewById(R.id.bm_banner);
if (banner != null) {
    banner.setBannerBeanList(bannerList)
            .setDefaultImageResId(R.drawable.default_image)
            .setIndexPosition(BannerM.INDEX_POSITION_BOTTOM)
            .setIndexColor(getResources().getColor(R.color.colorPrimary))
            .setIntervalTime(3)
            .setOnItemClickListener(new BannerM.OnItemClickListener() {
                @Override
                public void onItemClick(int position) {
                    Log.e("landptf", "position = " + position);
                }
            })
            .show();
}

以上兩種代碼實(shí)現(xiàn)的效果完全等價(jià)，在java代碼中都是通過(guò)鏈?zhǔn)秸{(diào)用舔株，使代碼看起來(lái)更加的簡(jiǎn)潔莺琳。
有木有很方便，大大的減少了代碼量载慈，而且是可以直接拿來(lái)用的惭等。好了下面我們來(lái)看一下實(shí)現(xiàn)的代碼。

實(shí)現(xiàn)

圖片下載集成了Picasso办铡，有對(duì)Picasso不熟悉的童鞋可以看一下我之前的博客圖片加載利器之Picasso（二）基本用法

<?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="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_banner"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ViewStub
        android:id="@+id/vs_index_right"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout="@layout/viewstub_banner_m_index_right" />

    <ViewStub
        android:id="@+id/vs_index_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout="@layout/viewstub_banner_m_index_bottom" />

</RelativeLayout>

ViewStub的引用代碼這里就不給出辞做，大家可以訪問(wèn)我的git查看，文末會(huì)給出地址

package com.landptf.view;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.ColorStateList;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.GradientDrawable;
import android.os.Handler;
import android.os.Message;
import android.os.Parcelable;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewParent;
import android.view.ViewStub;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.landptf.R;
import com.landptf.bean.BannerBean;
import com.landptf.util.ConvertM;
import com.squareup.picasso.MemoryPolicy;
import com.squareup.picasso.Picasso;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

/**
 * Created by landptf on 2017/03/06.
 * 輪播圖控件
 */
public class BannerM extends RelativeLayout {
    /**
     * 圓點(diǎn)指示器的位置料扰，文字在左凭豪，圓點(diǎn)在右
     */
    public static final int INDEX_POSITION_RIGHT = 0x100;
    /**
     * 圓點(diǎn)指示器的位置，文字在上晒杈，圓點(diǎn)在下
     */
    public static final int INDEX_POSITION_BOTTOM = 0x101;

    private static final int HANDLE_UPDATE_INDEX = 0;

    private Context mContext;
    private ViewPager vpBanner;
    private ViewPagerAdapter adapter;
    private OnItemClickListener mOnItemClickListener;

    //裝載ImageView控件的list
    private List<ImageView> ivList;
    //圓點(diǎn)指示器控件
    private List<View> vList;
    //控制圓點(diǎn)View的形狀，未選中的顏色
    private GradientDrawable gradientDrawable;
    //控制圓點(diǎn)View的形狀孔厉，選中的顏色
    private GradientDrawable gradientDrawableSelected;
    //選中圓點(diǎn)的顏色值拯钻，默認(rèn)為#FF3333
    private int indexColorResId;
    //圖片對(duì)應(yīng)的文字描述
    private TextView tvText;
    //自動(dòng)滑動(dòng)的定時(shí)器
    private ScheduledExecutorService scheduledExecutorService;
    //當(dāng)前加載到第幾頁(yè)
    private int currentIndex = 0;
    //默認(rèn)背景圖
    private int defaultImageResId;
    private Drawable defaultImageDrawable = null;
    //自動(dòng)輪播的時(shí)間間隔(s)
    private int intervalTime = 5;
    //輪播圖需要的數(shù)據(jù)列表
    private List<BannerBean> bannerBeanList;
    //圓點(diǎn)指示器的位置，提供兩種布局
    private int indexPosition = INDEX_POSITION_RIGHT;

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

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

    public BannerM(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        mContext = context;
        LayoutInflater.from(context).inflate(R.layout.view_banner_m, this, true);
        vpBanner = (ViewPager) findViewById(R.id.vp_banner);
        TypedArray a = getContext().obtainStyledAttributes(
                attrs, R.styleable.bannerM, defStyle, 0);
        if (a != null) {
            defaultImageDrawable = a.getDrawable(R.styleable.bannerM_defaultImageDrawable);
            intervalTime = a.getInteger(R.styleable.bannerM_intervalTime, 5);
            indexPosition = a.getInteger(R.styleable.bannerM_indexPosition, INDEX_POSITION_RIGHT);
            ColorStateList indexColorList = a.getColorStateList(R.styleable.bannerM_indexColor);
            if (indexColorList != null) {
                indexColorResId = indexColorList.getColorForState(getDrawableState(), 0);
            }
            a.recycle();
        }
    }

    /**
     * 設(shè)置圖片加載之前默認(rèn)顯示的圖片
     *
     * @param defaultImageResId
     * @return BannerM
     */
    public BannerM setDefaultImageResId(int defaultImageResId) {
        this.defaultImageResId = defaultImageResId;
        return this;
    }

    /**
     * 設(shè)置圖片加載之前默認(rèn)顯示的圖片
     *
     * @param defaultImageDrawable
     * @return BannerM
     */
    public BannerM setDefaultImageDrawable(Drawable defaultImageDrawable) {
        this.defaultImageDrawable = defaultImageDrawable;
        return this;
    }

    /**
     * 設(shè)置輪播的時(shí)間間隔撰豺，單位為s粪般，默認(rèn)為5s
     *
     * @param intervalTime
     * @return BannerM
     */
    public BannerM setIntervalTime(int intervalTime) {
        this.intervalTime = intervalTime;
        return this;
    }

    /**
     * 設(shè)置圓點(diǎn)指示器的位置
     * #BannerM.INDEX_POSITION_RIGHT or #BannerM.INDEX_POSITION_BOTTOM
     *
     * @param indexPosition
     * @return BannerM
     */
    public BannerM setIndexPosition(int indexPosition) {
        this.indexPosition = indexPosition;
        return this;
    }

    /**
     * 選中圓點(diǎn)的顏色值，默認(rèn)為#FF3333
     *
     * @param indexColor
     * @return BannerM
     */
    public BannerM setIndexColor(int indexColor) {
        this.indexColorResId = indexColor;
        return this;
    }

    /**
     * 設(shè)置輪播圖需要的數(shù)據(jù)列表
     *
     * @param bannerBeanList
     * @return BannerM
     */
    public BannerM setBannerBeanList(List<BannerBean> bannerBeanList) {
        this.bannerBeanList = bannerBeanList;
        return this;
    }

    /**
     * 設(shè)置圖片的點(diǎn)擊事件
     * @param listener
     */
    public BannerM setOnItemClickListener(@Nullable OnItemClickListener listener) {
        mOnItemClickListener = listener;
        return this;
    }

    public void show() {
        if (bannerBeanList == null || bannerBeanList.size() == 0) {
            throw new IllegalArgumentException("bannerBeanList == null");
        }
        initImageViewList();
        initIndexList();
        vpBanner.addOnPageChangeListener(new OnPageChangeListener());
        adapter = new ViewPagerAdapter();
        vpBanner.setAdapter(adapter);
        //定時(shí)器開(kāi)始工作
        startPlay();
    }

    /**
     * 初始化圓點(diǎn)指示器污桦，根據(jù)indexPosition來(lái)加載不同的布局
     */
    private void initIndexList() {
        int count = bannerBeanList.size();
        vList = new ArrayList<>(count);
        LinearLayout llIndex;
        if (indexPosition == INDEX_POSITION_RIGHT) {
            ViewStub vsIndexRight = (ViewStub) findViewById(R.id.vs_index_right);
            vsIndexRight.inflate();
            llIndex = (LinearLayout) findViewById(R.id.ll_index_right);
            tvText = (TextView) findViewById(R.id.tv_text);
        } else {
            ViewStub vsIndexBottom = (ViewStub) findViewById(R.id.vs_index_bottom);
            vsIndexBottom.inflate();
            llIndex = (LinearLayout) findViewById(R.id.ll_index_bottom);
            tvText = (TextView) findViewById(R.id.tv_text);
        }
        //默認(rèn)第一張圖片的文字描述
        tvText.setText(bannerBeanList.get(0).getText());
        //使用GradientDrawable構(gòu)造圓形控件
        gradientDrawable = new GradientDrawable();
        gradientDrawable.setShape(GradientDrawable.OVAL);
        gradientDrawable.setColor(mContext.getResources().getColor(R.color.text));
        gradientDrawableSelected = new GradientDrawable();
        gradientDrawableSelected.setShape(GradientDrawable.OVAL);
        if (indexColorResId != 0) {
            gradientDrawableSelected.setColor(indexColorResId);
        } else {
            gradientDrawableSelected.setColor(mContext.getResources().getColor(R.color.mainColor));
        }

        for (int i = 0; i < count; i++) {
            View view = new View(mContext);
            LinearLayout.LayoutParams lpView = new LinearLayout.LayoutParams(ConvertM.dp2px(mContext, 8), ConvertM.dp2px(mContext, 8));
            lpView.rightMargin = ConvertM.dp2px(mContext, 4);
            view.setLayoutParams(lpView);
            if (0 == i) {
                view.setBackgroundDrawable(gradientDrawableSelected);
            } else {
                view.setBackgroundDrawable(gradientDrawable);
            }
            view.bringToFront();
            vList.add(view);
            llIndex.addView(view);
        }
    }

    /**
     * 初始化ImageView亩歹，使用Picasso下載圖片，只在SdCard中緩存
     */
    private void initImageViewList() {
        int count = bannerBeanList.size();
        ivList = new ArrayList<>(count);
        for (int i = 0; i < count; i++) {
            final ImageView imageView = new ImageView(mContext);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            ivList.add(imageView);
            imageView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    mOnItemClickListener.onItemClick(getPosition(imageView));
                }
            });
            if (defaultImageResId != 0) {
                Picasso.with(mContext)
                        .load(bannerBeanList.get(i).getUrl())
                        .placeholder(defaultImageResId)
                        .memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE)
                        .into(imageView);
            } else if (defaultImageDrawable != null) {
                Picasso.with(mContext)
                        .load(bannerBeanList.get(i).getUrl())
                        .placeholder(defaultImageDrawable)
                        .memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE)
                        .into(imageView);
            } else {
                Picasso.with(mContext)
                        .load(bannerBeanList.get(i).getUrl())
                        .memoryPolicy(MemoryPolicy.NO_CACHE, MemoryPolicy.NO_STORE)
                        .into(imageView);
            }
        }
    }

    private void startPlay() {
        scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();
        scheduledExecutorService.scheduleAtFixedRate(new Runnable() {
            @Override
            public void run() {
                currentIndex++;
                handler.obtainMessage(HANDLE_UPDATE_INDEX).sendToTarget();
            }
        }, intervalTime, intervalTime, TimeUnit.SECONDS);
    }

    /**
     * 獲取點(diǎn)擊圖片的位置
     * @param item
     * @return int
     */
    private int getPosition(ImageView item) {
        for (int i = 0; i < ivList.size(); i++) {
            if (item == ivList.get(i)) {
                return i;
            }
        }
        return -1;
    }

    @SuppressLint("HandlerLeak")
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what) {
                case HANDLE_UPDATE_INDEX:
                    vpBanner.setCurrentItem(currentIndex);
                    break;
                default:
                    break;
            }
        }
    };

    private class OnPageChangeListener implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        @Override
        public void onPageSelected(int position) {
            currentIndex = position;
            for (int i = 0; i < bannerBeanList.size(); i++) {
                if (position % ivList.size() == i) {
                    vList.get(i).setBackgroundDrawable(gradientDrawableSelected);
                } else {
                    vList.get(i).setBackgroundDrawable(gradientDrawable);
                }
                tvText.setText(bannerBeanList.get(position % ivList.size()).getText());
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    }


    private class ViewPagerAdapter extends PagerAdapter {
        @Override
        public void destroyItem(View container, int position, Object object) {
        }

        @Override
        public Object instantiateItem(View container, int position) {
            position %= ivList.size();
            if (position<0){
                position = ivList.size()+position;
            }
            ImageView imageView = ivList.get(position);
            ViewParent vp =imageView.getParent();
            if (vp!=null){
                ViewGroup parent = (ViewGroup)vp;
                parent.removeView(imageView);
            }
            ((ViewPager) container).addView(imageView);
            return imageView;
        }

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

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

        @Override
        public void restoreState(Parcelable arg0, ClassLoader arg1) {

        }

        @Override
        public Parcelable saveState() {
            return null;
        }

        @Override
        public void startUpdate(View arg0) {
        }

        @Override
        public void finishUpdate(View arg0) {
        }
    }

    public interface OnItemClickListener {
        void onItemClick(int position);
    }
}

這篇文章就介紹到這里了，點(diǎn)擊這里查看源碼

下面是測(cè)試用的圖片

測(cè)試圖片1

測(cè)試圖片2

測(cè)試圖片3

測(cè)試圖片4