热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

Android自定义ViewGroup实现绚丽的仿支付宝咻一咻雷达脉冲效果

这篇文章主要介绍了Android自定义ViewGroup实现绚丽的仿支付宝咻一咻雷达脉冲效果的相关资料,需要的朋友可以参考下

去年春节的时候支付宝推行的集福娃活动着实火的不能再火了,更给力的是春晚又可以全民参与咻一咻集福娃活动,集齐五福就可平分亿元大红包,只可惜没有敬业福……那时候在家没事写了个咻一咻插件,只要到了咻一咻的时间点插件就可以自动的点击咻一咻来咻红包,当时只是纯粹练习这部分技术代码没有公开,后续计划写篇关于插件这方面的文章,扯远了(*^__^*) ……我们知道在支付宝的咻一咻页面有个雷达扩散的动画效果,当时感觉动画效果非常棒,于是私下尝试着实现了类似的效果,后来在github发现有大神也写有类似效果,于是读了一下大神的代码发现我们的核心思想都是一样的,只是细节不同,然后我就择其善者而从之,把两份代码整合了一下......整合之后的运行效果如下所示:

开始讲解实现之前我们先分析一下支付宝的咻一咻效果,进入支付宝咻一咻页面后点击了咻一咻按钮,屏幕上先出现一个圆在不断的进行放大操作,在该圆进行放大操作的同时其透明度也在由大到小进行变化,接着该圆没有消失之前又会出现新的圆也在进行同样的动画操作……通过观察我们发现这些圆都是按照固定的时间间隔在依次的执行放大和透明度渐变的动画操作,所以要实现同样的效果,首先要有一个ViewGroup,然后给这个ViewGroup添加固定数量的子View,最后让这些子View执行放大和透明度渐变动画就可以实现该效果了。清楚了这个大纲流程,实现起来就好办了。

首先定义我们的ViewGroup,由于该ViewGroup仅仅是添加固定数量的子View,然后让这些子View执行一系列动画,所以可以直接继承FrameLayout,代码如下所示:

public class RadarLayout extends FrameLayout { 
public RadarLayout(Context context) { 
super(context); 
} 
public RadarLayout(Context context, AttributeSet attrs) { 
super(context, attrs); 
} 
public RadarLayout(Context context, AttributeSet attrs, int defStyleAttr) { 
super(context, attrs, defStyleAttr); 
} 
}

我们为自己的咻一咻效果控件取名为RadarLayout,radar为雷达的意思,RadarLayout就表示在不断的进行扫描的意思。通过前边的分析我们知道RadarLayout是由固定数量的子View组成的,因此RadarLayout需要有表示子View数量的属性并且该属性外界可访问可修改;由于子View的执行动画是放缩和透明度渐变同时进行的,所以RadarLayout需要用动画集来组装各个动画;由于动画执行时需要知道执行时间所以RadarLayout需要有表示执行时间的属性并且该属性外界可访问可修改;由于RadarLayout的动画效果是子View来执行的,在咻一咻页面是个圆,所以需要定义子View并画在屏幕上,而画在屏幕上需要有画笔,画笔需要有颜色,还需要知道画在哪,所以可定义我们的RadarLayout定义如下所示:

public class RadarLayout extends FrameLayout { 
public static final int INFINITE = 0; 
private static final int DEFAULT_COUNT = 4; 
private static final int DEFAULT_COLOR = Color.rgb(0, 116, 193); 
private static final int DEFAULT_DURATION = 7000; 
private static final int DEFAULT_REPEAT = INFINITE; 
private static final int DEFAULT_STROKE_WIDTH = 2; 
private int mCount; 
private int mDuration; 
private int mRepeat; 
private AnimatorSet mAnimatorSet; 
private Paint mPaint; 
private int mColor; 
private float mRadius; 
private float mCenterX; 
private float mCenterY; 
private int mStrokeWidth; 
private boolean mIsStarted; 
private boolean mUseRing; 
public RadarLayout(Context context) { 
super(context); 
initGlobalparams(); 
} 
public RadarLayout(Context context, AttributeSet attrs) { 
super(context, attrs); 
initGlobalparams(); 
} 
public RadarLayout(Context context, AttributeSet attrs, int defStyleAttr) { 
super(context, attrs, defStyleAttr); 
initGlobalparams(); 
} 
private void initGlobalparams() { 
mColor = DEFAULT_COLOR; 
mCount = DEFAULT_COUNT; 
mDuration = DEFAULT_DURATION; 
mRepeat = DEFAULT_REPEAT; 
mUseRing = false; 
mStrokeWidth = dip2px(DEFAULT_STROKE_WIDTH); 
build(); 
} 
public synchronized void start() { 
if (mAnimatorSet == null || mIsStarted) { 
return; 
} 
mAnimatorSet.start(); 
} 
public synchronized void stop() { 
if (mAnimatorSet == null || !mIsStarted) { 
return; 
} 
mAnimatorSet.end(); 
} 
public synchronized boolean isStarted() { 
return (mAnimatorSet != null && mIsStarted); 
} 
public int getCount() { 
return mCount; 
} 
public int getDuration() { 
return mDuration; 
} 
public void setCount(int count) { 
if (count <0) { 
throw new IllegalArgumentException("Count cannot be negative"); 
} 
if (count != mCount) { 
mCount = count; 
reset(); 
invalidate(); 
} 
} 
public void setDuration(int millis) { 
if (millis <0) { 
throw new IllegalArgumentException("Duration cannot be negative"); 
} 
if (millis != mDuration) { 
mDuration = millis; 
reset(); 
invalidate(); 
} 
} 
public void setColor(int color) { 
if (mColor != color) { 
mColor = color; 
reset(); 
invalidate(); 
} 
} 
public void setUseRing(boolean useRing) { 
if (mUseRing != useRing) { 
mUseRing = useRing; 
reset(); 
invalidate(); 
} 
} 
@Override 
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
int width = getMeasuredWidth() - getPaddingLeft() - getPaddingRight(); 
int height = getMeasuredHeight() - getPaddingTop() - getPaddingBottom(); 
// 确定圆的圆点坐标及半径 
mCenterX = width * 0.5f; 
mCenterY = height * 0.5f; 
mRadius = Math.min(width, height) * 0.5f; 
} 
private void clear() { 
stop(); 
removeAllViews(); 
} 
private void build() { 
LayoutParams params = new LayoutParams(MATCH_PARENT, MATCH_PARENT); 
int repeatCount = (mRepeat == INFINITE) &#63; ObjectAnimator.INFINITE : mRepeat; 
List animators = new ArrayList(); 
for (int index = 0; index 

我们的RadarLayout已经完成了,代码很简单,相信小伙伴们都看的懂,需要注意属性mUseRing的含义,当mUserRing为true时表示使用环形雷达脉冲,否则使用圆形雷达脉冲。其次是属性动画的使用,如果有不明白的请自行查阅,这里就不再多多介绍了。接下来编写我们的activity_main.xml布局文件,如下所示:

 
 
 
 
 
 
 
 
 
 

在activity_main.xml布局中我们添加了4个RadarLayout,目的是对比他们的差异,接下编写我们的MainActivity,代码如下:

public class MainActivity extends Activity { 
private RadarLayout layout1; 
private RadarLayout layout2; 
private RadarLayout layout3; 
private RadarLayout layout4; 
@Override 
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity_main); 
layout1 = (RadarLayout) findViewById(R.id.radarlayout1); 
layout2 = (RadarLayout) findViewById(R.id.radarlayout2); 
layout2.setUseRing(true); 
layout2.setCount(2); 
layout3 = (RadarLayout) findViewById(R.id.radarlayout3); 
layout3.setUseRing(false); 
layout3.setColor(Color.RED); 
layout4 = (RadarLayout) findViewById(R.id.radarlayout4); 
layout4.setCount(7); 
layout4.setColor(Color.BLUE); 
layout4.setUseRing(true); 
} 
public void start(View view) { 
layout1.start(); 
layout2.start(); 
layout3.start(); 
layout4.start(); 
} 
}

