CustomBanner

compile 'com.github.bumptech.glide:glide:3.7.0'

public class CustomBanner extends FrameLayout implements ViewPager.OnPageChangeListener {
    private final int DELAY_TIME = 5000;//自動輪播時間

    private List<String> mUrls;
    private List<ImageView> mViewpagerViews;

    private
 
 List<ImageView> mDotImageviews;
    private Context context;
    private int size;//圓點的大小
    private int margin;//圓點的間距

    private int count;//viewpager中view的數量
    private ViewPager mViewPager;
    private LinearLayout mDotlayout;//圓點佈局
    private MyPager mPagerAdapter;

    private int currentItem;//當前viewpager索引
 



    private Handler handler = new Handler();


    private BannerClicklistener mBannerClicklistener;


    public CustomBanner(@NonNull Context context) {
        super(context);

        init(context, null);
    }

    public CustomBanner(@NonNull Context context, @Nullable AttributeSet attrs) {
        super
 
(context, attrs);
        init(context, attrs);
    }

    public CustomBanner(@NonNull Context context, @Nullable AttributeSet attrs, @AttrRes int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }


    /**
     * 初始化資料
     *
     * @param context
     * @param attrs
     */
    private void init(Context context, AttributeSet attrs) {
        this.context = context;
        mUrls = new ArrayList<>();
        mViewpagerViews = new ArrayList<>();
        mDotImageviews = new ArrayList<>();
        //拿到自定義的屬性陣列
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Banner);
        //得到數組裡的自定義的size（圓點大小）
        size = typedArray.getDimensionPixelSize(R.styleable.Banner_size, 10);
        //得到數組裡的自定義的margin（圓點間距）
        margin = typedArray.getDimensionPixelSize(R.styleable.Banner_margin, 10);

        typedArray.recycle();//通知jvm的垃圾回收器，當你回收物件的時候，一定要把我回收了


        View view = LayoutInflater.from(context).inflate(R.layout.banner_layout, this, true);
        //        addView(view);
        //        View child = LayoutInflater.from(context).inflate(R.layout.banner_layout,null);
        //        addView(child);
        mViewPager = view.findViewById(R.id.viewpager);
        mDotlayout = view.findViewById(R.id.layout_dot);

        //新增viewpager頁面改變監聽
        mViewPager.addOnPageChangeListener(this);


    }

    /**
     * 繪製自定義view的所有元素
     */
    public void display() {
        //繪製viewpager
        drawViewpager();
        //繪製圓點
        drawDots();
        //設定自動滾動
        setAuto();

    }

    /**
     * 設定自動滾動
     */
    private void setAuto() {
        handler.postDelayed(mTask, DELAY_TIME);
    }

    /**
     * 定時任務
     */
    Runnable mTask = new Runnable() {
        @Override
        public void run() {
            currentItem++;
            if (currentItem >= count) {
                currentItem = 0;
            }
            mViewPager.setCurrentItem(currentItem);
            handler.postDelayed(this, DELAY_TIME);
        }
    };

    /**
     * 傳urls
     *
     * @param urls
     */
    public CustomBanner loadData(List<String> urls) {
        this.mUrls = urls;
        this.count = urls.size();
        return this;
    }

    /**
     * 繪製圓點
     */
    private void drawDots() {

        for (int i = 0; i < count; i++) {

            ImageView iv = new ImageView(context);

            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(size, size);
            params.leftMargin = margin;
            params.rightMargin = margin;
            iv.setLayoutParams(params);

            mDotImageviews.add(iv);

            if (i == 0) {

                iv.setImageResource(R.drawable.dot_selected);
            } else {
                iv.setImageResource(R.drawable.dot_normal);
            }

            mDotlayout.addView(iv);
        }


    }


    private void drawViewpager() {
        for (int i = 0; i < count; i++) {
            ImageView iv = new ImageView(context);
            iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
            mViewpagerViews.add(iv);
        }
        if (mViewpagerViews != null) {
            mPagerAdapter = new MyPager();
            mViewPager.setAdapter(mPagerAdapter);
        }
    }

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

    }

    /**
     * 切換頁面的監聽
     * @param position
     */
    @Override
    public void onPageSelected(int position) {

        for (int i = 0; i < count; i++) {
            if (i == position) {
                mDotImageviews.get(i).setImageResource(R.drawable.dot_selected);
            } else {
                mDotImageviews.get(i).setImageResource(R.drawable.dot_normal);
            }

        }

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }


    class MyPager extends PagerAdapter {

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

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

        @Override
        public Object instantiateItem(ViewGroup container, final int position) {

            ImageView view = mViewpagerViews.get(position);
            container.addView(view);

            view.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View view) {

                    //實現點選邏輯

                    mBannerClicklistener.onClickListener(position);
                }
            });

            System.out.println("urls:"+mUrls.get(position));

            // ImageLoader.getInstance().displayImage(mUrls.get(position), view);
            Glide.with(context)
                    .load(mUrls.get(position))
                    .into(view);
            return view;
        }

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

    /**
     * 處理自動輪播和手動滑動的衝突
     *
     * @param ev
     * @return
     */
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        if (action == MotionEvent.ACTION_DOWN || action == MotionEvent.ACTION_MOVE) {
            stopAuto();
        } else if (action == MotionEvent.ACTION_UP) {
            setAuto();
        }
        return super.dispatchTouchEvent(ev);
    }

    /**
     * 取消自動輪播任務
     */
    private void stopAuto() {
        handler.removeCallbacks(mTask);//取消任務
    }

    /**
     * 供外部呼叫者呼叫的介面類
     */
    public interface BannerClicklistener {
        void onClickListener(int pos);
    }

    /**
     * 供外部呼叫者初始化介面物件
     */
    public void setBannerClicklistener(BannerClicklistener bannerClicklistener) {
        this.mBannerClicklistener = bannerClicklistener;
    }

    //取消輪播任務
    public void cancel(){
        handler.removeCallbacks(mTask);
    }
}

banner_layout

<FrameLayout 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/viewpager"
        android:layout_width="match_parent"
        android:layout_height="185dp"/>

    <LinearLayout
        android:id="@+id/layout_dot"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="bottom"
        android:gravity="center"
        android:paddingBottom="10dp"/>

</FrameLayout>

小圓點shape檔案

dot_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white"></solid>
    <corners android:radius="10dp" />
    <size android:height="10dp" android:width="10dp"/>
</shape>  

dot_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/holo_green_dark"></solid>
    <corners android:radius="10dp" />
    <size android:height="10dp" android:width="10dp"/>
</shape>

在View中呼叫

CustomBanner banner = findViewById(R.id.banner);
        List<String> urls = new ArrayList<>();
        urls.add("https://www.zhaoapi.cn/images/quarter/ad1.png");
        urls.add("https://www.zhaoapi.cn/images/quarter/ad2.png");
        urls.add("https://www.zhaoapi.cn/images/quarter/ad3.png");
        urls.add("https://www.zhaoapi.cn/images/quarter/ad4.png");
        banner.loadData(urls).display();//構建者模式返回物件本身
        banner.setBannerClicklistener(new CustomBanner.BannerClicklistener() {
            @Override
            public void onClickListener(int pos) {
                Toast.makeText(getContext(), ""+pos+"+++++++++++++", Toast.LENGTH_SHORT).show();
            }
        });