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<Animator> animatorList;
 private FrameLayout.LayoutParams rippleParams;
 private ArrayList<WateRipple> rippleViewList=new ArrayList<WateRipple>();
 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<Animator>();
  for(int i=0;i<rippleViewList.size();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<water_ripple_count;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);
 }
}

布局文件:

<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 >
 <com.zhifubaoxiuyixiu.view.ZhifubaoFrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:id="@+id/root"
  >
  <com.zhifubaoxiuyixiu.view.CircleView
   android:layout_width="64dp"
   android:layout_height="64dp"
   android:layout_centerInParent="true"
   android:id="@+id/imageView"
   android:layout_gravity="center"
   android:src="@mipmap/grid"/>
 </com.zhifubaoxiuyixiu.view.ZhifubaoFrameLayout>
</RelativeLayout>

使用:

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仿支付宝咻一咻功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android开发之实现GridView支付宝九宫格

    先给大家展示下关于仿支付宝钱包首页中带有分割线的gridview,俗称九宫格 的效果图,怎么样是不是和你想象的一样啊.在你的预料之中就继续访问以下代码内容吧. 我们都知道ListView设置分割线是非常容易的,设置ListView的分割线颜色和宽度,只需要在布局中定义android:divider和android:dividerHeight属性即可.而GridView并没有这样的属性和方法,那我们改如何来做呢? 我们小编在做这个效果之前,也参考了其他的一些方案,比如说定义一个自定义的GridVi

  • Android app第三方支付宝支付接入教程

    支付宝的接入相对比较简单,看看支付宝官网的文档基本都能搞定,但是切记一点让你们的后台也要搞清楚支付宝的流程,重中之重. 1.注意事项 开发前一定要阅读支付宝官方文档 强烈建议签名等处理在后台处理,我这个是测试是在自己本地写的,不要吐槽 想获取支付宝合作商户ID,及支付宝公钥请点击支付宝链接,生成密钥及PKCS8转码工具在文档中 添加Android.permission.INTERNET权限和android.permission.ACCESS_NETWORK_STATE权限 要导入支付宝的包 2.

  • Android仿支付宝支付从底部弹窗效果

    我们再用支付宝支付的时候,会从底部弹上来一个对话框,让我们选择支付方式等等,今天我们就来慢慢实现这个功能 效果图 实现 主界面很简单,就是一个按钮,点击后跳到支付详情的Fragment中 package com.example.hfs.alipayuidemo; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.wi

  • Android中RecyclerView布局代替GridView实现类似支付宝的界面

    单纯使用GridView 通用的两种给GridView 添加分割线的方法:http://stackoverflow.com/questions/7132030/android-gridview-draw-dividers 给Gridview 添加分割线,也就是实现网格布局,不清楚谷歌为什么没有给Gridview 添加一个类似 ListView 的Divider 属性,因此就需要我们自己去添加分割线, 目前两种方法,第一种是 利用GridView 的  android:horizontalSpac

  • Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效

    今年春节晚会没看尽兴,被支付宝集福给添了一段插曲,朋友们都在那数定时间段不停的咻一咻,哇,我咻到一个敬业福,不可能的,哈哈.那么咻一咻功能基于程序代码是怎么实现的呢?下面我们小编给大家分享本教程帮助大家学习Android波纹扩散效果之仿支付宝咻一咻功能实现波纹扩散特效,具体内容如下所示: 先来看看这个效果 这是我的在Only上添加的效果,说实话,Only现在都还只是半成品,台面都上不了,怪自己技术不行,也太懒了 PS:这个view也是我模仿了人家的效果,参考了人家的思路写的,不是纯手撸,罪过罪过

  • Android支付宝支付封装代码

    在做Android支付的时候肯定会用到支付宝支付, 根据官方给出的demo做起来非常费劲,所以我们需要一次简单的封装. 封装的代码也很简单,就是将官网给的demo提取出一个类来方便使用. public class Alipay { // 商户PID public static final String PARTNER = "123456789"; // 商户收款账号 public static final String SELLER = "qibin0506@gmail.co

  • Android自定义View实现支付宝咻一咻效果

    本篇文章介绍自定义View配合属性动画来实现如下的效果 实现思路挺简单: 画一个半透明的圆 实现两种动画效果,点击时扩散和不点击时扩散回收 使用线程的方式将上面两步结合起来 首先看下画半透明圆的部分 public class ClickCircleView extends View { private Bitmap bitmap; private Paint paint; private Canvas canvas; private boolean isSpreadFlag = false;//

  • Android支付宝支付设计开发

    在移动支付领域,支付宝支付占用巨大份额,根据艾瑞咨询公布的报告数据:2014Q3,支付宝斩获了82.6%的市场份额,在移动支付的霸主地位越来越稳固.财付通支付的发力点在微信支付和手Q支付,在移动支付格局中取得了10.0%的市场份额,排名第二. 支付宝在移动支付领域的统治地位,使得我们有必要梳理支付宝移动开发流程.本文写作的目的就是梳理支付流程,从架构层面讲述如何在移动应用中嵌入支付宝支付功能,以及指出哪些地方存在开发陷阱. 准备       按照说明,首先需要申请支付宝支付账号.这方面根据网站说

  • Android支付宝和微信支付集成

    场景 随着移动支付的兴起,在我们的app'中,会经常有集成支付的需求.这时候一般都会采用微信和支付宝的sdk 来集成 (一)支付宝支付 在使用支付宝支付的过程中,我们是在服务器端生成订单,客户端访问接口,并得到订单信息,调用接口支付,支付成功后支付宝会分别 异步调用服务器端,并向客户端返回支付结果. 开发步骤: ①注册支付宝账号--进行实名认证--提交审核资料--审核通过 支付宝无线快捷支付接口: b.alipay.com/order/productDetail.htm?productId=20

  • 支付宝咻一咻怎么用 Android帮你实现咻一咻

    对于之前最火的无外乎集五福了,而五福除了加十个好友获得外,最直接的途径就是支付宝的咻一咻了.那么咻一咻具体有哪些实现方式呢?下面我们将一一介绍这几种思路的实现过程. 1.自定义View实现咻一咻 那么这种实现方法需要掌握Canvas以及Paint几乎所有的方法.其对程序员的专业知识要求极高. 用该种方式实现的优点有: ㈠这种是最复杂的实现方法,但其兼容性最高,其支持android的所有设备. ㈡其对内存要求不大,几乎不占用任何内存. 下面我们来看看是怎样实现其效果的: public class

随机推荐