Android UI-自定义Drawable（二）

概述

上一篇我们已经讲到了一个开源框架如何实现了自定义的progressbar，效果还是很不错的。那么我们该怎么在一个自定义的Drawable中实现动画效果呢。接下去讲一讲注意的事项。

继承Drawable

可以看到，如果要自己实现一个子类，那么需要重写的方法就只有四个。而且每个方法的意义都非常清楚。

public class MyDrawable extends Drawable{
    
    @Override
    public void draw(Canvas canvas) {
        
    }

    @Override
    public void setAlpha(int alpha) {

    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {

    }

    @Override
    public int getOpacity() {
        return 0;
    }
}

1、draw
draw方法我们已经非常熟悉了。再需要绘制图像时，会调用这个方法。Canvas是画布的意思，所以的绘制操作都会由它来完成。在前面一篇博客介绍的项目中，是调用mLoadingRender.draw(canvas);来实现的。
2、setAlpha
这是一个设置透明度的方法。如果设置了透明度，那么可以传递给画笔Paint，前一篇的项目中是在Render中调用了mPaint.setAlpha(alpha);方法。0（0x00）表示完全透明，255（0xFF）表示完全不透明。
3、setColorFilter
如果一个Drawable设置了一个颜色过滤器，那么在绘制出来之前，被绘制内容的每一个像素都会被颜色过滤器改变。项目在Render中调用了mPaint.setColorFilter(cf);方法。ColorFilter是一个抽象类，他有一个比较好用的子类ColorMatrixColorFilter，我们可以通过设置颜色颜色举证来改变最终的显示效果。但是这里主要介绍Drawable，ColorFilter这里不展开讲。
4、getOpacity
这个方法的意思是获得不透明度。有几个值：PixelFormat：UNKNOWN，TRANSLUCENT，TRANSPARENT，或者 OPAQUE。
~OPAQUE：便是完全不透明，遮盖在他下面的所有内容
~TRANSPARENT：透明，完全不显示任何东西
~TRANSLUCENT：只有绘制的地方才覆盖底下的内容。
这个值，可以根据setAlpha中设置的值进行调整。比如，alpha == 0时设置为PixelFormat.TRANSPARENT。在alpha == 255时设置为PixelFormat.OPAQUE。在其他时候设置为PixelFormat.TRANSLUCENT。

实现Animatable

Drawable可以实现Animatable接口，这个接口主要提供动画的三个方法。这三个方法非常简单。分别表示的是开始，结束和动画是否还在运行。在这些方法中可以启动属性动画的开始和结束方法。当然实现这个接口的目的是为了方便View的调用。

/**
 * Interface that drawables supporting animations should implement.
 */
public interface Animatable {
    /**
     * Starts the drawable's animation.
     */
    void start();

    /**
     * Stops the drawable's animation.
     */
    void stop();

    /**
     * Indicates whether the animation is running.
     *
     * @return True if the animation is running, false otherwise.
     */
    boolean isRunning();
}

View

前面已经降到了Drawable中要实现的方法和继承的接口，那么在哪里创建和使用Drawable呢？可以创建一个自定义的View，这里简单起见，我们自定义一个View继承自ImageView。
这里我们可以在几个地方开始动画，常见的是在onAttachedToWindow和onDetachedFromWindow的时候设置是否开始和结束。然后自定义View持有我们自定义的Drawable。

public class MyView extends ImageView {

    private MyDrawable mDrawable;

    public MyView(Context context) {
        super(context);
        init();
    }

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

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mDrawable = new MyDrawable(getContext());
        setImageDrawable(mDrawable);
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        startAnimation();
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        stopAnimation();
    }

    @Override
    protected void onVisibilityChanged(@NonNull View changedView, int visibility) {
        super.onVisibilityChanged(changedView, visibility);
        if (visibility == View.VISIBLE) {
            startAnimation();
        } else {
            stopAnimation();
        }
    }

    @Override
    protected void onFocusChanged(boolean gainFocus, int direction, Rect previouslyFocusedRect) {
        super.onFocusChanged(gainFocus, direction, previouslyFocusedRect);
        if (gainFocus) {
            startAnimation();
        } else {
            stopAnimation();
        }
    }

    private void startAnimation() {
        mDrawable.start();
    }

    private void stopAnimation() {
        mDrawable.stop();
    }
}

