Android UI-自定义Drawable（二）

作者: twinsnan | 来源:发表于2016-11-29 19:12 被阅读1997次

概述

上一篇我们已经讲到了一个开源框架如何实现了自定义的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

Android UI-自定义Drawable（二）

概述

继承Drawable

实现Animatable

View

Drawable

做一些修饰

项目地址

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

android