快捷導(dǎo)航

Android實(shí)現(xiàn)視圖輪播效果

更新時(shí)間：2021年10月10日 14:26:58 作者：lhj_android

這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)視圖輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近接手了一個(gè)需求，要求實(shí)現(xiàn)，叮咚買菜。

秒殺位置的輪播

拆解

通過觀察發(fā)現(xiàn)其實(shí)還是挺簡單，大致分為

1、商品圖片的上下輪播
2、價(jià)格布局漸隱漸現(xiàn)
在android上實(shí)現(xiàn)布局輪播，其實(shí)官方已經(jīng)提供了實(shí)現(xiàn)
ViewFlipper
AdapterViewFlipper

由于后端傳遞的是一組商品，不確定個(gè)數(shù)。那么選取AdapterViewFlipper是最好的選擇

布局復(fù)用，用adpter的方式填充數(shù)據(jù)

而且不論是ViewFlipper還是AdapterViewFlipper 系統(tǒng)都幫助實(shí)現(xiàn)了自動(dòng)輪播的功能，我們只需要設(shè)置它的進(jìn)入和退出動(dòng)畫就可以。
但上面的效果有一個(gè)和AdapterViewFlipper聯(lián)動(dòng)的效果，在布局移動(dòng)到屏幕外面的過程中需要執(zhí)行一個(gè)漸隱漸現(xiàn)的聯(lián)動(dòng)效果。
查看了上面兩個(gè)布局，在調(diào)用showNext方法時(shí)沒有提供改變時(shí)的監(jiān)聽，那沒辦法只能自己去實(shí)現(xiàn)。其實(shí)也簡單，繼承AdapterViewFlipper重寫它的showNext方法就行了。

MFAdapterViewFlipper

/**
 * File description.
 * 自定義AdapterViewFlipper 在它執(zhí)行下一個(gè)動(dòng)畫時(shí)回調(diào)給也無妨
 * @author lihongjun
 * @date 9/24/21
 */
public class MFAdapterViewFlipper extends AdapterViewFlipper {

    // view切換時(shí)的回調(diào)
    private AdapterViewFlipperChangeListener adapterViewFlipperChangeListener;

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

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

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

    public MFAdapterViewFlipper(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    public void setAdapterViewFlipperChangeListener(AdapterViewFlipperChangeListener adapterViewFlipperChangeListener) {
        this.adapterViewFlipperChangeListener = adapterViewFlipperChangeListener;
    }

    @Override
    public void showNext() {
        super.showNext();
        if (adapterViewFlipperChangeListener != null) {
            adapterViewFlipperChangeListener.showNext();
        }
    }

    @Override
    public void showPrevious() {
        super.showPrevious();
        if (adapterViewFlipperChangeListener != null) {
            adapterViewFlipperChangeListener.showPrevious();
        }
    }

    /**
     * 布局切換時(shí)的回調(diào)
     */
    public interface AdapterViewFlipperChangeListener {

        /**
         * 顯示后一個(gè)
         */
        void showNext();

        /**
         * 顯示前一個(gè)
         */
        void showPrevious();
    }
}

動(dòng)起來

接下來就是填充數(shù)據(jù)讓他動(dòng)起來了
為了讓外面使用這個(gè)布局簡單點(diǎn)，那自定義一下view吧

布局

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

    <MFAdapterViewFlipper
        android:id="@+id/home_avf"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:flipInterval="3000"
        android:loopViews="true" />

    <LinearLayout
        android:id="@+id/ll_price"
        android:layout_width="match_parent"
        android:layout_height="78dp"
        android:gravity="bottom"
        android:orientation="horizontal">

        <PriceViewB
            android:id="@+id/layout_left_price"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            app:price_type="2" />

        <PriceViewB
            android:id="@+id/layout_right_price"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            app:price_type="2" />

    </LinearLayout>

</RelativeLayout>

android:flipInterval=“3000”
android:loopViews=“true”
輪播間隔3秒
開啟輪播布局

自定義view

/**
 * File description.
 * 首頁秒殺位 圖片輪播
 *
 * @author lihongjun
 * @date 9/24/21
 */
public class HomeCountDownProductSwitch extends RelativeLayout implements MFAdapterViewFlipper.AdapterViewFlipperChangeListener {

