android开发之仿商城首页Banner图的实现

最新推荐文章于 2021-05-29 08:44:08 发布
最新推荐文章于 2021-05-29 08:44:08 发布
阅读量1.4k 收藏 1
点赞数 1
分类专栏： 原创技术分享 文章标签： android开发 仿Banner图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41760133/article/details/82789962
版权
该博客介绍了如何在Android应用中实现仿商城首页Banner图的动态缩放效果，包括图片的自动滚动和手动拖动时的缩放动画。通过使用ObjectAnimator进行视图缩放，结合ViewPager的滚动事件，实现了平滑的动画联动。同时，博客提供了详细的代码示例，展示了数据绑定和Glide库的使用方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

　　实现效果：当banner滚动的时候 首先会缩放当前以及上一个或下一个banner图，当banner滚动时会，背景会随滚动系数变化缩放(自动滚动)，下面相关技术人员来分享一下源码：

//0无状态，1缩放，2放大,3不能再播放动画

private int status = 0;

private void fada() {

if (status == 0 || status == 1) {

AnimatorSet animatorSetsuofang = new AnimatorSet();//组合动画

ObjectAnimator scaleX = ObjectAnimator.ofFloat(viewPager, "scaleX", 0.9f, 1f);

ObjectAnimator scaleY = ObjectAnimator.ofFloat(viewPager, "scaleY", 0.9f, 1f);

animatorSetsuofang.setDuration(500);

animatorSetsuofang.setInterpolator(new LinearInterpolator());

animatorSetsuofang.play(scaleX).with(scaleY);//两个动画同时开始

animatorSetsuofang.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationStart(Animator animation) {

super.onAnimationStart(animation);

setViewPagerIsScroll(false);

stopAutoPlay();

status = 3;

}

@Override

public void onAnimationEnd(Animator animation) {

super.onAnimationEnd(animation);

setViewPagerIsScroll(true);

Log.e("as", "sa");

startAutoPlay();

status = 2;

}

});

animatorSetsuofang.start();

}

}

private void suoxia() {

if (status == 0 || status == 2) {

AnimatorSet animatorSetsuofang = new AnimatorSet();//组合动画

ObjectAnimator scaleX = ObjectAnimator.ofFloat(viewPager, "scaleX", 1f, 0.9f);

ObjectAnimator scaleY = ObjectAnimator.ofFloat(viewPager, "scaleY", 1f, 0.9f);

animatorSetsuofang.setDuration(200);

animatorSetsuofang.setInterpolator(new LinearInterpolator());

animatorSetsuofang.play(scaleX).with(scaleY);//两个动画同时开始

animatorSetsuofang.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationStart(Animator animation) {

super.onAnimationStart(animation);

setViewPagerIsScroll(false);

stopAutoPlay();

status = 3;

}

@Override

public void onAnimationEnd(Animator animation) {

super.onAnimationEnd(animation);

setViewPagerIsScroll(true);

// startAutoPlay();

status = 1;

}

});

animatorSetsuofang.start();

}

}

 

动画联动效果实现：

 

private final Runnable task = new Runnable() {

@Override

public void run() {

if (status == 0 || status == 2) {

AnimatorSet animatorSetsuofang = new AnimatorSet();//组合动画

ObjectAnimator scaleX = ObjectAnimator.ofFloat(viewPager, "scaleX", 1f, 0.9f);

ObjectAnimator scaleY = ObjectAnimator.ofFloat(viewPager, "scaleY", 1f, 0.9f);

animatorSetsuofang.setDuration(300);

animatorSetsuofang.setInterpolator(new LinearInterpolator());

animatorSetsuofang.play(scaleX).with(scaleY);//两个动画同时开始

animatorSetsuofang.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationStart(Animator animation) {

super.onAnimationStart(animation);

setViewPagerIsScroll(false);

status = 3;

}

@Override

public void onAnimationEnd(Animator animation) {

super.onAnimationEnd(animation);

setViewPagerIsScroll(true);

if (count > 1 && isAutoPlay) {

currentItem = currentItem % (count + 1) + 1;

// Log.i(tag, "curr:" + currentItem + " count:" + count);

if (currentItem == 1) {

viewPager.setCurrentItem(currentItem, false);

handler.post(task);

} else {

viewPager.setCurrentItem(currentItem);

handler.postDelayed(task, delayTime);

}

}

status = 1;

}

});

animatorSetsuofang.start();

}

}

};

 

缩放(拖动)效果实现：

 

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

