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效果时,应该首页去看看系统是否已经提供类似的控件,是否可以通过微改来实现这样的效果。如果可以的话建议使用系统已有的,既简单又安全。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-10-08

详解android 视频图片混合轮播实现

循环添加视频view  图片view for (int i = 0 ;i<beansArrayList.size();i++){ if (beansArrayList.get(i).getType()==1){ videoPlayer = new NiceVideoPlayer(this); controller = new TxVideoPlayerController(this); videoPlayer.setController(controller); videoPlayer.setU

Android自动播放Banner图片轮播效果

先看一下效果图 支持本地图片以及网络图片or本地网络混合. 使用方式: <com.jalen.autobanner.BannerView android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="230dip"> </com.jalen.autobanner.BannerView> 核心代码: int length

Android实现轮播图片展示效果

本文实例为大家分享了Android轮播图片的展示,供大家参考,具体内容如下 实现逻辑 1.创建XML布局文件,使用ViewPager完成轮播图片 2.初始化ViewPager控件,然后为控件设置适配器,创建出来的适配器实现里面的四个方法 3.四个方法分别是getCount isViewFromObject instantiateItem destroyItem 4.在onCreat方法中,加载图片资源,将图片ID存在集合中,使图片能够在页面中显示,(图片之所以能够在页面中显示,是因为在适配器中的

Android实现Banner界面广告图片循环轮播(包括实现手动滑动循环)

前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环.本以为单纯的ViewPager就可以实现这些功能.但是蛋疼的事情来了,ViewPager并不支持循环翻页.所以要实现循环还得需要自己去动手.自己在网上也找了些例子,本博文的Demo是结合自己找到的一些相关例子的基础上去改造,也希望对读者有用. Demo实现的效果图如下: Demo代码: 工程目录如下图: 废话不多说,上代码. 1.主Activity代码如下: package com.stevenhu.and

Android实现图片轮播效果的两种方法

大家在使用APP的过程中,经常会看到上部banner图片轮播的效果,那么今天我们就一起来学习一下,android中图片轮询的几种实现方法: 第一种:使用动画的方法实现:(代码繁琐) 这种发放需要:两个动画效果,一个布局,一个主类来实现,不多说了,来看代码吧: public class IamgeTrActivity extends Activity { /** Called when the activity is first created. */ public ImageView image

Android实现图片文字轮播特效

本文实例讲解了Android实现图片文字轮播特效的详细代码,分享给大家供大家参考,具体内容如下 图片轮播是类似知乎日报上的一个轮播效果,如下图. 好了直接进入正题,首先是出示一下效果: MainActivity: import java.util.ArrayList; import java.util.List; import java.util.concurrent.Executors; import java.util.concurrent.ScheduledExecutorService;

Android实现图片轮播效果

本文实例讲述了JaAndroid实现图片轮播效果代码,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 首先看下一下布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_par

Android使用ViewPager加载图片和轮播视频

作为Android基础组件之一,大家对viewpager已经很熟悉了,网上也有很多使用viewpager来加载图片的案例.但是像微信那样点击图片,可以轮播显示图片和视频的例子却没找到.正巧项目中有需求,可以就花时间写了下,现在给一下核心代码,希望对有此需求的同学们起一个抛砖引玉的作用.话不多说了,上代码: 以下是initData的代码 public void initData() { //把聊天界面的图片和视频找出来,并加到数组中,并在 //并根据传进来的position来找到视频或图片在数组中

Android实现图片自动轮播并且支持手势左右无限滑动

废话不多说了,先给大家上左右无限滑动的代码了. 1.左右无限滑动 public class MainActivity extends AppCompatActivity { private static ViewPager viewPager; private RadioGroup group; //图片资源,实际项目需要从网络获取 private int[] imageIds = {R.drawable.ym1, R.drawable.ym2, R.drawable.ym3, R.drawab

Android实现炫酷轮播图效果

轮播图的实现有很多种方式,早先我在网上看了下别人写的轮播图,感觉都比较的墨守成规,有的还有可能加载不了网络图片.所以我在这里自己重新写了下轮播图 ,方便日后的项目使用. 在下面的代码中,我也用volley封装了网络请求框架,异步加载网络图片,也可以给大家参考,非常实用. 效果图:这只是其中的一种效果 底层封装的我在下面会一一展示,先看下在MainActivity中怎样调取这个轮播控件 package com.wujie.advertisment.activity; import android.

Android 使用ViewPager实现轮播图效果

写这篇文章只是对今天所学的知识进行加深印象,对ViewPager的一些处理,比如适配器和各个方法的作用等. 先看效果图 这里我是在xml中写的圆点 Drawable文件夹下的xml代码: Shape_yes.xml: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

AndroidImageSlider实现炫酷轮播广告效果

本文实例为大家分享了AndroidImageSlider实现炫酷轮播广告的具体代码,供大家参考,具体内容如下 本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. AndroidImageSlider 是一个神奇而且方便的 Android 图片滚动框架,在菜鸟商城项目中我们就要使用这个框架来实现炫酷的轮播广告. AndroidImageSlider 架构分析 首先我们看图说话,下面是 AndroidImageSlider 的架构分

Android ViewPager实现轮播图效果

先上一张效果图: 说到ViewPager实现轮播图效果,那么肯定会用到PagerAdapter,下面先介绍下这个类. PagerAdapter简介 PagerAdapter是Android.support.v4包中的类,是一个抽象类,直接继承于Object,导入包android.support.v4.view.PagerAdapter即可使用. PagerAdapter主要是viewpager的适配器,而viewPager则也是在android.support.v4扩展包中新添加的一个强大的控件

Android实现ViewPage轮播图效果

在android移动端的开发中,首页轮播图是一个特别常见的功能,所以今天就来将最近写的一个小demo记录一下. 首先当然是新建一个项目代码如下: activity_main.xml文件: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to

Android开发实现的自动换图片、轮播图效果示例

本文实例讲述了Android开发实现的自动换图片.轮播图效果.分享给大家供大家参考,具体如下: 50行代码急速实现轮播图: 先看效果: 两个例子没太大区别, 不过i是布局文件中控件的Height不一样罢了这里一第二个为例: public class MainActivity extends Activity { int[] imageIds = new int[]{ R.drawable.a00,R.drawable.a01,R.drawable.a02,R.drawable.a3,R.draw

Flutter实现可循环轮播图效果

效果图 壹.控件分解图 贰.代码实现 贰点壹.构建根布局 新建AdPictureWidget继承自StatefulWidget,新建_AdPictureWidgetState类继承自State<AdPictureWidget>,根布局为Stack,代码如下: class AdPictureWidget extends StatefulWidget { @override _AdPictureWidgetState createState() => _AdPictureWidgetStat

Swift实现3D轮播图效果

本文实例为大家分享了Swift实现3D轮播图效果的具体代码,供大家参考,具体内容如下 整天逛淘宝,偶尔有一天看到其中的展示页有个看起来很炫的效果,闲来无事就试着写一个出来,先来看效果: 简单记一下思路,这里我选择使用UICollectionView控件,先根据其复用和滚动的特性做出无限轮播的效果,关键代码: //数据源数组 let totalCount = 100 var models: [String] = [String]() { didSet { //判断元素个数 if models.co

jQuery实现简洁的轮播图效果实例

本文实例讲述了jQuery实现简洁的轮播图效果.分享给大家供大家参考,具体如下: HTML: <div class="ppt"> <a href="###"><img src="ppt/ppt1.jpg" /></a> <a href="###" style="display:none;"><img src="ppt/ppt2.jp

简单实现轮播图效果的实例

一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二.实现代码: html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"