最近手頭有些時間，就逛逛知乎看看有什么好玩的。結(jié)果發(fā)現(xiàn)一個帖子說是冷門網(wǎng)站的，就進去看了看，結(jié)果發(fā)現(xiàn)一個有趣的網(wǎng)站: codewars
個人感覺這是個挺有趣的網(wǎng)站，它里面有很多種語言，用戶可以選擇自己想要挑戰(zhàn)的語言，糾錯！然后里面也有互動社區(qū)，同一道題，往往會有多個解法，可以在社區(qū)里看到別人成熟簡潔的解題方式和思路，這也是對個人編程能力的一種提升。
然后就說說為什么會想要做這么一個自定義View吧，在玩codewars的過程中，我發(fā)現(xiàn)它左上角有個有趣的圖標，就是這個
codewars.png
當網(wǎng)頁有刷新的時候，這個圖標就像風扇一樣轉(zhuǎn)呀轉(zhuǎn)，嘿嘿，還挺有趣，于是，自己也想著做一個出來。
然后我仿著做著一個出來，效果是這樣的。
GIF.gif
啊~說到這個GIF我要吐槽一下了，真真啊，第一次錄GIF，各種不順利，不是效果出不來就不理想，最后調(diào)呀調(diào)，錄啊錄，最后才選擇這一個上傳的。好了，廢話不多說，先說說我的實現(xiàn)思路吧。
實現(xiàn)思路
- 先畫外面的圓角矩形
- 再畫中間那個小圓圈
- 最后畫扇葉
- 讓扇葉轉(zhuǎn)起來
view的測量部分就不介紹了，都是常規(guī)代碼。我就說說里面扇葉的部分和控制扇葉轉(zhuǎn)動以及轉(zhuǎn)動速度這部分吧。
canvas.rotate(-rotateDegree, mWidth / 2, mHeight / 2);//控制風扇轉(zhuǎn)速
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);//控制風扇轉(zhuǎn)動
一開始先旋轉(zhuǎn)一下畫布，是為了使扇葉有個旋轉(zhuǎn)偏移量，已制造出旋轉(zhuǎn)的效果，同時還能控制轉(zhuǎn)速的效果。
for循環(huán)內(nèi)部就是畫出四片扇葉。
然后handler呢，主要是用來持續(xù)刷新view，已實現(xiàn)轉(zhuǎn)動的效果。
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;//內(nèi)圓半徑
private int fanRadius;//畫風扇葉的半徑
private int fanCount = 4;//扇葉數(shù)
//畫圖相關(guān)
private Paint bgPaint;//畫底色和畫風扇
private int bgColor;
private Paint circlePaint;//內(nèi)圓畫筆
private int circleColor;
private RectF rect;//外部圓角矩形
private RectF rectFan;//扇葉畫圖范圍
private int rotateDegree = 0;//旋轉(zhuǎn)角度，用于旋轉(zhuǎn)畫布，實現(xiàn)動態(tài)旋轉(zhuǎn)效果
private int speed = 10;//旋轉(zhuǎn)速率
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 {
//如果是其他兩個模式，先設(shè)置一個默認大小值 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>
恩，然后就大概這么多吧。
總結(jié)
總的來說，這個自定義view差不多已經(jīng)是實現(xiàn)codewars的那個圖標效果了，但是還是有一些沒能實現(xiàn)，比如它中間并不是一個圓，而是像花瓣一樣的。
整個過程花了差不多一天的時間，代碼也有許多需要優(yōu)化的地方，希望大家多多指教。