在MainActivity中我们设置了layout1为默认值效果,layout2设置了使用环形效果并且设置了数量为2个;layout3设置为使用圆形并设置圆形的颜色为红色,layout3我们设置了使用环形,设置了环形数量为7个并设置颜色给蓝色。当点击了开始按钮后,我们打开每一个RadarLayout的动画,运行效果如下所示:

运行效果看起来还不错,基本上实现了仿支付的咻一咻的雷达脉冲效果,主要原理就是利用了属性动画并把这些属性动画集合起来一块播放即可。需要注意的是如果想在低版本兼容属性动画可以使用Jake Wharton大神开源的著名动画兼容库NineOldAndroids,最后感谢收看(*^__^*) ……

以上所述是小编给大家介绍的Android自定义ViewGroup实现绚丽的仿支付宝咻一咻雷达脉冲效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • 本文介绍了Android 7的学习笔记总结,包括最新的移动架构视频、大厂安卓面试真题和项目实战源码讲义。同时还分享了开源的完整内容,并提醒读者在使用FileProvider适配时要注意不同模块的AndroidManfiest.xml中配置的xml文件名必须不同,否则会出现问题。 ... [详细]
  • YOLOv7基于自己的数据集从零构建模型完整训练、推理计算超详细教程
    本文介绍了关于人工智能、神经网络和深度学习的知识点,并提供了YOLOv7基于自己的数据集从零构建模型完整训练、推理计算的详细教程。文章还提到了郑州最低生活保障的话题。对于从事目标检测任务的人来说,YOLO是一个熟悉的模型。文章还提到了yolov4和yolov6的相关内容,以及选择模型的优化思路。 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 本文讲述了如何通过代码在Android中更改Recycler视图项的背景颜色。通过在onBindViewHolder方法中设置条件判断,可以实现根据条件改变背景颜色的效果。同时,还介绍了如何修改底部边框颜色以及提供了RecyclerView Fragment layout.xml和项目布局文件的示例代码。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • Google Play推出全新的应用内评价API,帮助开发者获取更多优质用户反馈。用户每天在Google Play上发表数百万条评论,这有助于开发者了解用户喜好和改进需求。开发者可以选择在适当的时间请求用户撰写评论,以获得全面而有用的反馈。全新应用内评价功能让用户无需返回应用详情页面即可发表评论,提升用户体验。 ... [详细]
  • 自动轮播,反转播放的ViewPagerAdapter的使用方法和效果展示
    本文介绍了如何使用自动轮播、反转播放的ViewPagerAdapter,并展示了其效果。该ViewPagerAdapter支持无限循环、触摸暂停、切换缩放等功能。同时提供了使用GIF.gif的示例和github地址。通过LoopFragmentPagerAdapter类的getActualCount、getActualItem和getActualPagerTitle方法可以实现自定义的循环效果和标题展示。 ... [详细]
  • Android系统移植与调试之如何修改Android设备状态条上音量加减键在横竖屏切换的时候的显示于隐藏
    本文介绍了如何修改Android设备状态条上音量加减键在横竖屏切换时的显示与隐藏。通过修改系统文件system_bar.xml实现了该功能,并分享了解决思路和经验。 ... [详细]
author-avatar
少爷旅行
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有