[Material Design] 教你作一个Material风格、动画的button(MaterialButton)

时间  2019-11-13
标签 material design 一个 风格 动画 button materialbutton 繁體版
原文   原文链接

原创做品，转载请注明出处：http://blog.csdn.net/qiujuer/article/details/39831451
java

前段时间Android L 公布了，相信看过公布会了解过的朋友都为当中的 “Material Design” 感到由衷的惊艳吧！至少我是的。git

在惊艳之余感到由衷的遗憾，因为其必须在 ”Android L“ 上才干使用。MD。郁闷啊。
以后便本身想弄一个点击动画试试，此念头一发不可收拾；干脆一不作二不休，就重写了一个 ”MaterialButton“ 控件出来。
在这里不讨论什么是 ：“Material Design” 。
在这里将给你们分享一下我本身弄的 “Material Design” 风格的 ”MaterialButton“ button动画实现。

预热一下：github


上面的两张动画相信你们都看过吧？是否是挺不错的？反正我是认为手机上有这种动画是很是爽的，比較手机是用来添加体验的。但是这些动画仅仅能在Android L 才干体验到，对于现在国内的 Android 厂商的状况来看，预计谷歌出新的版本号的时候咱们就能用上这个 L 版本号了。编程

如下给大伙看看我作的 “MaterialButton” button：canvas


效果还不错吧？好了開始开工了。ide

介绍一下个人工具：“Android Studio” 固然你们用其它也行。工具

第一步：新建项目（这个随意。本身捣鼓吧）布局

第二步：新建本身定义控件：在java目录上右击选择本身定义控件：字体


取个名字：“MaterialButton”动画


现在来看看多了一个类（MaterialButton），一个布局文件 “sample_material_button”，一个属性文件 “attrs_material_button”


到这里第二步完毕了。多了3个文件。

第三步：改动 “MaterialButton” 类：

分为几步走：删除演示样例代码。又一次继承自 “Button” 类，复写 “onTouchEvent()” 方法。完毕后的代码：

public class MaterialButton extends Button {
    public MaterialButton(Context context) {
        super(context);
        init(null, 0);
    }

    public MaterialButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, 0);
    }

    public MaterialButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs, defStyle);
    }

    private void init(AttributeSet attrs, int defStyle) {
        // Load attributes
        final TypedArray a = getContext().obtainStyledAttributes(
                attrs, R.styleable.MaterialButton, defStyle, 0);
        a.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
    }

}
是否是感受干净多了？到此第三步完毕了。

第四步：就是作实际的动画了，在这里需要给你们说说三个需要注意的东西：

1.点击事件响应，这个很是好理解，在 “onTouchEvent()” 方法中完毕，在该方法中咱们需要完毕的是点击后启动一个动画。同一时候需要获取到当时点击的位置。

2.动画，这里的动画不是放大动画而是属性动画，说实话 这个要说清楚还真不是一点点就能说清楚的事情。简单说就是在动画中可以控制一个属性的变化，而在这里来讲就是在 “MaterialButton” 类中创建一个宽度和一个颜色的属性，而后在动画中控制这两个属性的变化。

3.属性的创建以及属性的变化区域肯定问题。

首先创建两个属性：

    private Paint backgroundPaint;
    private float radius;
    private Property<MaterialButton, Float> mRadiusProperty = new Property<MaterialButton, Float>(Float.class, "radius") {
        @Override
        public Float get(MaterialButton object) {
            return object.radius;
        }

        @Override
        public void set(MaterialButton object, Float value) {
            object.radius = value;
            //刷新Canvas
            invalidate();
        }
    };

    private Property<MaterialButton, Integer> mBackgroundColorProperty = new Property<MaterialButton, Integer>(Integer.class, "bg_color") {
        @Override
        public Integer get(MaterialButton object) {
            return object.backgroundPaint.getColor();
        }

        @Override
        public void set(MaterialButton object, Integer value) {
            object.backgroundPaint.setColor(value);
        }
    };

两个属性对照一下可以发现在半径的属性 “set” 操做中调用了 “invalidate()” 方法，该方法的做用是告诉系统刷新当前控件的 “Canvas”。也就是触发一次：“onDraw(Canvas canvas)” 方法。

而后复写 “onTouchEvent()” 方法例如如下：

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            //记录坐标
            paintX = event.getX();
            paintY = event.getY();
            //启动动画
            startAnimator();
        }
        return super.onTouchEvent(event);
    }
在该方法中，首先肯定是不是点击下去的事件。而后记录坐标，并启动动画。

在启动动画方法 “startAnimator()” 方法中。咱们这样写：

    private void startAnimator() {
        
        //计算半径变化区域
        int start, end;

        if (getHeight() < getWidth()) {
            start = getHeight();
            end = getWidth();
        } else {
            start = getWidth();
            end = getHeight();
        }

        float startRadius = (start / 2 > paintY ? start - paintY : paintY) * 1.15f;
        float endRadius = (end / 2 > paintX ? end - paintX : paintX) * 0.85f;

        //新建动画
        AnimatorSet set = new AnimatorSet();
        //加入变化属性
        set.playTogether(
                //半径变化
                ObjectAnimator.ofFloat(this, mRadiusProperty, startRadius, endRadius),
                //颜色变化 黑色到透明
                ObjectAnimator.ofObject(this, mBackgroundColorProperty, new ArgbEvaluator(), Color.BLACK, Color.TRANSPARENT)
        );
        // 设置时间
        set.setDuration((long) (1200 / end * endRadius));
        //先快后慢
        set.setInterpolator(new DecelerateInterpolator());
        set.start();
    }

