利用Android属性动画实现Banner的原理与实践

最新推荐文章于 2024-06-16 11:17:26 发布
最新推荐文章于 2024-06-16 11:17:26 发布
阅读量3.4k 收藏 4
点赞数
分类专栏： Android 文章标签： Android Banner 属性动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ahence/article/details/46646559
版权
本文介绍了使用Android属性动画来设计Banner控件的原理和实践，通过属性动画改变ImageView的位置，实现Banner的自动播放和手动滑动功能。文章提到，这种方式可以避免使用计时器和ViewPager，减少内存消耗。虽然示例代码尚未封装成自定义控件，但展示了关键的动画实现和逻辑处理，包括自动播放时的循环播放效果以及手动滑动的处理策略。
摘要由CSDN通过智能技术生成

其实在Android刚推出属性动画的时候，就想利用它来设计一个Banner控件，一直没什么时间尝试。在当时看我们应用中的Banner，使用计时器来控制自动播放，设置一个很大的数，利用余数原理来实现ViewPager循环，在进行内存分析的时候，看似不起眼的Banner却是一个消耗内存的大户，相信很多App的Banner都是计时器加ViewPager的方式实现的。

最近时间比较宽裕，可以做一些研究性的工作，因此打算尝试使用属性动画实现Banner。目前仅仅是尝试了一下如何实现，暂还未将其做成一个控件，最后的示例代码也是如此，仅仅是实现原理的一个演示，待后续测一下性能，如果还可以的话再做成自定义控件。先做一些声明：

1.这里仅仅演示一个示例，说明这种Banner的实现原理，暂未封装成控件

2.示例中手势滑动仅用按钮点击来模拟

3.由于仅演示原理，示例中未添加Indicator的联动效果，也没有Banner的点击响应

4.Banner的移动速度由动画时间控制，可自由设置，示例中设置的时间较短，故移动比较快

5.Banner尺寸暂时写死了，仅适配Nexus4手机，其他手机测试请自行获取Banner宽度

6.请分别测试自动播放和左滑、右滑

7.上述问题皆可在封装成正式控件时解决，同时还有图片缓存等

8.另外Banner播放移动由属性动画控制，因此3.0以下需额外动画库nineoldandroids

先来看下效果图(动画录制的很差，上两张静态图好了，大概可以看到Banner的移动过程)：

