Android 自定義輪播圖

輪播圖地址

概述

1. 寫一個佈局,其中有ViewPager,TextView,LinearLayout.
   • ViewPager:用來承載圖片
   • TextView:用來展示文字描述
   • LinearLayout:用來展示指示器
2. 自定義ConstraintLayout, 在該控件中處理頁面切換邏輯等.

分析

1. 獲取自定義屬性以及設置一些屬性

public BannerY(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initView(context);
    initXmlParams(context, attrs, defStyleAttr);
    fixParams();
    initListener();
    initLists();
    initImageLoader();
}
/**
 * 初始化ImageLoader
 */
private void initImageLoader() {
    ImageLoader.getInstance().init(ImageLoaderConfiguration.createDefault(mContext));
}
/**
 * 將佈局填充進BannerY,獲取VP,TextView,LinearLayout控件
 *
 * @param context
 */
private void initView(Context context) {
    mContext = context;
    LayoutInflater.from(context).inflate(R.layout.layout_banner, this);
    mVp = (ViewPager) findViewById(R.id.vp);
    mTvDesc = (TextView) findViewById(R.id.tv_desc);
    mLLPoint = (LinearLayout) findViewById(R.id.ll_point);
}
/**
 * 獲取自定義屬性
 *
 * @param context
 * @param attrs
 * @param defStyleAttr
 */
private void initXmlParams(Context context, AttributeSet attrs, int defStyleAttr) {
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BannerY, defStyleAttr, 0);
    mPointSize = typedArray.getDimensionPixelSize(R.styleable.BannerY_point_size, 8);
    mPointBG = typedArray.getResourceId(R.styleable.BannerY_point_bg, R.drawable.point_selector);
    mInterval = typedArray.getInteger(R.styleable.BannerY_banner_interval, 2000);
    mTvBottomMargin = typedArray.getDimensionPixelSize(R.styleable.BannerY_desc_bottom_margin, 8);
    mPointBottomMargin = typedArray.getDimensionPixelSize(R.styleable.BannerY_point_bottom_margin, 8);
    mDescColor = typedArray.getColor(R.styleable.BannerY_desc_color, Color.BLACK);
    mDescSize = typedArray.getDimensionPixelSize(R.styleable.BannerY_desc_size, 14);
    mScaleType = typedArray.getInt(R.styleable.BannerY_banner_scaletype, -1);
    typedArray.recycle();
}
/**
 * 通過自定義屬性調整指示器與文字描述位置
 */
private void fixParams() {
    //描述控件
    LayoutParams mTvDescLayoutParams = (LayoutParams) mTvDesc.getLayoutParams();
    mTvDescLayoutParams.bottomMargin = (int) mTvBottomMargin;
    mTvDesc.setLayoutParams(mTvDescLayoutParams);
    mTvDesc.setTextColor(mDescColor);
    mTvDesc.getPaint().setTextSize(mDescSize);
    //指示器
    LayoutParams mLLPointLayoutParams = (LayoutParams) mLLPoint.getLayoutParams();
    mLLPointLayoutParams.bottomMargin = (int) mPointBottomMargin;
    mLLPoint.setLayoutParams(mLLPointLayoutParams);
}
/**
 * 創建數據源集合以及創建Handler對象
 */
@SuppressLint("HandlerLeak")
private void initLists() {
    mImageViewList = new ArrayList<>();
    mDescList = new ArrayList<>();
    mHandler = new Handler(Looper.getMainLooper()) {
        @Override
        public void handleMessage(@NonNull Message msg) {
            super.handleMessage(msg);
            // 獲取ViewPager當前展示圖片的索引值
            int currentItem = mVp.getCurrentItem();
            // 切換到下一個圖片
            mVp.setCurrentItem(currentItem + 1);
            // 間隔一定時間發送一個消息,間隔時長由自定義屬性值控制.
            mHandler.sendEmptyMessageDelayed(1, mInterval);
        }
    };
}
/**
 * 爲ViewPager設置滑動監聽
 */
private void initListener() {
    mVp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }
        @Override
        public void onPageSelected(int position) {
            // ViewPager總共設置有Integer.MAX_VALUE個視圖
            // position取模,轉換爲mImageViewList對應的索引.
            int realPosition = position % mImageViewList.size();
            if (mDescList.size() == mImageViewList.size()) {
                // 文字描述集合與圖片集合長度相等,那麼就爲文字描述TextView展示對應的文字內容.
                String desc = mDescList.get(realPosition);
                mTvDesc.setText(desc);
            } else {
                if (BuildConfig.DEBUG) {
                    Log.d(TAG, "文字集合和圖片集合長度不相等");
                }
            }
            // 上一個頁面對應的指示器設置爲沒有選中
            mLLPoint.getChildAt(prePosition).setEnabled(false);
            // 從裝有指示器的LinearLayout中獲得當前視圖對應的指示器,然後設置指示器當前是選中,從而改變指示器顏色.
            mLLPoint.getChildAt(realPosition).setEnabled(true);
            prePosition = realPosition;
        }
        @Override
        public void onPageScrollStateChanged(int state) {
            if (state == ViewPager.SCROLL_STATE_DRAGGING) {//正在滑動
                // 手動觸碰ViewPager,使之正在處於滑動狀態,Handler就停止發送消息.
                isDragging = true;
                mHandler.removeCallbacksAndMessages(null);
            }
            if (state == ViewPager.SCROLL_STATE_IDLE && isDragging) {//空閒狀態
                // ViewPager手動滑動停止之後,重新開啓Handler發送消息.
                mHandler.removeCallbacksAndMessages(null);
                mHandler.sendEmptyMessageDelayed(1, mInterval);
            }
        }
    });
}