int num = 0;

if (mOnPageChangeListener != null) {

// Log.e("as", "position" + position + " ----positionOffset " + positionOffset + " positionOffsetPixels" + positionOffsetPixels);

// Log.e(scale);

Log.e("as", imageUrls.size() + "" + " currentItem" + currentItem);

if (positionOffset > 0) {

Log.e("as", "position" + position + " currentItem" + currentItem + "mViewPagerIndex" + mViewPagerIndex);

// Log.e("as", mViewPagerIndex + "");

if (touch) {

if (currentItem == imageUrls.size() + 1) {

Glide.with(context).load(imageUrls.get(0)).into(roundImageView);

Glide.with(context).load(imageUrls.get(0)).into(roundImagetwo);

} else {

if (currentItem == 0) {

Glide.with(context).load(imageUrls.get(imageUrls.size() - 1)).into(roundImageView);

Glide.with(context).load(imageUrls.get(imageUrls.size() - 1)).into(roundImagetwo);

} else {

Glide.with(context).load(imageUrls.get(currentItem - 1)).into(roundImageView);

Glide.with(context).load(imageUrls.get(currentItem - 1)).into(roundImagetwo);

}

}

if (position == mViewPagerIndex) {

Log.e("tt", "左");

if (position == imageUrls.size()) {

num = 0;

} else {

num = position;

}

Glide.with(context).load(imageUrls.get(num)).diskCacheStrategy(DiskCacheStrategy.ALL).into(mImagebg);

roundImageView.setVisibility(VISIBLE);

roundImagetwo.setVisibility(INVISIBLE);

} else {

Log.e("tt", "右");

if (position == 0) {

num = imageUrls.size();

} else {

num = position;

}

Glide.with(context).load(imageUrls.get(num - 1)).diskCacheStrategy(DiskCacheStrategy.ALL).into(mImagebg);

roundImagetwo.setVisibility(VISIBLE);

roundImageView.setVisibility(INVISIBLE);

}

} else {

if (!touchover) {

if (position < currentItem) {

roundImageView.setVisibility(VISIBLE);

roundImagetwo.setVisibility(INVISIBLE);

}

}

if (position == imageUrls.size()) {

Glide.with(context).load(imageUrls.get(0)).diskCacheStrategy(DiskCacheStrategy.ALL).into(mImagebg);

} else if (position == 0) {

num = imageUrls.size();

Glide.with(context).load(imageUrls.get(num - 1)).diskCacheStrategy(DiskCacheStrategy.ALL).into(mImagebg);

} else {

if (position == mViewPagerIndex) {

Glide.with(context).load(imageUrls.get(position)).diskCacheStrategy(DiskCacheStrategy.ALL).into(mImagebg);

} else {

if (!touchover) {

Glide.with(context).load(imageUrls.get(position)).diskCacheStrategy(DiskCacheStrategy.ALL).into(mImagebg);

} else {

Glide.with(context).load(imageUrls.get(position - 1)).diskCacheStrategy(DiskCacheStrategy.ALL).into(mImagebg);

roundImageView.setVisibility(INVISIBLE);

roundImagetwo.setVisibility(VISIBLE);

}

//

}

}

}

//

} else {

roundImagetwo.setVisibility(VISIBLE);

roundImageView.setVisibility(VISIBLE);

if (currentItem == imageUrls.size() + 1) {

Glide.with(context).load(imageUrls.get(0)).into(roundImageView);

Glide.with(context).load(imageUrls.get(0)).into(roundImagetwo);

} else {

if (currentItem == 0) {

Glide.with(context).load(imageUrls.get(imageUrls.size() - 1)).into(roundImageView);

Glide.with(context).load(imageUrls.get(imageUrls.size() - 1)).into(roundImagetwo);

} else {

Glide.with(context).load(imageUrls.get(currentItem - 1)).into(roundImageView);

Glide.with(context).load(imageUrls.get(currentItem - 1)).into(roundImagetwo);

}

}

}

roundImagetwo.setRound(1f - positionOffset);

roundImageView.setRound(positionOffset);

if ((positionOffset == 0) && touch == false) {

fada();

}

mOnPageChangeListener.onPageScrolled(toRealPosition(position), positionOffset, positionOffsetPixels);

}

}

 

轮播图数据绑定

 

banner.setImages(imagebgUrls)

.setImageLoader(new GlideImageLoader())

.setImageList(images)

.start();

