Android特效专辑(十二)——仿支付宝咻一咻功能实现波纹扩散特效,精细小巧的View


先来看看这个效果

这是我的在Only上添加的效果,说实话,Only现在都还只是半成品,台面都上不了,怪自己技术不行,也太懒了

PS:这个view也是我模仿了人家的效果,参考了人家的思路写的,不是纯手撸,罪过罪过,网上应该也能找到很多这样的效果,我只是加入了一些自己的需求在里面

我么新建一个工程——Whew

RoundImageView

这个之前讲过,网上 的粒子,把头像变成圆形的,这里就不多说了,直接撸代码吧!

package com.lgl.whew;

/**
 * 圆形头像
 * Created by LGL on 2016/1/12.
 */

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.NinePatchDrawable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * 圆形ImageView,可设置最多两个宽度不同且颜色不同的圆形边框。
 *
 * 设置颜色在xml布局文件中由自定义属性配置参数指定
 */

public class RoundImageView extends ImageView {

    private int mBorderThickness = 0;

    private Context mContext;

    private int defaultColor = 0xFFFFFFFF;

    // 如果只有其中一个有值,则只画一个圆形边框

    private int mBorderOutsideColor = 0;

    private int mBorderInsideColor = 0;

    // 控件默认长、宽

    private int defaultWidth = 0;

    private int defaultHeight = 0;

    public RoundImageView(Context context) {

        super(context);

        mContext = context;

    }

    public RoundImageView(Context context, AttributeSet attrs) {

        super(context, attrs);

        mContext = context;

        setCustomAttributes(attrs);

    }

    public RoundImageView(Context context, AttributeSet attrs, int defStyle) {

        super(context, attrs, defStyle);

        mContext = context;

        setCustomAttributes(attrs);

    }

    private void setCustomAttributes(AttributeSet attrs) {

        TypedArray a = mContext.obtainStyledAttributes(attrs,
                R.styleable.roundedimageview);

        mBorderThickness = a.getDimensionPixelSize(
                R.styleable.roundedimageview_border_thickness, 0);

        mBorderOutsideColor = a
                .getColor(R.styleable.roundedimageview_border_outside_color,
                        defaultColor);

        mBorderInsideColor = a.getColor(
                R.styleable.roundedimageview_border_inside_color, defaultColor);

    }

    @Override
    protected void onDraw(Canvas canvas) {

        Drawable drawable = getDrawable();

        if (drawable == null) {

            return;

        }

        if (getWidth() == 0 || getHeight() == 0) {

            return;

        }

        this.measure(0, 0);

        if (drawable.getClass() == NinePatchDrawable.class)

            return;

        Bitmap b = ((BitmapDrawable) drawable).getBitmap();

        Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

        if (defaultWidth == 0) {

            defaultWidth = getWidth();

        }

        if (defaultHeight == 0) {

            defaultHeight = getHeight();

        }

        int radius = 0;

        if (mBorderInsideColor != defaultColor
                && mBorderOutsideColor != defaultColor) {// 定义画两个边框,分别为外圆边框和内圆边框

            radius = (defaultWidth < defaultHeight ? defaultWidth
                    : defaultHeight) / 2 - 2 * mBorderThickness;

            // 画内圆

            drawCircleBorder(canvas, radius + mBorderThickness / 2,
                    mBorderInsideColor);

            // 画外圆

            drawCircleBorder(canvas, radius + mBorderThickness
                    + mBorderThickness / 2, mBorderOutsideColor);

        } else if (mBorderInsideColor != defaultColor
                && mBorderOutsideColor == defaultColor) {// 定义画一个边框

            radius = (defaultWidth < defaultHeight ? defaultWidth
                    : defaultHeight) / 2 - mBorderThickness;

            drawCircleBorder(canvas, radius + mBorderThickness / 2,
                    mBorderInsideColor);

        } else if (mBorderInsideColor == defaultColor
                && mBorderOutsideColor != defaultColor) {// 定义画一个边框

            radius = (defaultWidth < defaultHeight ? defaultWidth
                    : defaultHeight) / 2 - mBorderThickness;

            drawCircleBorder(canvas, radius + mBorderThickness / 2,
                    mBorderOutsideColor);

        } else {// 没有边框

            radius = (defaultWidth < defaultHeight ? defaultWidth
                    : defaultHeight) / 2;

        }

        Bitmap roundBitmap = getCroppedRoundBitmap(bitmap, radius);

        canvas.drawBitmap(roundBitmap, defaultWidth / 2 - radius, defaultHeight
                / 2 - radius, null);

    }