2. 設置圖片源集合

/**
 * 設置圖片源
 * @param imagesRes
 * @param <T>
 */
public <T> void setImagesRes(ArrayList<T> imagesRes) {
    if (judgeLenght(imagesRes)) {
        mImageViewList.clear();
        // 初始化圖片列表
        initImageList(imagesRes);
        // 創建Adapter
        mBannerAdapter = new BannerAdapter(mImageViewList);
        mVp.setAdapter(mBannerAdapter);
        // 設置ViewPager當前視圖爲中間位置, 因爲ViewPager視圖個數爲Integer.MAX_VALUE(在ViewPagerAdapter中設置的).
        int position = Integer.MAX_VALUE / 2 - Integer.MAX_VALUE / 2 % mImageViewList.size();
        // 設置當前ViewPager展示哪個視圖
        mVp.setCurrentItem(position);
        // 開啓消息循環
        mHandler.sendEmptyMessageDelayed(1, mInterval);
        if (mDescList.size() == mImageViewList.size()) {
            // 設置文字描述展示
            mTvDesc.setText(mDescList.get(prePosition));
        }
    }
}

/**
 * 初始化圖片列表
 */
private void initImageList(ArrayList imagesRes) {
    Class<?> imageResClass = imagesRes.get(0).getClass();
    for (int i = 0; i < imagesRes.size(); i++) {
        // 創建ImageView
        ImageView imageView = createImageView(imagesRes, i, imageResClass);
        // 爲ImageView設置點擊事件
        setImageViewListener(imageView);
        // 將ImageView添加進集合中
        mImageViewList.add(imageView);
        //添加指示器
        addPoint(i);
    }
}
/**
 * 根據參數創建ImageView對象
 *
 * @param imagesRes
 * @param i
 * @param imageResClass
 * @return
 */
private ImageView createImageView(ArrayList imagesRes, int i, Class<?> imageResClass) {
    ImageView imageView = new ImageView(mContext);
    ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
    imageView.setLayoutParams(layoutParams);
    ImageView.ScaleType scaleType = sScaleTypeArray[mScaleType];
    imageView.setScaleType(scaleType);
    if (imageResClass.equals(String.class)) {
        // 假如圖片數據源集合是url,網址圖片
        String url = (String) imagesRes.get(i);
        // 使用ImageLoader將圖片展示到ImageView中
        ImageLoader.getInstance().displayImage(url, imageView);
    } else if (imageResClass.equals(Integer.class)) {
        // 假如圖片數據源集合是圖片資源ID
        Integer resId = (Integer) imagesRes.get(i);
        imageView.setImageResource(resId);
    }
    return imageView;
}

/**
 * 爲ImageView對象設置點擊事件和觸摸事件
 *
 * @param imageView
 */
@SuppressLint("ClickableViewAccessibility")
private void setImageViewListener(ImageView imageView) {
    imageView.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    // 當手指在ImageView下按下,那麼停止handler發送切換圖片的消息
                    mHandler.removeCallbacksAndMessages(null);
                    break;
                case MotionEvent.ACTION_UP:
                    // 當手指擡起,正常發送切換圖片消息.
                    mHandler.removeCallbacksAndMessages(null);
                    mHandler.sendEmptyMessageDelayed(1, mInterval);
                    break;
            }
            return false;
        }
    });
    imageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (mIClickBanner != null) {
                // 當點擊ImageView時,通過getTage()獲取圖片當前對應的視圖索引值.
                // 該值是在ViewPagerAdapter中的instantiateItem()中設置的.
                int positon = (int) v.getTag();
                int i = positon % mImageViewList.size();
                mIClickBanner.click(i);
            } else {
                if (BuildConfig.DEBUG) {
                    Log.e(TAG, "圖片回調方法爲不存在");
                }
            }
        }
    });
}

3. BannerY的Adapter

public class BannerAdapter<T> extends PagerAdapter {
    private final static String TAG = BannerAdapter.class.getName();
    ArrayList<ImageView> mImageViewList;
    /**
     * @param mImageViewList ImageView 控件列表,該列表中中的IamgeView都設置了圖片資源還有點擊事件等.
     */
    public BannerAdapter(ArrayList<ImageView> mImageViewList) {
        this.mImageViewList = mImageViewList;
    }
    @Override
    public int getCount() {
        // 設置ViewPager的視圖個數,Integer.MAX_VALUE是一個非常大的數字, 不管輪詢多久都很難到盡頭.
        return Integer.MAX_VALUE;
    }
    @SuppressLint("ClickableViewAccessibility")
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, final int position) {
        // position這個數字很大, 取模之後就能夠對應mImageViewList集合中的索引值了.
        final int realPosition = position % mImageViewList.size();
        ImageView imageView = mImageViewList.get(realPosition);
        // 將索引值與ImageView綁定,當被點擊的時候可以取出該索引值.
        imageView.setTag(position);
        ViewParent viewParent = imageView.getParent();
        if (viewParent != null) {
            // 這裏是防止ViewPager重複添加圖片.
            ((ViewGroup) viewParent).removeView(imageView);
        }
        // 將圖片添加進ViewPager中
        container.addView(imageView);
        return imageView;
    }

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

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        
    }
}