Android实现视图轮播效果
作者：lhj_android 发布时间：2023-04-14 08:52:10
标签：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) {
}
});
执行渐隐渐现动画时显示的是上一个价格，在动画执行完毕后设置当前应该展示的价格
来源：https://blog.csdn.net/lhj_android/article/details/120671866
0
投稿猜你喜欢
队列和堆栈都是约束版的链表，就像在超市购物，队列是先进先出的数据结构。接着上一篇，派生于链表类List，来模拟一个队列。namespace- 本文实例讲述了C#中DataGridView操作技巧。分享给大家供大家参考。具体分析如下：#region 操作DataGridView///
- 最近正式入坑Flutter，首先从环境搭建开始，看了网上好多关于Windows环境搭建的资料，基本都是按官方文档写的，看完的感受是，还不如直
- 本文实例为大家分享了java日期操作工具类，获取指定日期前一天、后一天；日期转换；两个日期之间相隔天数等工具类，供大家参考，具体内容如下im
- 我们首先看下BASEJDBC的写法实例：package com.dao;import java.sql.Connection;import
- 一、常用操作NextDouble()：返回0-1.0之间的随机数Next()：返回非负随机整数（0-216）Next(i)：返回一个小于i的
- 本文实例讲述了winform中的ListBox和ComboBox绑定数据用法。分享给大家供大家参考。具体实现方法如下：本例实现将集合数据绑定
- merge标签合并标记需要两个或两个以上的列表作为参数，并把它们合并在一起，如下所示：<s:merge var="myMer
- 本文实例讲述了Java线程同步方法。分享给大家供大家参考，具体如下：1. Semaphore1.1 二进制SemaphoreSemaphor
- 以下总结是2016/3/23在做一个网站时遇到的一个功能模块，现在将总结从为知笔记上搬家到CSDN，与大家共享，欢迎指正。0.准备工作 0.
- 本文实例讲述了C#异步执行任务的方法。分享给大家供大家参考。具体如下：// 异步执行耗时任务（适合不需要等它的执行结果的场景，如发邮件、发短
- 目录Web服务器技术讲解PHP：JSP/ServletWeb服务器IISTomcatJAVA jdk中的内容TomcatTomcat根目录下
- 声明一个客户端对象：protected RedisClient Redis = new RedisClient("127.0.0
- 本篇介绍我们如何利用selenium 来操作各种页面元素阅读目录链接(link)输入框 textbox按钮(Button)下拉选择框(Sel
- 在wpf中实现treeview的功能，可能看到很多分享的都是简单的绑定，仅此记录自己完成的功能。前台<TreeView x:Name=
- 写在前面最近在研究Spring Cloud和Spring Cloud Alibaba源码，在看到Nacos的配置中心的时候，有注意到自动刷新
- 1. 简单工厂介绍简单工厂有一个具体的工厂类，可以生产不同的产品，属于创建型设计模式。注意：简单工厂模式 不属于23种设计模式之列2. 简单
- 在.Net中，对文件（File）和文件夹（Folder）的操作可以使用File类和Directory类，也可以使用FileInfo类和Dir
- 命名空间：Windows.Data.Json在Windows Runtime中，可以使用Json类对获取的Json字符串进行操作，相比Dat
- Recyclerview现在基本已经替代Listview了，RecyclerView也越来越好用了 当我们有实现条目的拖拽排序和