    /**
     * 获取裁剪后的圆形图片
     */

    public Bitmap getCroppedRoundBitmap(Bitmap bmp, int radius) {

        Bitmap scaledSrcBmp;

        int diameter = radius * 2;

        // 为了防止宽高不相等,造成圆形图片变形,因此截取长方形中处于中间位置最大的正方形图片

        int bmpWidth = bmp.getWidth();

        int bmpHeight = bmp.getHeight();

        int squareWidth = 0, squareHeight = 0;

        int x = 0, y = 0;

        Bitmap squareBitmap;

        if (bmpHeight > bmpWidth) {// 高大于宽

            squareWidth = squareHeight = bmpWidth;

            x = 0;

            y = (bmpHeight - bmpWidth) / 2;

            // 截取正方形图片

            squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth,
                    squareHeight);

        } else if (bmpHeight < bmpWidth) {// 宽大于高

            squareWidth = squareHeight = bmpHeight;

            x = (bmpWidth - bmpHeight) / 2;

            y = 0;

            squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth,
                    squareHeight);

        } else {

            squareBitmap = bmp;

        }

        if (squareBitmap.getWidth() != diameter
                || squareBitmap.getHeight() != diameter) {

            scaledSrcBmp = Bitmap.createScaledBitmap(squareBitmap, diameter,
                    diameter, true);

        } else {

            scaledSrcBmp = squareBitmap;

        }

        Bitmap output = Bitmap.createBitmap(scaledSrcBmp.getWidth(),

        scaledSrcBmp.getHeight(),

        Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(output);

        Paint paint = new Paint();

        Rect rect = new Rect(0, 0, scaledSrcBmp.getWidth(),
                scaledSrcBmp.getHeight());

        paint.setAntiAlias(true);

        paint.setFilterBitmap(true);

        paint.setDither(true);

        canvas.drawARGB(0, 0, 0, 0);

        canvas.drawCircle(scaledSrcBmp.getWidth() / 2,

        scaledSrcBmp.getHeight() / 2,

        scaledSrcBmp.getWidth() / 2,

        paint);

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

        canvas.drawBitmap(scaledSrcBmp, rect, rect, paint);

        bmp = null;

        squareBitmap = null;

        scaledSrcBmp = null;

        return output;

    }

    /**
     * 边缘画圆
     */

    private void drawCircleBorder(Canvas canvas, int radius, int color) {

        Paint paint = new Paint();

        /* 去锯齿 */

        paint.setAntiAlias(true);

        paint.setFilterBitmap(true);

        paint.setDither(true);

        paint.setColor(color);

        /* 设置paint的 style 为STROKE:空心 */

        paint.setStyle(Paint.Style.STROKE);

        /* 设置paint的外框宽度 */

        paint.setStrokeWidth(mBorderThickness);

        canvas.drawCircle(defaultWidth / 2, defaultHeight / 2, radius, paint);

    }

}

这里值得注意的是,要使用这个必须自定义一些属性,我们在values下新建一个attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="roundedimageview">
        <attr name="border_thickness" format="dimension" />
        <attr name="border_inside_color" format="color" />
        <attr name="border_outside_color" format="color"></attr>
    </declare-styleable>

</resources>

然后在xml文件中引入命名空间

 xmlns:imagecontrol="http://schemas.android.com/apk/res-auto"

我们直接看layout_mian.xml吧

layout_mian.xml

就一些布局咯

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:imagecontrol="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <com.lgl.whew.WhewView
            android:id="@+id/wv"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <com.lgl.whew.RoundImageView
            android:id="@+id/my_photo"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_centerInParent="true"
            android:src="@drawable/myphoto"
            imagecontrol:border_inside_color="#bc0978"
            imagecontrol:border_outside_color="#ba3456"
            imagecontrol:border_thickness="1dp" />
    </RelativeLayout>

</LinearLayout>

这样你就可以使用圆形图片了,我们接下来看波纹的绘制

WhewView

package com.lgl.whew;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/**
 * 模仿咻一咻
 *
 * @author LGL
 *
 */
public class WhewView extends View {

    private Paint paint;
    private int maxWidth = 255;
    // 是否运行
    private boolean isStarting = false;
    private List<String> alphaList = new ArrayList<String>();
    private List<String> startWidthList = new ArrayList<String>();