    // 一排固定展示2個(gè)
    private static final int MAX_PRODUCT_SIZE = 2;

    // 輪播布局
    private MFAdapterViewFlipper mAdapterViewFlipper;
    private HomeCountDownProductSwitchAdapter adapter;
    // 價(jià)格整體布局
    private View mVPrice;
    private MFPriceViewB leftMFPriceView;
    private MFPriceViewB rightMFPriceView;

    // 當(dāng)前輪播的位置
    private int currentPosition = 0;
    // 輪播的屏數(shù)
    private int mFlipCount;

    // 商品集合數(shù)據(jù)
    List<TileBean.Product> mProductList;

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

    public HomeCountDownProductSwitch(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.home_count_down_product_switch, this);
        mAdapterViewFlipper = findViewById(R.id.home_avf);
        leftMFPriceView = findViewById(R.id.layout_left_price);
        rightMFPriceView = findViewById(R.id.layout_right_price);
        mVPrice = findViewById(R.id.ll_price);

        mAdapterViewFlipper.setAdapterViewFlipperChangeListener(this);

        adapter = new HomeCountDownProductSwitchAdapter(context);
        mAdapterViewFlipper.setAdapter(adapter);
    }

    /**
     * 設(shè)置展示數(shù)據(jù)
     *
     * @param productList
     */
    public void setProductList(List<TileBean.Product> productList) {
        mAdapterViewFlipper.stopFlipping();
        this.mProductList = productList;
        this.currentPosition = 0;
        int productSize = CommonUtils.isEmpty(productList) ? 0 : productList.size();
        // 每行展示2個(gè) 所以一共有多少行 等于2的整除加余數(shù)
        mFlipCount = (productSize / MAX_PRODUCT_SIZE) + (productSize % MAX_PRODUCT_SIZE);
        changeCurrentPrice();
        adapter.setData(productList);
        postDelayed(new Runnable() {
            @Override
            public void run() {
                startFlipping();
            }
        },1000);
    }

    /**
     * 開始輪播
     */
    private void startFlipping() {
        mAdapterViewFlipper.setInAnimation(getContext(),R.animator.anim_count_down_product_in);
        mAdapterViewFlipper.setOutAnimation(getContext(),R.animator.anim_count_down_product_out);
        Animation priceOutAnimation = AnimationUtils.loadAnimation(getContext(),R.anim.home_anim_price_out);
        priceOutAnimation.setDuration(500);
        mAdapterViewFlipper.getOutAnimation().addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                mVPrice.startAnimation(priceOutAnimation);
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                changeCurrentPrice();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        mAdapterViewFlipper.startFlipping();
    }

    /**
     * 更改當(dāng)前價(jià)格模塊
     */
    private void changeCurrentPrice() {
        int productSize = MFCommonUtils.isEmpty(mProductList) ? 0 : mProductList.size();
        // 數(shù)據(jù)不合法不顯示價(jià)格
        if (MFCommonUtils.isEmpty(mProductList) || productSize <= 0) {
            mVPrice.setVisibility(GONE);
            return;
        }

        // 每排展示兩個(gè)商品數(shù)據(jù)
        int start = currentPosition * MAX_PRODUCT_SIZE;
        int end = start + 1;

        TileBean.Product leftProduct = null;
        TileBean.Product rightProduct = null;
        // 左邊的商品
        if (productSize > start) {
            leftProduct = mProductList.get(start);
        }
        // 右邊的商品
        if (productSize > end) {
            rightProduct = mProductList.get(end);
        }
        leftMFPriceView.initPriceUI(leftProduct != null ? leftProduct.getPriceInfo() : null);
        rightMFPriceView.initPriceUI(rightProduct != null ? rightProduct.getPriceInfo() : null);
    }

    /**
     * 顯示后一個(gè)
     */
    @Override
    public void showNext() {
        currentPosition ++;
        // 如果已經(jīng)循環(huán)了1輪 那從頭開始
        if (currentPosition == mFlipCount) {
            currentPosition = 0;
        }
    }

    /**
     * 顯示前一個(gè)
     */
    @Override
    public void showPrevious() {

    }

    /**
     * 布局適配器
     */
    private static final class HomeCountDownProductSwitchAdapter extends BaseAdapter {

        private Context mContext;
        // 商品列表
        private List<TileBean.Product> productList;