在这一步咱们需要知道有些button并不是横向的，因此长不必定大于宽度。因此需要先推断获取到最长与最短，而后进行计算获取到開始的半径与结束的半径。这里有一个个人思路图：


咱们知道在 Android 中都是以左上脚为圆心。而后右边为X正数。下边为Y正数。

因此创建了如上坐标系。

蓝色矩形区域表明button。蓝色点表明点击的点。

灰色矩形表明点击后的開始区域，而后4边開始扩散开。以上就是一个简单的原理。固然思路有些跳跃，假设不懂可以在下边评论我都会进行回复的。


第五步：画画。对就是画画。这一步就是利用上面的半径和画笔颜色进行实际的绘制。

这里需要了解的是：

1：画画是在：“onDraw(Canvas canvas)” 方法中完毕

2：在画板（Canvas）上是分层级的。简单说就是先画背景而后画房子，而后画人。最后画人的一些小细节 自底向上的流程

3：画板每次画 都是新的画板。预示着你每次都需要从背景画起而后才到人。在编程中就是每次 “onDraw(Canvas canvas)” 方法中的画板（Canvas ）都是新的（New）。

说了那么多事实上很是easy，因为复杂的都在上一步中完毕了。

 “onDraw(Canvas canvas)” 源代码例如如下：

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.save();
        canvas.drawCircle(paintX, paintY, radius, backgroundPaint);
        canvas.restore();

        super.onDraw(canvas);
    }
在这里咱们先保存了画板的状态。而后画一个圆，而后恢复上一次的状态，而后调用父类进行后面的绘制工做。

这里解释一下：

1.为何 “super.onDraw(canvas)” 需要放在最后调用？

因为画板是分层级的，当调用 “super.onDraw(canvas)” 的时候进行的工做是绘制字体那些。假设放在前面调用那么形成的后果是咱们的圆会覆盖到字体上面。

因此咱们需要先画圆背景。

2.为何仅仅有一次画圆操做（canvas.drawCircle()）？

因为在半径属性中调用了 “invalidate()” ，当每次变化半径值的时候将进行一次 “onDraw(canvas)” 操做，也就画一次圆，在必定时间内高速反复画半径逐渐增大的圆的时候就造成了动画效果。

最后给出此次控件的代码：

public class MaterialButton extends Button {
    private Paint backgroundPaint;
    private float paintX, paintY, radius;

    public MaterialButton(Context context) {
        super(context);
        init(null, 0);
    }

    public MaterialButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, 0);
    }

    public MaterialButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs, defStyle);
    }

    private void init(AttributeSet attrs, int defStyle) {
        // Load attributes
        final TypedArray a = getContext().obtainStyledAttributes(
                attrs, R.styleable.MaterialButton, defStyle, 0);
        a.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.save();
        canvas.drawCircle(paintX, paintY, radius, backgroundPaint);
        canvas.restore();

        super.onDraw(canvas);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            //记录坐标
            paintX = event.getX();
            paintY = event.getY();
            //启动动画
            startAnimator();
        }
        return super.onTouchEvent(event);
    }

    private void startAnimator() {

        //计算半径变化区域
        int start, end;

        if (getHeight() < getWidth()) {
            start = getHeight();
            end = getWidth();
        } else {
            start = getWidth();
            end = getHeight();
        }

        float startRadius = (start / 2 > paintY ?
 start - paintY : paintY) * 1.15f;
        float endRadius = (end / 2 > paintX ? end - paintX : paintX) * 0.85f;

        //新建动画
        AnimatorSet set = new AnimatorSet();
        //加入变化属性
        set.playTogether(
                //半径变化
                ObjectAnimator.ofFloat(this, mRadiusProperty, startRadius, endRadius),
                //颜色变化 黑色到透明
                ObjectAnimator.ofObject(this, mBackgroundColorProperty, new ArgbEvaluator(), Color.BLACK, Color.TRANSPARENT)
        );
        // 设置时间
        set.setDuration((long) (1200 / end * endRadius));
        //先快后慢
        set.setInterpolator(new DecelerateInterpolator());
        set.start();
    }


    private Property<MaterialButton, Float> mRadiusProperty = new Property<MaterialButton, Float>(Float.class, "radius") {
        @Override
        public Float get(MaterialButton object) {
            return object.radius;
        }

        @Override
        public void set(MaterialButton object, Float value) {
            object.radius = value;
            //刷新Canvas
            invalidate();
        }
    };

    private Property<MaterialButton, Integer> mBackgroundColorProperty = new Property<MaterialButton, Integer>(Integer.class, "bg_color") {
        @Override
        public Integer get(MaterialButton object) {
            return object.backgroundPaint.getColor();
        }

        @Override
        public void set(MaterialButton object, Integer value) {
            object.backgroundPaint.setColor(value);
        }
    };
}

固然兴许的工做还有：不一样的颜色的button，button属性的问题。

介于你们可能没有 Android Studio 没法看到效果，特地把 Apk 上传了，假设Eclipse不知道怎么导入的话 就加我QQ。我给你说一下！

地址：APK

这些我都在我的的项目中完毕了。你们拿去试试：

Genius-Android


进阶：[Material Design] MaterialButton 效果进阶 动画本身主动移动进行对齐效果
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程