    public WhewView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub
        init();
    }

    public WhewView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        init();
    }

    public WhewView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        init();
    }

    private void init() {
        paint = new Paint();
        // 设置博文的颜色
        paint.setColor(0x0059ccf5);
        alphaList.add("255");// 圆心的不透明度
        startWidthList.add("0");
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        setBackgroundColor(Color.TRANSPARENT);// 颜色:完全透明
        // 依次绘制 同心圆
        for (int i = 0; i < alphaList.size(); i++) {
            int alpha = Integer.parseInt(alphaList.get(i));
            // 圆半径
            int startWidth = Integer.parseInt(startWidthList.get(i));
            paint.setAlpha(alpha);
            // 这个半径决定你想要多大的扩散面积
            canvas.drawCircle(getWidth() / 2, getHeight() / 2, startWidth + 50,
                    paint);
            // 同心圆扩散
            if (isStarting && alpha > 0 && startWidth < maxWidth) {
                alphaList.set(i, (alpha - 1) + "");
                startWidthList.set(i, (startWidth + 1) + "");
            }
        }
        if (isStarting
                && Integer
                        .parseInt(startWidthList.get(startWidthList.size() - 1)) == maxWidth / 5) {
            alphaList.add("255");
            startWidthList.add("0");
        }
        // 同心圆数量达到10个,删除最外层圆
        if (isStarting && startWidthList.size() == 10) {
            startWidthList.remove(0);
            alphaList.remove(0);
        }
        // 刷新界面
        invalidate();
    }

    // 执行动画
    public void start() {
        isStarting = true;
    }

    // 停止动画
    public void stop() {
        isStarting = false;
    }

    // 判断是都在不在执行
    public boolean isStarting() {
        return isStarting;
    }

}

这里我们看到,对外有几个方法,一个开始动画,一个停止动画,一个检测是否正在运行

MainActivity

这里就是我们的需求了,我反编译了一下支付宝的APK,并没有找到他的咻一咻的音效,就在他的raw目录下随便找了一个,我们现在是需要这样一个需求

  • 点击图片执行动画,并且每隔五分钟响一次
  • 再次点击图片,停止动画,停止音效

我们先新建一个raw文件夹把音效拷贝进去吧

package com.lgl.whew;

import android.app.Activity;
import android.media.AudioManager;
import android.media.SoundPool;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.view.View.OnClickListener;

public class MainActivity extends Activity {

    private WhewView wv;
    private RoundImageView my_photo;
    private static final int Nou = 1;

    // 声明一个SoundPool
    private SoundPool sp;
    // 定义一个整型用load();来设置suondIDf
    private int music;

    private Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            if (msg.what == Nou) {
                // 每隔10s响一次
                handler.sendEmptyMessageDelayed(Nou, 5000);
                sp.play(music, 1, 1, 0, 0, 1);
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    private void initView() {

        // 第一个参数为同时播放数据流的最大个数,第二数据流类型,第三为声音质量
        sp = new SoundPool(10, AudioManager.STREAM_SYSTEM, 5);
        // 把你的声音素材放到res/raw里,第2个参数即为资源文件,第3个为音乐的优先级
        music = sp.load(this, R.raw.hongbao_gq, 1);

        wv = (WhewView) findViewById(R.id.wv);
        my_photo = (RoundImageView) findViewById(R.id.my_photo);
        my_photo.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                if(wv.isStarting()){
                    //如果动画正在运行就停止,否则就继续执行
                    wv.stop();
                    //结束进程
                    handler.removeMessages(Nou);
                }else{
                    // 执行动画
                    wv.start();
                    handler.sendEmptyMessage(Nou);
                }
            }
        });

    }
}

相信这里的逻辑不是很难吧,对了,我们在结束activity的时候也是要销毁这个进程的,不然…你懂的


    @Override
    protected void onDestroy() {
        // TODO Auto-generated method stub
        super.onDestroy();
        handler.removeMessages(Nou);
    }

我们运行一下,想听效果的可以下载Demo运行一下,我们这里做一个简单的演示

Demo下载地址:http://download.csdn.net/detail/qq_26787115/9437957

