Android仿支付宝UI功能开发,Android 自定义view仿支付宝咻一咻功能
支付宝上有一个咻一咻的功能,就是点击图片后四周有水波纹的这种效果,今天也写一个类似的功能。
效果如下所示:
思路:
就是几个圆的半径不断在变大,这个可以使用动画缩放实现,还有透明动画
还有就是这是好几个圆,然后执行的动画有个延迟效果,其实这些动画是放在一起执行的,熟悉属性动画的知道已经给我们提供了同步执行动画和顺序执行动画的实现api,也会会有人说这几个view就是在onDraw()方法中画几个圆,可能会说我还要继承容器view去onLayout()方法中这些子view添加在某个特定的区域,当然这也是可以的,其实简单的就是以图片为中心(图片imageview在父view的中心),然后画圆,指定每个字view的宽和高就行了,具体看代码:
package com.zhifubaoxiuyixiu.view;
import android.animation.Animator;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.FrameLayout;
import java.util.ArrayList;
/**
* Created by admin on 2016/12/29.
*/
public class ZhifubaoFrameLayout extends FrameLayout {
private int rippleColor = Color.parseColor("#0099CC");//水波纹的颜色
private int radius = 0;//水波纹圆的半径
private long anim_duration = 3000;//动画执行的时间
private int water_ripple_count = 6;
private int scale = 6;//动画缩放比例
private long animDelay;//动画延迟的时间
private Paint paint;
private AnimatorSet animatorSet;
private ArrayList animatorList;
private FrameLayout.LayoutParams rippleParams;
private ArrayList rippleViewList=new ArrayList();
private boolean isAnimRunning = false;
public ZhifubaoFrameLayout(Context context) {
this(context,null);
}
public ZhifubaoFrameLayout(Context context, AttributeSet attrs) {
this(context,attrs,0);
}
public ZhifubaoFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint();
addChildView();
initAnim();
}
/**
* 初始化动画
*/
private void initAnim() {
animatorSet = new AnimatorSet();
animatorSet.setInterpolator(new AccelerateDecelerateInterpolator());
animatorList=new ArrayList();
for(int i=0;i
final ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(rippleViewList.get(i), "ScaleX", 1.0f, scale);
scaleXAnimator.setRepeatCount(ObjectAnimator.INFINITE);
scaleXAnimator.setRepeatMode(ObjectAnimator.RESTART);
scaleXAnimator.setStartDelay(i * animDelay);
scaleXAnimator.setDuration(anim_duration);
animatorList.add(scaleXAnimator);
final ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(rippleViewList.get(i), "ScaleY", 1.0f, scale);
scaleYAnimator.setRepeatCount(ObjectAnimator.INFINITE);
scaleYAnimator.setRepeatMode(ObjectAnimator.RESTART);
scaleYAnimator.setStartDelay(i * animDelay);
scaleYAnimator.setDuration(anim_duration);
animatorList.add(scaleYAnimator);
final ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(rippleViewList.get(i), "Alpha", 1.0f, 0f);
alphaAnimator.setRepeatCount(ObjectAnimator.INFINITE);
alphaAnimator.setRepeatMode(ObjectAnimator.RESTART);
alphaAnimator.setStartDelay(i * animDelay);
alphaAnimator.setDuration(anim_duration);
animatorList.add(alphaAnimator);
}
animatorSet.playTogether(animatorList);
}
/**
* 添加水波纹子view
*/
private void addChildView() {
radius = 32;
animDelay=350;
rippleParams=new FrameLayout.LayoutParams((int)(2*(radius)),(int)(2*(radius)));
rippleParams.gravity = Gravity.CENTER;
for(int i=0;i
WateRipple rippleView=new WateRipple(getContext(),paint);
addView(rippleView,rippleParams);
rippleViewList.add(rippleView);
}
}
/**
* 初始化画笔
*/
private void initPaint() {
paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(rippleColor);
paint.setStyle(Paint.Style.FILL);
}
/**
* 开启动画
*/
public void startRippleAnimation(){
if(!isRunning()){
for(WateRipple wateRipple:rippleViewList){
wateRipple.setVisibility(VISIBLE);
}
animatorSet.start();
isAnimRunning=true;
}
}
/**
* 动画停止运行
*/
public void stopAnimation(){
if(isRunning()){
animatorSet.cancel();
isAnimRunning=false;
}
}
/**
* 判断是否动画在运行
* @return
*/
public boolean isRunning(){
return isAnimRunning;
}
/**
* ui不可见时关闭动画
* @param visibility
*/
@Override
protected void onWindowVisibilityChanged(int visibility) {
super.onWindowVisibilityChanged(visibility);
if(visibility==View.INVISIBLE||visibility ==View.GONE){
stopAnimation();
}
}
}
每个水波纹view
package com.zhifubaoxiuyixiu.view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;
/**
* Created by admin on 2016/12/29.
*/
public class WateRipple extends View {
private Paint mPaint;
public WateRipple(Context context, Paint paint){
super(context);
if(paint==null){
this.mPaint = new Paint();
}else{
this.mPaint = paint;
}
setVisibility(View.INVISIBLE);//刚开始设置不可见
}
public WateRipple(Context context) {
super(context);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int radius=(Math.min(getWidth(),getHeight()))/2;
canvas.drawCircle(radius,radius,radius,mPaint);
}
}
圆形图片:
package com.zhifubaoxiuyixiu.view;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.util.AttributeSet;
import android.view.View;
import com.zhifubaoxiuyixiu.R;
/**
* Created by admin on 2016/12/29.
*/
public class CircleView extends View {
private BitmapShader bitmapShaderp ;
private ShapeDrawable shapeDrawable;
public CircleView(Context context) {
this(context,null);
}
public CircleView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initBitmap();
}
private void initBitmap() {
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.grid);
shapeDrawable = new ShapeDrawable(new OvalShape());
bitmapShaderp = new BitmapShader(bitmap, Shader.TileMode.CLAMP,Shader.TileMode.CLAMP);
shapeDrawable.getPaint().setShader(bitmapShaderp);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
shapeDrawable.setBounds(0,0,getWidth(),getHeight());
shapeDrawable.draw(canvas);
}
}
布局文件:
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/root"
>
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_centerInParent="true"
android:id="@+id/imageView"
android:layout_gravity="center"
android:src="@mipmap/grid"/>
使用:
package com.zhifubaoxiuyixiu;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import com.zhifubaoxiuyixiu.view.CircleView;
import com.zhifubaoxiuyixiu.view.ZhifubaoFrameLayout;
public class MainActivity extends Activity {
private CircleView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = (CircleView) findViewById(R.id.imageView);
final ZhifubaoFrameLayout root = (ZhifubaoFrameLayout) findViewById(R.id.root);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
root.startRippleAnimation();
}
});
}
}
以上所述是小编给大家介绍的Android 自定义view仿支付宝咻一咻功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
Android仿支付宝UI功能开发,Android 自定义view仿支付宝咻一咻功能相关推荐
- android wear支付宝6,Android自定义View仿支付宝输入六位密码功能
跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义 ...
- Android开发,自定义View的学习合集
转载自:http://blog.csdn.net/u011507982/article/details/51199644 自定义控件学习 https://github.com/GcsSloop/An ...
- Android平台手机UI应用开发——软件管理器
第一次写博客,与大家分享源代码,博客很多地方不知道怎么设计,望见谅. 希望大家多多支持,雅林和大家一起学习Android,共同进步. 今天我们要做的这个软件管理器,主要目的是为了学习Android平台 ...
- Android开发之自定义View
目录 一.View的简介 1.1 View的构造函数 1.2 View的绘制流程图 二.自定义View 2.1 onMeasure()方法 2.2 OnDraw()方法 一.View的简介 View类 ...
- android 高仿 探探卡片滑动,Android自定义View仿探探卡片滑动效果
Android自定义View仿探探卡片滑动这种效果网上有很多人已经讲解了实现思路,大多都用的是RecyclerView来实现的,但是我们今天来换一种实现思路,只用一个自定义的ViewGroup来搞定这 ...
- android的动态tab,Android自定义view仿QQ的Tab按钮动画效果(示例代码)
话不多说 先上效果图 实现其实很简单,先用两张图 一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的 ...
- Android绘制竖直虚线完美解决方案—自定义View
Android绘制竖直虚线完美解决方案-自定义View 开发中我们经常会遇到绘制虚线的需求,一般我们使用一个drawable文件即可实现,下面我会先列举常规drawable文件的实现方式. 使用dra ...
- android 自定义view xml ,Android实现在xml文件中引用自定义View的方法分析
本文实例讲述了Android实现在xml文件中引用自定义View的方法.分享给大家供大家参考,具体如下: 在xml中引用自定义view 方法一: android:layout_width=" ...
- 自定义View | 仿QQ运动步数进度效果
项目GitHub地址 思路 固定不动的蓝色大圆弧 动画变动的红色小圆弧 中间的步数文字显示 相关的自定义属性 比如固定不动的大圆弧, 我们不能写死他的蓝色颜色属性, 要提供一个颜色的自定义属性给用户自 ...
最新文章
- 机器人进攻民用市场:踏实做好小优美
- 1814: 一元三次方程求解
- 【PAT甲级 排序】1036 Boys vs Girls (25 分) C++
- C++实现具有[数组]相似特征的类DoubleSubscriptArray
- 2018.12.20 Spring环境如何搭建
- 【论文笔记】命名实体识别论文
- 【python】python的二元表达式和三元表达式
- ASP.net的PDF打印(水晶报表)[摘]
- python怎么存为动图_Python将视频或者动态图gif逐帧保存为图片的方法
- 02(d)多元无约束优化问题-拟牛顿法
- UPC 条形码的介绍及计算校验码
- shiro自定义session过期时间
- 使用pdfobject预览pdf文件
- 量子计算机采用量子力学原理,量子力学原理及其应用.docx
- tp5restful API的搭建(2)
- 【愿头发与你我同在队】团队项目第一次作业-组队与选题
- fabric java sdk解析channel.queryTransactionByID(txId)方法的返回值
- 详解Unity中的粒子系统Particle System (八)
- Go语言开发k8s-04-Service操作
- 【Python数据分析及可视化】美国犯罪监禁数据分析与可视化