　　好了，到这里就算是完后才能了，如果大家需要改banner依赖包的setImageList()方法,不然无法在主线程中添加数据，还存在不理解的地方也是可以留言咨询。

　　本文由专业的郑州app开发公司燚轩科技整理发布，原创不易，如需转载请注明出处!

android商城首页布局,Android使用分类型RecyclerView仿各大商城首页
weixin_35574537的博客
05-26 1001
**正所谓，一入商城深似海~商城类的App，确实是有许多东西值得学习，但是只要略微斟酌一下，你又会发现，它们之间存在着许多不谋而合的相似，也就是所谓的雷同~既然如此，让我们也来接下地气，先从一个简单的首页做起吧~**实现的效果如下图：1.大布局就是一个简单的RecyclerView：也可以通过添加多个header实现4.这里我仅以四种类型为例/*** 4种类型*//*** 类型1：黑色星期五--使...
android 通用商城首页demo
11-21
商城首页、 标题渐变、热门搜索、标签、历史搜索、清除历史、 完美的viewpager、gridview+viewpager 、底部导航、下拉刷新 上拉加载、
Android仿转转首页banner图
11-23
Android仿转转首页banner图
android商城首页demo,FanZhengxi
weixin_39599097的博客
05-29 376
Android HyBridge 开发一、三种App开发方式对比1. Native App特点：UI元素、数据内容、逻辑架构都安装在手机终端，导致不可跨平台，每次版本升级都要重新打包。缺点:无法跨平台、升级麻烦、开发成本高(指跨平台开发成本高)优点：速度快，用户体验好。2. Web App定义：可理解为移动端的网站，将网页部署在服务器上，用户通过各大浏览器来访问。缺点：页面访问速度慢、用户体验差。...
Android Banner效果
ThePromonkeyOf_HeLuo的博客
11-01 970
Banner banner GitHub最高星banner 魅族Banner ViewPager系列之 仿魅族应用的广告BannerView
Android商城开发系列（九）—— 首页频道布局的实现
weixin_30898109的博客
03-26 530
　　在上一篇博客当中，我们讲了关于首页轮询广告的实现，接下来讲解一下首页频道布局的实现，如下图所示： 　　 　　这个布局用的是gridview去完成的，新建一个channel_item，代码如下所示： 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout 3 xmlns:android="ht...
Android自动播放Banner图片轮播效果
09-02
在Android开发中，实现一个自动播放的Banner图片轮播效果是常见的需求，尤其在各种应用的首页或者广告展示区域。这种效果能够吸引用户的注意力，展示丰富的信息。本篇文章将深入探讨如何在Android中创建一个自动播放...
Android自定义图片轮播Banner控件使用解析
08-27
Android自定义图片轮播Banner控件是Android开发中常用的控件之一，它可以用来动态展示多个图片，具有很高的实用价值。下面我们将详细介绍Android自定义图片轮播Banner控件的使用方法。 一、控件的主要特点 ...
android实现banner轮播图无限轮播效果
08-29
Android实现Banner轮播图无限轮播效果是Android开发中常见的一种效果，实现这种效果需要了解Android中相关的知识点，包括权限配置、依赖添加、布局设计、图片加载类创建、OnCreate方法中的控件初始化等。 首先，...
Android studio实现banner自定义轮播
12-26
Android studio 实现banner自定义轮播示例 更换图片: app/src/main/res中加入图片，imagelist.java中更换图片名称； 更改轮播间隔：bannerpager.java中的参数mInterval; 修改图片点击事件：ManiActivity.java中的...
android开发商城首页listview实现
06-22
就是跟淘宝商城或者京东等客户端首页那种效果 可以下拉刷新和上拉加载 可以添加头部 比如viewpage实现广告轮播
MZBannerView-仿魅族BannerView,图片轮播控件,支持多种模式切换：普通ViewPager使用，普通Banner使用，仿魅族Banner使用。.zip
09-24
现在的APP Banner大多数千篇一律，前几天看到魅族手机上所有魅族自家APP上的Banner效果不错，于是就想着来仿着做一个类似的效果。因此就有了这个库。但是为了使用方便，这个库不仅仅只有仿魅族效果的BannerView 来使用，还可以当作普通的BannerView 来使用，还可以当作一个ViewPager 来使用。使用很方便，具体使用方法和API 请看后面的示例。 －－－  左图为魅族APP上的Banner效果，右图是高仿效果。MZBannerView 有以下功能：1 . 仿魅族BannerView 效果。2 . 当普通Banner 使用3 . 当普通ViewPager 使用。4 . 当普通ViewPager使用(有魅族Banner效果)5 . 仿某视频网站Banner效果。Demo APKgif图片有点模糊，可以扫描下方二维码下载APK体验相关博客ViewPager系列之 仿魅族应用的广告BannerView更新日志v1.1.1 : 增加按住Banner 停止轮播，松开开始自动轮播的功能v1.1.0 : fix 在从网上获取数据后，banner 显示 造成 ANR 的bug(如果在onCreate()中设置资源显示则没问题)v1.1.2 : fix 更改数据之后，调用setPages重新刷新数据会crush的bugv2.0.0 :1,add: 添加仿魅族Banner效果，中间Page覆盖两边。 -- 2,fix 部分bug: 添加OnPageChangeListener 回调 pisition 不对的bug.DependencyAdd it in your root build.gradle at the end of repositories:allprojects {      repositories {           ...           maven { url 'https://jitpack.io' }      } }Step 2. Add the dependencydependencies {          compile 'com.github.pinguo-zhouwei:MZBannerView:v2.0.0' }自定义属性属性名属性意义取值open_mz_mode是否开启魅族模式true 为魅族Banner效果，false 则普通Banner效果canLoop是否轮播true 轮播，false 则为普通ViewPagerindicatorPaddingLeft设置指示器距离左侧的距离单位为 dp 的值indicatorPaddingRight设置指示器距离右侧的距离单位为 dp 的值indicatorAlign设置指示器的位置有三个取值：left 左边，center 剧中显示，right 右侧显示middle_page_cover设置中间Page是否覆盖（真正的魅族Banner效果）true 覆盖，false 无覆盖效果使用方法1 . xml 布局文件2 . activity中代码：mMZBanner = (MZBannerView) view.findViewById(R.id.banner);              // 设置数据         mMZBanner.setPages(list, new MZHolderCreator() {             @Override             public BannerViewHolder createViewHolder() {                 return new BannerViewHolder();             }         });  public static class BannerViewHolder implements MZViewHolder {         private ImageView mImageView;         @Override         public View createView(Context cont
Android商城购物车页面实现
09-28
此项目实现了商城购物车部分功能，包含侧滑删除，侧滑删除类库所用EasySwipeMenuLayout，项目博客地址链接：https://blog.csdn.net/loocanp/article/details/82883640
仿喵街首页效果的demo
11-04
仿喵街首页效果的demo （喵街和橘子娱乐的首页都是这种效果，ios已经有demo了）
Android 仿商城类App
11-09
Android 仿商城类App功能 1，有联网登陆验证功能，登陆状态保持 2，有JSON解析 3，添加购物车 4，自动轮播 5，SharedPreferences 的基本用法，本app大部分功能是以此方法做的和bundle传值 6，Fragment里嵌套TabHost选项卡 7，QQ左滑菜单应用 8，自动补全文字 [注意：本资源来自网络，如有侵权，请联系我删除，谢谢。]
Android开源商城
gjm15881133824的博客
01-12 7841
商城项目地址点这里 这个项目我会持续更新到一个商城基础模型成熟架构 网络框架 okhttp 依赖注入 dagger2 事件、异步库 rxjava（rxandroid） json解析 Gson 效果图
android商城首页布局,仿JD商城UI布局达到90%
weixin_36104484的博客
05-26 307
源码片段public class MainPagerAdapter extends PagerAdapter {private List pageViews;public MainPagerAdapter(List pageViews) {this.pageViews = pageViews;}@Overridepublic int getCount() {// TODO Auto-generat...
自定义ViewGroup实现仿淘宝的商品详情页
热门推荐
zxm317122667的专栏
07-23 3万+
最近公司在新版本上有一个需要， 要在首页添加一个滑动效果， 具体就是仿照X宝的商品详情页， 拉到页面底部时有一个粘滞效果，  如下图 X东的商品详情页，如果用户继续向上拉的话就进入商品图文描述界面： 刚开始想拿来主义，直接从网上找个现成的demo来用， 但是网上无一例外的答案都特别统一： 几乎全部是ScrollView中再套两个ScrollView， 或者是一个LinearLay
Android开发：实现Banner广告图片自动与手动循环轮播
"这篇文章主要讲解如何在Android平台上实现一个Banner界面的广告图片循环轮播功能，包括手动滑动循环的效果。作者指出，虽然通常可以使用ViewPager来创建滑动页面，但ViewPager本身不支持循环滚动，因此需要自定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值