Android特效专辑(十二)——仿支付宝咻一咻功能实现波纹扩散特效,精细小巧的View的更多相关文章

  1. Android控件GridView之仿支付宝钱包首页带有分割线的GridView九宫格的完美实现

    Android控件GridView之仿支付宝钱包首页带有分割线的GridView九宫格的完美实现 2015-03-10 22:38 28419人阅读 评论(17) 收藏 举报  分类: Android ...

  2. Android控件Gridview实现仿支付宝首页,Fragment底部按钮切换和登录圆形头像

    此案例主要讲的是Android控件Gridview(九宫格)完美实现仿支付宝首页,包含添加和删除功能:Fragment底部按钮切换的效果,包含四个模块,登录页面圆形头像等,一个小项目的初始布局. 效果 ...

  3. Android学习(十二) ContentProvider

    一.ContentProvider简介       当应用继承ContentProvider类,并重写该类用于提供数据和存储数据的方法,就可以向其他应用共享其数据.虽然使用其他方法也可以对外共享数据, ...

  4. Android高级之十二讲之如何降低应用内存消耗

    安卓应用的内存往往是有限的,从开始的8M到16M,24M,32M,48M,64M等逐步变大,但内存的变大是由于分辨率的提高导致,并不意味着可以随意声明使用内存,而不及时回收(即使Java有自己的垃圾回 ...

  5. android 学习随笔十二(网络:使用异步HttpClient框架)

    使用异步HttpClient框架发送get.post请求 在https://github.com/ 搜索 asyn-http https://github.com/search?utf8=✓& ...

  6. Android提高第十二篇之蓝牙传感应用

        请问淘宝上买的单片机蓝牙模块与安卓/android手机通讯的时候需要设置UUID吗? 2013-02-15 09:39 在世张辽 | 浏览 2769 次 想用安卓手机和单片机通过蓝牙模块通讯, ...

  7. <Android 基础(十二)> TextInputLayout,让输入框更有灵性

    介绍 Layout which wraps an {@link android.widget.EditText} (or descendant) to show a floating label wh ...

  8. Android设计模式(十二)--抽象工厂模式

    问题: 抽象工厂模式,是一个,狠恶心的模式,那么这个模式在Android有没实用到过呢? 1.定义: 抽象工厂模式:为创建一组相关或者是相互依赖的对象提供一个接口,而不须要指定他们的详细类. 2.使用 ...

  9. Android笔记(七十二) Style和Theme

    我们尝尝需要使用setText.setColor.setTextSize等属性来设置控件的样式,但是每个控件都需要设置这些属性,工作量无疑是巨大的,并且后期维护起来也不方便. Style Androi ...

随机推荐

  1. Redis中的关系查询

    本文对Redis如何保存关系型数据,以及如何对其匹配.范围.模糊查询进行举例讲解,其中模糊查询功能基于最新的2.8.9以后版本. 1 关系型数据的存储 以Staff对象为例,在关系型数据库或类似Gri ...

  2. 21 ViewPager RadioGroup

    结构 MainActivity.java package com.qf.day21_viewpagerfragmentrg_demo4; import java.util.ArrayList; imp ...

  3. (一二八)使用POST上传文件

    简介 上传文件到服务器是一个比较常用的操作,最基本的方式是通过POST上传,文件以二进制形式,作为一个参数传递,但是这个POST的结构相当复杂,且必须完全符合HTTP标准. 文件上传的POST格式 该 ...

  4. 【Netty源码分析】Netty服务端bind端口过程

    这一篇博客我们介绍一下Netty服务端绑定端口的过程,我们通过跟踪代码一直到NIO原生绑定端口的操作. 绑定端口操作 ChannelFuture future = serverBootstrap.bi ...

  5. shell-----sed命令详解

    Table of Contents 1. Sed简介  2. 定址  3. Sed命令  4. 选项  5. 元字符集  6. 实例  7. 脚本 1. Sed简介 sed是一种在线编辑器,它一次处理 ...

  6. 因 URL 意外地以“/HelloWorld”结束,请求格式无法识别

    http://www.cnblogs.com/AngelLee2009/p/3540527.html

  7. 开源项目——小Q聊天机器人V1.3

    小Q聊天机器人V1.0 http://blog.csdn.net/baiyuliang2013/article/details/51386281 小Q聊天机器人V1.1 http://blog.csd ...

  8. Hessian源码分析--总体架构

    Hessian是一个轻量级的remoting onhttp工具,使用简单的方法提供了RMI的功能. 相比WebService,Hessian更简单.快捷.采用的是二进制RPC协议,因为采用的是二进制协 ...

  9. 学习笔记6-Android查看应用输出的错误信息 如何部署应用到真实手机 发布软件

    查看应用输出的错误信息 1.      通过LogCat窗口查看信息 右上角图标可以筛选不同级别的信息(比如info等). 右上角的+可以进行信息筛选 把应用部署到真实手机 1.      要把手机的 ...

  10. C++ Primer 有感(标准库map类型)

    map是键-值对的集合.map类型通常可以理解为关联数组:可以使用键作为下标获取一个值,正如内置数组一样.而关联的本质在于元素的值于某个特定的键相关联,而并非通过元素在数组中的位置获取. 1.map对 ...