Android實現視圖輪播效果
最近接手瞭一個需求,要求實現,叮咚買菜
秒殺位置的輪播
拆解
通過觀察發現其實還是挺簡單,大致分為
1、商品圖片的上下輪播
2、價格佈局漸隱漸現
在android上實現佈局輪播,其實官方已經提供瞭實現
ViewFlipper
AdapterViewFlipper
由於後端傳遞的是一組商品,不確定個數。那麼選取AdapterViewFlipper是最好的選擇
佈局復用,用adpter的方式填充數據
而且不論是ViewFlipper還是AdapterViewFlipper 系統都幫助實現瞭自動輪播的功能,我們隻需要設置它的進入和退出動畫就可以。
但上面的效果有一個和AdapterViewFlipper聯動的效果,在佈局移動到屏幕外面的過程中需要執行一個漸隱漸現的聯動效果。
查看瞭上面兩個佈局,在調用showNext方法時沒有提供改變時的監聽,那沒辦法隻能自己去實現。其實也簡單,繼承AdapterViewFlipper重寫它的showNext方法就行瞭。
MFAdapterViewFlipper
/** * File description. * 自定義AdapterViewFlipper 在它執行下一個動畫時回調給也無妨 * @author lihongjun * @date 9/24/21 */ public class MFAdapterViewFlipper extends AdapterViewFlipper { // view切換時的回調 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(); } } /** * 佈局切換時的回調 */ public interface AdapterViewFlipperChangeListener { /** * 顯示後一個 */ void showNext(); /** * 顯示前一個 */ void showPrevious(); } }
動起來
接下來就是填充數據讓他動起來瞭
為瞭讓外面使用這個佈局簡單點,那自定義一下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個 private static final int MAX_PRODUCT_SIZE = 2; // 輪播佈局 private MFAdapterViewFlipper mAdapterViewFlipper; private HomeCountDownProductSwitchAdapter adapter; // 價格整體佈局 private View mVPrice; private MFPriceViewB leftMFPriceView; private MFPriceViewB rightMFPriceView; // 當前輪播的位置 private int currentPosition = 0; // 輪播的屏數 private int mFlipCount; // 商品集合數據 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); } /** * 設置展示數據 * * @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個 所以一共有多少行 等於2的整除加餘數 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(); } /** * 更改當前價格模塊 */ private void changeCurrentPrice() { int productSize = MFCommonUtils.isEmpty(mProductList) ? 0 : mProductList.size(); // 數據不合法不顯示價格 if (MFCommonUtils.isEmpty(mProductList) || productSize <= 0) { mVPrice.setVisibility(GONE); return; } // 每排展示兩個商品數據 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); } /** * 顯示後一個 */ @Override public void showNext() { currentPosition ++; // 如果已經循環瞭1輪 那從頭開始 if (currentPosition == mFlipCount) { currentPosition = 0; } } /** * 顯示前一個 */ @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; } /** * 更新數據 * * @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個 所以一共有多少行 等於2的整除加餘數 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(); } // 設置數據 // 每排展示兩個商品數據 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; // 左邊和有點兩個佈局控件 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); } /** * 設置數據 * * @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); } } } }
註意點在於
1、進入和退出動畫必須是屬性動畫
2、當前滾動的屏數,根據它可以算出對應的postion
* 顯示後一個 */ @Override public void showNext() { currentPosition ++; // 如果已經循環瞭1輪 那從頭開始 if (currentPosition == mFlipCount) { currentPosition = 0; } }
在執行out動畫時,執行價格佈局的漸隱漸現動畫
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) { } });
執行漸隱漸現動畫時顯示的是上一個價格,在動畫執行完畢後設置當前應該展示的價格
總結
在遇到一些ui效果時,應該首頁去看看系統是否已經提供類似的控件,是否可以通過微改來實現這樣的效果。如果可以的話建議使用系統已有的,既簡單又安全。
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。