最低0.47元/天 解锁文章
aspook
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android最便捷banner轮播图实现原理及代码
Flutter|Android移动开发
09-22 3379
原理图： 代码实现public class CyclerViewPager extends ViewPager { public CyclerViewPager(Context context) { super(context); } public CyclerViewPager(Context context, AttributeSet attrs) {
Android 仿快手视频列表，RecyclerView与Banner联动效果
01-15
在Android开发中，实现类似快手视频列表的效果，通常涉及到`RecyclerView`和`Banner`组件的联动。`RecyclerView`是Google推出的高效列表视图，而`Banner`则常用于轮播图展示，这样的组合可以创建出丰富的用户体验。...
Android UI - 实现广告Banner轮播效果(1)
最新发布
2401_85730279的博客
06-16 924
**广告实体*/// 广告id// 日期// 标题//选题来自// 选题// 图片url// 是否为广告// 广告开始时间// 广告结束时间// 目标url// 宽// 高// 是否可用return id;
android banner动画框架,Banner开源框架[Android轮播控件]
weixin_39738380的博客
05-26 187
现在的绝大数App都有banner界面,也就是轮播控件，主要是实现循环播放多个广告图片和手动滑动循环等功能。因为ViewPager并不支持循环翻页，所以要实现循环还得需要自己去动手，我为了方便就开源了一个轮播控件，希望大家觉得有用。详细内容可进入github上查看。Gradle123dependencies{compile'com.youth.banner:banner:+'//最新版本}或者...
android banner滑动期间内部动画,GitHub - talentsxh/BGABanner-Android: 引导界面滑动导航 + 大于等于1页时无限轮播 + 各种切换动画轮播效果...
weixin_33183792的博客
05-27 218
????BGABanner-Android????主要功能：引导界面导航效果支持根据服务端返回的数据动态设置广告条的总页数支持大于等于1页时的无限循环自动轮播、手指按下暂停轮播、抬起手指开始轮播支持自定义指示器位置和广告文案位置支持图片指示器和数字指示器支持 ViewPager 各种切换动画支持选中特定页面支持监听 item 点击事件加载网络数据时支持占位图设置，避免出现整个广告条空白的情况多个 ViewPa...
利用Android属性动画实现Banner控件
Battling against our own ignorance
12-03 2441
之前在一篇博客中描述了实现原理，具体请移步到利用Android属性动画实现Banner的原理与实践。 源代码已经推到GitHub上，请移步到Android-AnimationBanner。 AnimationBanner特点： 1.实现原理及使用都很简单 2.可灵活设置Banner数量，1张或N张 3.附带Indicator小圆点指示器，并自动联动 4.可灵活设置Indicator指示
Android studio实现banner自定义轮播
12-26
Android studio 实现banner自定义轮播示例 更换图片: app/src/main/res中加入图片，imagelist.java中更换图片名称； 更改轮播间隔：bannerpager.java中的参数mInterval; 修改图片点击事件：ManiActivity.java中的...
android实现banner轮播图无限轮播效果
08-29
"Android实现Banner轮播图无限轮播效果" Android实现Banner轮播图无限轮播效果是Android开发中常见的一种效果，实现这种效果需要了解Android中相关的知识点，包括权限配置、依赖添加、布局设计、图片加载类创建、...
Android ViewPager实现Banner循环播放
09-01
在这个示例中，我们将讨论如何利用ViewPager来创建一个Banner（横幅）轮播，这个轮播不仅包含图片，还有动态生成的小圆点指示当前页面。以下是对实现这一功能的详细解析： **一、需求分析** 1. **图片轮播**：我们...
Android UI实现广告Banner轮播效果
08-31
在Android开发中，实现广告Banner轮播效果是一个常见的需求，特别是在各类APP的首页或功能页。这个效果可以吸引用户注意力，展示推广内容。本篇文章将详细介绍如何使用Android UI组件实现广告Banner的自动轮播功能。...
Android实现一种简易的Banner效果
04-05
使用ViewPager简单实现循环播放多个广告图片的banner效果，利用Handler与Runnable配合实现指定功能模块的定时循环执行。
Android banner自动滑动效果
08-15
Android banner动画预览，banner一些自定义方法预览；glide加载网络图片和本地图片；banner自定义文件布局
Android-单页显示3个Item的ViewPager炫酷切换效果适用于Banner等。
08-12
单页显示3个Item的ViewPager炫酷切换效果，适用于Banner等。
Android Banner属性设置
Android_Gt
12-21 8316
设置banner样式 banner.setBannerStyle(BannerConfig.NUM_INDICATOR); 设置标题集合（当banner样式有显示title时）  banner.setBannerTitles(titleList); 设置banner动画效果 banner.setBannerAnimation(Transformer.DepthPage); 设置...
Android Banner效果
ThePromonkeyOf_HeLuo的博客
11-01 928
Banner banner GitHub最高星banner 魅族Banner ViewPager系列之 仿魅族应用的广告BannerView
Banner （android 轮播图）
m0_37094131的博客
03-07 881
Banner: Android广告图片轮播控件，支持无限循环和多种主题，可以灵活设置轮播样式、动画、轮播和切换时间、位置、图片加载框架等！导入banner 库: 在AndroidStudio 中添加依赖库 compile ‘com.youth.banner:banner:+’ //banner库 compile ‘com.github.bumptech.glide:glide:3.
Android 网络图片实现banner
04-18
以下是两种Android实现网络图片轮播的例子： 1.利用Handler+ViewPager实现网络图片轮播[^1] ```java // 在布局文件中添加ViewPager和指示器 <androidx.viewpager.widget.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="200dp" /> <LinearLayout android:id="@+id/indicatorLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal" /> // 在代码中设置ViewPager和指示器 ViewPager viewPager = findViewById(R.id.viewPager); LinearLayout indicatorLayout = findViewById(R.id.indicatorLayout); // 创建一个Handler用于定时切换ViewPager的页面 Handler handler = new Handler(); Runnable runnable = new Runnable() { @Override public void run() { int currentItem = viewPager.getCurrentItem(); int nextItem = (currentItem + 1) % imageUrls.size(); viewPager.setCurrentItem(nextItem); handler.postDelayed(this, 3000); // 设置轮播间隔时间 } }; handler.postDelayed(runnable, 3000); // 延迟启动轮播 // 创建一个PagerAdapter用于显示网络图片 PagerAdapter pagerAdapter = new PagerAdapter() { @Override public int getCount() { return imageUrls.size(); } @Override public boolean isViewFromObject(@NonNull View view, @NonNull Object object) { return view == object; } @NonNull @Override public Object instantiateItem(@NonNull ViewGroup container, int position) { ImageView imageView = new ImageView(MainActivity.this); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); Glide.with(MainActivity.this).load(imageUrls.get(position)).into(imageView); container.addView(imageView); return imageView; } @Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { container.removeView((View) object); } }; viewPager.setAdapter(pagerAdapter); // 创建指示器 for (int i = 0; i < imageUrls.size(); i++) { ImageView indicator = new ImageView(MainActivity.this); indicator.setImageResource(R.drawable.indicator_selector); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT ); layoutParams.setMargins(10, 0, 10, 0); indicatorLayout.addView(indicator, layoutParams); } ``` 2.利用ViewPager自带的方法实现网络图片轮播 ```java // 在布局文件中添加ViewPager和指示器 <androidx.viewpager.widget.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="200dp" /> <LinearLayout android:id="@+id/indicatorLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal" /> // 在代码中设置ViewPager和指示器 ViewPager viewPager = findViewById(R.id.viewPager); LinearLayout indicatorLayout = findViewById(R.id.indicatorLayout); // 创建一个PagerAdapter用于显示网络图片 PagerAdapter pagerAdapter = new PagerAdapter() { @Override public int getCount() { return imageUrls.size(); } @Override public boolean isViewFromObject(@NonNull View view, @NonNull Object object) { return view == object; } @NonNull @Override public Object instantiateItem(@NonNull ViewGroup container, int position) { ImageView imageView = new ImageView(MainActivity.this); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); Glide.with(MainActivity.this).load(imageUrls.get(position)).into(imageView); container.addView(imageView); return imageView; } @Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { container.removeView((View) object); } }; viewPager.setAdapter(pagerAdapter); // 创建指示器 for (int i = 0; i < imageUrls.size(); i++) { ImageView indicator = new ImageView(MainActivity.this); indicator.setImageResource(R.drawable.indicator_selector); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT ); layoutParams.setMargins(10, 0, 10, 0); indicatorLayout.addView(indicator, layoutParams); } // 设置ViewPager切换界面时没有滚动效果 viewPager.setCurrentItem(0, false); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值