        public HomeCountDownProductSwitchAdapter(Context context) {
            this.mContext = context;
        }

        /**
         * 更新數(shù)據(jù)
         *
         * @param
         */
        public void setData(List<TileBean.Product> productList) {
            this.productList = productList;
            notifyDataSetChanged();
        }

        @Override
        public int getCount() {
            int count = 0;
            if (MFCommonUtils.isEmpty(productList)) {
                return count;
            }
            // 每行展示2個(gè) 所以一共有多少行 等于2的整除加余數(shù)
            count = (productList.size() / MAX_PRODUCT_SIZE) + (productList.size() % MAX_PRODUCT_SIZE);
            return count;
        }

        @Override
        public Object getItem(int position) {
            return productList == null ? null : productList.get(position);
        }

        @Override
        public long getItemId(int position) {
            return 0;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder holder;
            if (convertView == null) {
                convertView = LayoutInflater.from(mContext).inflate(R.layout.home_page_tile_time_down_holder_flipper, null);
                holder = new ViewHolder(convertView);
                convertView.setTag(holder);
            } else {
                holder = (ViewHolder) convertView.getTag();
            }
            // 設(shè)置數(shù)據(jù)
            // 每排展示兩個(gè)商品數(shù)據(jù)
            int start = position * MAX_PRODUCT_SIZE;
            int end = start + 1;
            int productSize = MFCommonUtils.isEmpty(productList) ? 0 : productList.size();
            TileBean.Product leftProduct = null;
            TileBean.Product rightProduct = null;
            // 左邊的商品
            if (productSize > start) {
                leftProduct = productList.get(start);
            }
            // 右邊的商品
            if (productSize > end) {
                rightProduct = productList.get(end);
            }
            holder.bindData(leftProduct, rightProduct, position);
            return convertView;
        }
    }

    // holder
    private static final class ViewHolder {

        private View itemView;

        // 左邊和有點(diǎn)兩個(gè)布局控件
        private ImageView mIvLeft;
        private ImageView mIvRight;

        private int imageRadio;

        public ViewHolder(View itemView) {
            this.itemView = itemView;

            mIvLeft = itemView.findViewById(R.id.iv_left_img);
            mIvRight = itemView.findViewById(R.id.iv_right_img);

            imageRadio = itemView.getResources().getDimensionPixelSize(R.dimen.margin_8);
        }

        /**
         * 設(shè)置數(shù)據(jù)
         *
         * @param leftProduct  左邊的商品
         * @param rightProduct 右邊的商品
         */
        public void bindData(TileBean.Product leftProduct, TileBean.Product rightProduct, int position) {
            // 如果這一排都沒商品則隱藏
            if (leftProduct == null && rightProduct == null) {
                itemView.setVisibility(View.GONE);
                return;
            }
            itemView.setVisibility(View.VISIBLE);
            if (leftProduct != null) {
                GlideHelper.loadRoundAndGifImage(mIvLeft, leftProduct.getImage(), imageRadio, R.drawable.ic_default_50);
            }
            if (rightProduct != null) {
                GlideHelper.loadRoundAndGifImage(mIvRight, rightProduct.getImage(), imageRadio, R.drawable.ic_default_50);
            }

        }
    }

}

注意點(diǎn)在于

1、進(jìn)入和退出動(dòng)畫必須是屬性動(dòng)畫
2、當(dāng)前滾動(dòng)的屏數(shù)，根據(jù)它可以算出對應(yīng)的postion

* 顯示后一個(gè)
*/
@Override
public void showNext() {
    currentPosition ++;
    // 如果已經(jīng)循環(huán)了1輪 那從頭開始
    if (currentPosition == mFlipCount) {
        currentPosition = 0;
    }
}

在執(zhí)行out動(dòng)畫時(shí)，執(zhí)行價(jià)格布局的漸隱漸現(xiàn)動(dòng)畫

mAdapterViewFlipper.getOutAnimation().addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                mVPrice.startAnimation(priceOutAnimation);
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                changeCurrentPrice();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

執(zhí)行漸隱漸現(xiàn)動(dòng)畫時(shí)顯示的是上一個(gè)價(jià)格，在動(dòng)畫執(zhí)行完畢后設(shè)置當(dāng)前應(yīng)該展示的價(jià)格