然后使用我们的自定义View，在布局中：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_drawable"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.twinsnan.drawablesample.DrawableActivity">

    <com.twinsnan.drawablesample.MyView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

现在可以运行了，但是这并没有什么用，因为我们还没有做任何事情。既然要实现动画，那么属性动画是一个比较好的选择。然后我们设置动画模式为无限循环，这样就可以一直有效果了。
前面没有把Drawable写完整，这里就写一个非常简单的实现，且把属性动画加上去。再初始化的时候设属性动画的参数，然后设置监听，这样其他的准备工作就完成了，接下去的事情就是考虑绘制怎么样的一个动画了。

public class MyDrawable extends Drawable implements Animatable {

    private static final float DEFAULT_WIDTH = 50.0F;

    private static final float DEFAULT_HEIGHT = 50.0F;

    private static final int DEFAULT_DURATION = 2000;

    private static final int DEFAULT_COLOR = Color.LTGRAY;

    private float mWidth;

    private float mHeight;

    private int mDuration;

    private Paint mPaint;

    private ValueAnimator mAnimator;

    private ValueAnimator.AnimatorUpdateListener mAnimatorUpdateListener;

    public MyDrawable(Context context) {
        // 设置长宽
        mWidth = dp2px(context, DEFAULT_WIDTH);
        mHeight = dp2px(context, DEFAULT_HEIGHT);
        // 设置周期
        mDuration = DEFAULT_DURATION;
        // 设置属性动画参数
        mAnimator = new ValueAnimator();
        mAnimator = ValueAnimator.ofFloat(0.0f, 100.0f);
        mAnimator.setRepeatCount(ValueAnimator.INFINITE);
        mAnimator.setDuration(DEFAULT_DURATION);
        mAnimator.setDuration(mDuration);
        mAnimator.setRepeatMode(ValueAnimator.RESTART);
        mAnimator.setInterpolator(new LinearInterpolator());
        // 设置画笔参数
        mPaint = new Paint();
        mPaint.setColor(DEFAULT_COLOR);
        mPaint.setAntiAlias(true);
        // 设置动画的回调
        mAnimatorUpdateListener = new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // TODO: 2016/11/22 去做一些调整绘制参数的工作
                invalidateSelf();
            }
        };
    }

    @Override
    public void start() {
        mAnimator.addUpdateListener(mAnimatorUpdateListener);
        mAnimator.start();
    }

    @Override
    public void stop() {
        mAnimator.removeUpdateListener(mAnimatorUpdateListener);
        mAnimator.end();
    }

    @Override
    public boolean isRunning() {
        return mAnimator.isRunning();
    }

    @Override
    public void draw(Canvas canvas) {

    }

    @Override
    public void setAlpha(int alpha) {
        mPaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {
        mPaint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    // 获取默认的高度
    @Override
    public int getIntrinsicHeight() {
        return (int) mHeight;
    }

    // 获取默认的宽度
    @Override
    public int getIntrinsicWidth() {
        return (int) mWidth;
    }

    public float dp2px(Context context, float dpValue) {
        float scale = context.getResources().getDisplayMetrics().density;
        return dpValue * scale;
    }
}

Drawable

接下去，我们用drawable来完成一个钟摆的动画效果。我们假设钟摆的运动是一个余弦运动。每次摆动到对面为1s，那么计算就比较简单了。如下是最后完成的代码：

public class MyDrawable extends Drawable implements Animatable {

    private static final float DEFAULT_WIDTH = 50.0f;

    private static final float DEFAULT_HEIGHT = 50.0f;

    private static final float DEFAULT_LINE_WIDTH = 2.0f;

    private static final float DEFAULT_BALL_RADIUS = 10.0f;

    private static final float DEFAULT_POINT_RADIUS = 3.0f;

    private static final float DEFAULT_MAX_ANGLE = (float) (2 * Math.PI / 24.0f);

    private static final int DEFAULT_DURATION = 2000;

    private static final int DEFAULT_COLOR = Color.RED;

    private float mWidth;

    private float mHeight;

    private float mMaxAngle;

    private float mLineWidth;

    private float mBallRadius;

    private float mFixedPointRadius;

    private float mLineLength;

    private float mCurrentX;

    private float mCurrentY;

    private int mDuration;

    private Paint mPaint;

    private ValueAnimator mAnimator;

    private ValueAnimator.AnimatorUpdateListener mAnimatorUpdateListener;

    public MyDrawable(Context context) {
        // 设置长宽
        mWidth = dp2px(context, DEFAULT_WIDTH);
        mHeight = dp2px(context, DEFAULT_HEIGHT);
        // 线的粗细
        mLineWidth = dp2px(context, DEFAULT_LINE_WIDTH);
        // 球的半径
        mBallRadius = dp2px(context, DEFAULT_BALL_RADIUS);
        // 固定点的半径
        mFixedPointRadius = dp2px(context, DEFAULT_POINT_RADIUS);
        // 线的长度
        mLineLength = dp2px(context, DEFAULT_WIDTH * 0.75f);
        // 设置最大角度
        mMaxAngle = DEFAULT_MAX_ANGLE;
        // 设置周期
        mDuration = DEFAULT_DURATION;
        // 设置属性动画参数
        mAnimator = new ValueAnimator();
        mAnimator = ValueAnimator.ofFloat(0.0f, 1.0f);
        mAnimator.setRepeatCount(ValueAnimator.INFINITE);
        mAnimator.setDuration(DEFAULT_DURATION);
        mAnimator.setDuration(mDuration);
        mAnimator.setRepeatMode(ValueAnimator.RESTART);
        mAnimator.setInterpolator(new LinearInterpolator());
        // 设置画笔参数
        mPaint = new Paint();
        mPaint.setColor(DEFAULT_COLOR);
        mPaint.setAntiAlias(true);
        // 设置动画的回调
        mAnimatorUpdateListener = new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                calculate((float) animation.getAnimatedValue());
                invalidateSelf();
            }
        };
    }

    @Override
    public void start() {
        mAnimator.addUpdateListener(mAnimatorUpdateListener);
        mAnimator.start();
    }

    @Override
    public void stop() {
        mAnimator.removeUpdateListener(mAnimatorUpdateListener);
        mAnimator.end();
    }

    @Override
    public boolean isRunning() {
        return mAnimator.isRunning();
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        int saveCount = canvas.save();
        float centerX = mWidth / 2.0f;
        float centerY = 0;
        // 画固定点
        mPaint.setStrokeWidth(mFixedPointRadius * 2);
        RectF pointRectF = new RectF(centerX - mFixedPointRadius, centerY - mFixedPointRadius, centerX + mFixedPointRadius, centerY + mFixedPointRadius);
        canvas.drawArc(pointRectF, 0, 360, true, mPaint);
        // 画线
        mPaint.setStrokeWidth(mLineWidth);
        canvas.drawLine(mWidth / 2.0f, 0, mCurrentX, mCurrentY, mPaint);
        // 画小球
        RectF ballRectF = new RectF(mCurrentX - mBallRadius, mCurrentY - mBallRadius, mCurrentX + mBallRadius, mCurrentY + mBallRadius);
        mPaint.setStrokeWidth(mBallRadius * 2);
        canvas.drawArc(ballRectF, 0, 360, true, mPaint);
        canvas.restoreToCount(saveCount);
    }

    @Override
    public void setAlpha(int alpha) {
        mPaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {
        mPaint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    // 获取默认的高度
    @Override
    public int getIntrinsicHeight() {
        return (int) mHeight;
    }

    // 获取默认的宽度
    @Override
    public int getIntrinsicWidth() {
        return (int) mWidth;
    }

    public float dp2px(Context context, float dpValue) {
        float scale = context.getResources().getDisplayMetrics().density;
        return dpValue * scale;
    }

    private void calculate(float animatedValue) {
        float currentAngle = (float) (-Math.cos(animatedValue * Math.PI * 2) * mMaxAngle);
        mCurrentX = (float) (mWidth / 2.0f + mLineLength * Math.sin(currentAngle));
        mCurrentY = (float) (mLineLength * Math.cos(currentAngle));
    }
}

这个自定控件的大致雏形已经有了，那么我们来看下效果吧。（录制帧数不是很高，没有完全展示效果）

1.gif

这里大家应该已经明白一个自定义的Drawable应该怎么写了，主要的逻辑都在draw方法中，动画是由属性动画提供。

做一些修饰

1.gif

项目地址

https://github.com/twinsnan0/PendulumDrawable

最后编辑于：2017.12.04 14:52:23

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,602评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,442评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,878评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,306评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,330评论 5赞 373
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,071评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,382评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,006评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,512评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,965评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,094评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,732评论 4赞 323
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,283评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,286评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,512评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,536评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,828评论 2赞 345