Android實現(xiàn)視圖輪播效果
更新時間：2021年10月10日 14:26:58 作者：lhj_android
這篇文章主要為大家詳細介紹了Android實現(xiàn)視圖輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最近接手了一個需求，要求實現(xiàn)，叮咚買菜。
秒殺位置的輪播
拆解
通過觀察發(fā)現(xiàn)其實還是挺簡單，大致分為
1、商品圖片的上下輪播
2、價格布局漸隱漸現(xiàn)
在android上實現(xiàn)布局輪播，其實官方已經(jīng)提供了實現(xiàn)
ViewFlipper
AdapterViewFlipper
由于后端傳遞的是一組商品，不確定個數(shù)。那么選取AdapterViewFlipper是最好的選擇
布局復用，用adpter的方式填充數(shù)據(jù)
而且不論是ViewFlipper還是AdapterViewFlipper 系統(tǒng)都幫助實現(xiàn)了自動輪播的功能，我們只需要設置它的進入和退出動畫就可以。
但上面的效果有一個和AdapterViewFlipper聯(lián)動的效果，在布局移動到屏幕外面的過程中需要執(zhí)行一個漸隱漸現(xiàn)的聯(lián)動效果。
查看了上面兩個布局，在調用showNext方法時沒有提供改變時的監(jiān)聽，那沒辦法只能自己去實現(xiàn)。其實也簡單，繼承AdapterViewFlipper重寫它的showNext方法就行了。
MFAdapterViewFlipper
/**
* File description.
* 自定義AdapterViewFlipper 在它執(zhí)行下一個動畫時回調給也無妨
* @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();
}
}
動起來
接下來就是填充數(shù)據(jù)讓他動起來了
為了讓外面使用這個布局簡單點，那自定義一下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;
// 輪播的屏數(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ù)據(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個 所以一共有多少行 等于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();
}
/**
* 更改當前價格模塊
*/
private void changeCurrentPrice() {
int productSize = MFCommonUtils.isEmpty(mProductList) ? 0 : mProductList.size();
// 數(shù)據(jù)不合法不顯示價格
if (MFCommonUtils.isEmpty(mProductList) || productSize <= 0) {
mVPrice.setVisibility(GONE);
return;
}
// 每排展示兩個商品數(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);
}
/**
* 顯示后一個
*/
@Override
public void showNext() {
currentPosition ++;
// 如果已經(jīng)循環(huán)了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;
}
/**
* 更新數(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個 所以一共有多少行 等于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ù)據(jù)
// 每排展示兩個商品數(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;
// 左邊和有點兩個布局控件
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ù)據(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);
}
}
}
}
注意點在于
1、進入和退出動畫必須是屬性動畫
2、當前滾動的屏數(shù)，根據(jù)它可以算出對應的postion
* 顯示后一個
*/
@Override
public void showNext() {
currentPosition ++;
// 如果已經(jīng)循環(huán)了1輪 那從頭開始
if (currentPosition == mFlipCount) {
currentPosition = 0;
}
}
在執(zhí)行out動畫時，執(zhí)行價格布局的漸隱漸現(xiàn)動畫
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)動畫時顯示的是上一個價格，在動畫執(zhí)行完畢后設置當前應該展示的價格
總結
在遇到一些ui效果時，應該首頁去看看系統(tǒng)是否已經(jīng)提供類似的控件，是否可以通過微改來實現(xiàn)這樣的效果。如果可以的話建議使用系統(tǒng)已有的，既簡單又安全。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Android Studio使用教程（三）：常用快捷鍵,本文還同時介紹了自動導包設置,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細介紹了Flutter自定義搜索框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
Android開發(fā)快速實現(xiàn)底部導航欄示例
這篇文章主要為大家介紹了Android開發(fā)快速實現(xiàn)底部導航欄的示例代碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
本篇文章主要介紹了Android電池電量監(jiān)聽的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
手把手教你用ViewPager自定義實現(xiàn)Banner輪播
這篇文章主要手把手教你用ViewPager自定義實現(xiàn)Banner輪播,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了Android實現(xiàn)用戶頭像更換操作的相關資料,更改頭像用戶操作很簡單，但是對于程序員實際操作有些復雜，需要了解的朋友可以參考下2016-04-04
在制作APP的時候下拉刷新和上拉加載幾乎都是一起使用的，今天以MUI的寫法為例給大家分享一下整合的寫法。2017-11-11
Android實現(xiàn)在TextView文字過長時省略部分或滾動顯示的方法
這篇文章主要介紹了Android實現(xiàn)在TextView文字過長時省略部分或滾動顯示的方法,結合實例形式分析了Android中TextView控件文字顯示及滾動效果相關操作技巧,需要的朋友可以參考下2016-10-10
Android開發(fā)-之監(jiān)聽button點擊事件的多種方法
本篇文章主要是介紹了Android開發(fā)之監(jiān)聽button點擊事件的方法，Android開發(fā)-之監(jiān)聽button點擊事件的方法總結，有興趣的可以了解一下。2016-11-11
這篇文章主要介紹了Android短信發(fā)送器實現(xiàn)方法,以實例形式較為詳細的分析了Android短信發(fā)送器從界面布局到功能實現(xiàn)的完整步驟與相關技巧,需要的朋友可以參考下2015-09-09