最近手头有些时间，就逛逛知乎看看有什么好玩的。结果发现一个帖子说是冷门网站的，就进去看了看，结果发现一个有趣的网站: codewars
个人感觉这是个挺有趣的网站，它里面有很多种语言，用户可以选择自己想要挑战的语言，纠错！然后里面也有互动社区，同一道题，往往会有多个解法，可以在社区里看到别人成熟简洁的解题方式和思路，这也是对个人编程能力的一种提升。
然后就说说为什么会想要做这么一个自定义View吧，在玩codewars的过程中，我发现它左上角有个有趣的图标，就是这个
codewars.png
当网页有刷新的时候，这个图标就像风扇一样转呀转，嘿嘿，还挺有趣，于是，自己也想着做一个出来。
然后我仿着做着一个出来，效果是这样的。
GIF.gif
啊~说到这个GIF我要吐槽一下了，真真啊，第一次录GIF，各种不顺利，不是效果出不来就不理想，最后调呀调，录啊录，最后才选择这一个上传的。好了，废话不多说，先说说我的实现思路吧。
实现思路
- 先画外面的圆角矩形
- 再画中间那个小圆圈
- 最后画扇叶
- 让扇叶转起来
view的测量部分就不介绍了，都是常规代码。我就说说里面扇叶的部分和控制扇叶转动以及转动速度这部分吧。
canvas.rotate(-rotateDegree, mWidth / 2, mHeight / 2);//控制风扇转速
for (int i = 0; i < fanCount; i++) {
canvas.drawArc(rectFan, -90, -180, true, bgPaint);
canvas.rotate(90, mWidth / 2, mHeight / 2);}
if (running)
rotateHandler.sendEmptyMessageDelayed(1, 10);//控制风扇转动
一开始先旋转一下画布，是为了使扇叶有个旋转偏移量，已制造出旋转的效果，同时还能控制转速的效果。
for循环内部就是画出四片扇叶。
然后handler呢，主要是用来持续刷新view，已实现转动的效果。
FanLoading.java
package com.kenny.fcmpushtest.UI.customView;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.View;
import com.kenny.fcmpushtest.R;
/**
* Created by Kenny on 2016/10/19 10:33.
* Desc：
*/
public class FanLoading extends View {
private static final String TAG = FanLoading.class.getSimpleName();
private int mWidth;
private int mHeight;
private int defaultWidth = 200;
private int defaultHeight = 200;
private int withinRadius;//内圆半径
private int fanRadius;//画风扇叶的半径
private int fanCount = 4;//扇叶数
//画图相关
private Paint bgPaint;//画底色和画风扇
private int bgColor;
private Paint circlePaint;//内圆画笔
private int circleColor;
private RectF rect;//外部圆角矩形
private RectF rectFan;//扇叶画图范围
private int rotateDegree = 0;//旋转角度，用于旋转画布，实现动态旋转效果
private int speed = 10;//旋转速率
private boolean running;
private Handler rotateHandler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
if (!running)
return;
rotateDegree += speed;
if (rotateDegree == Integer.MAX_VALUE)
rotateDegree = 0;
postInvalidate();
}
};
public FanLoading(Context context) {
this(context, null);
}
public FanLoading(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public FanLoading(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.FanLoading);
bgColor = ta.getColor(R.styleable.FanLoading_rectBackgroundColor, Color.parseColor("#982C22"));
circleColor = ta.getColor(R.styleable.FanLoading_circleColor, Color.parseColor("#ff0000"));
speed = ta.getInt(R.styleable.FanLoading_fanSpeed, 10);
running = ta.getBoolean(R.styleable.FanLoading_autoStart, false);
ta.recycle();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
mWidth = getMyDefaultSize(defaultWidth, widthMeasureSpec);
mHeight = getMyDefaultSize(defaultHeight, heightMeasureSpec);
withinRadius = mWidth / 2 - 20;
fanRadius = withinRadius - 10;
setMeasuredDimension(mWidth, mHeight);
init();
}
private void init() {
bgPaint = new Paint();
bgPaint.setColor(bgColor);
bgPaint.setAntiAlias(true);
bgPaint.setStyle(Paint.Style.FILL_AND_STROKE);
circlePaint = new Paint();
circlePaint.setColor(circleColor);
circlePaint.setAntiAlias(true);
circlePaint.setStyle(Paint.Style.FILL_AND_STROKE);
rect = new RectF(0, 0, mWidth, mHeight);
float left = mWidth / 2 - fanRadius / 2;
float top = mHeight / 2 - fanRadius;
float right = mWidth / 2 + fanRadius / 2;
float bottom = mHeight / 2;
rectFan = new RectF(left, top, right, bottom);
}
private int getMyDefaultSize(int size, int measureSpec) {
int result = size;
//获得测量模式
int specMode = View.MeasureSpec.getMode(measureSpec);
//获得测量大小
int specSize = View.MeasureSpec.getSize(measureSpec);
//判断模式是否是 EXACTLY
if (specMode == View.MeasureSpec.EXACTLY) {
//如果模式是 EXACTLY 则直接使用specSize的测量大小
result = specSize;
} else {
//如果是其他两个模式，先设置一个默认大小值 200
//如果是 AT_MOST 也就是 wrap_content 的话，就取默认值 200 和 specSize 中小的一个为准。
if (specMode == View.MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
return result;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawRoundRect(rect, 20, 20, bgPaint);
canvas.drawCircle(mWidth / 2, mHeight / 2, (mHeight / 2) - 20, circlePaint);
canvas.rotate(-rotateDegree, mWidth / 2, mHeight / 2);
for (int i = 0; i < fanCount; i++) {
canvas.drawArc(rectFan, -90, -180, true, bgPaint);
canvas.rotate(90, mWidth / 2, mHeight / 2);
}
if (running)
rotateHandler.sendEmptyMessageDelayed(1, 10);
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
running = false;
}
public void start() {
running = true;
postInvalidate();
}
public void stop() {
running = false;
rotateHandler.removeMessages(1);
}
public void setRectBackgroundColor(int color) {
bgColor = color;
bgPaint.setColor(bgColor);
postInvalidate();
}
public void setCircleColor(int color) {
circleColor = color;
circlePaint.setColor(circleColor);
postInvalidate();
}
public void setSpeed(int s) {
speed = s;
}
public boolean isRunning() {
return running == true;
}
}
自定义属性部分
attr.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="FanLoading">
<attr name="rectBackgroundColor" format="color" />
<attr name="circleColor" format="color" />
<attr name="fanSpeed" format="integer" />
<attr name="autoStart" format="boolean" />
</declare-styleable>
</resources>
恩，然后就大概这么多吧。
总结
总的来说，这个自定义view差不多已经是实现codewars的那个图标效果了，但是还是有一些没能实现，比如它中间并不是一个圆，而是像花瓣一样的。
整个过程花了差不多一天的时间，代码也有许多需要优化的地方，希望大家多多指教。
网友评论