項(xiàng)目地址：LeafLoadingView
開(kāi)始實(shí)踐之前，請(qǐng)關(guān)閉硬件加速捞挥、關(guān)閉硬件加速敏沉、關(guān)閉硬件加速。
下面主要分析一下這個(gè)動(dòng)畫(huà)進(jìn)度條的圖形計(jì)算和繪制：
- 左邊弧形部分的繪制
- 樹(shù)葉旋轉(zhuǎn)和飛行的繪制
- 風(fēng)扇的旋轉(zhuǎn)繪制
- 進(jìn)度條的繪制
- 完成時(shí)的文字繪制
完成了上面四點(diǎn)贸毕，這個(gè)進(jìn)度條就已經(jīng)完成了大半，但是如果想要更精細(xì)夜赵，還需要下面的計(jì)算：
- 樹(shù)葉數(shù)量明棍、飛行速度和進(jìn)度條增長(zhǎng)速率關(guān)聯(lián)
- 樹(shù)葉飛到進(jìn)度條，進(jìn)度條才增長(zhǎng)
- 風(fēng)扇轉(zhuǎn)動(dòng)速度和進(jìn)度條增長(zhǎng)速率關(guān)聯(lián)
- 樹(shù)葉的振幅寇僧、周期摊腋、旋轉(zhuǎn)速率、起始時(shí)間浮動(dòng)
- 完成后文字動(dòng)畫(huà)
- 增加測(cè)量方法
- 暴露控制接口
看了上面應(yīng)該思路就很清楚了嘁傀，基本都是之前學(xué)習(xí)到的東西兴蒸，剩下的就是動(dòng)手做了。
一细办、繪制背景
首先橙凳，我們需要繪制這整個(gè)背景。這個(gè)背景笑撞，通常我們會(huì)用一個(gè)半圓加一個(gè)矩形組合而成岛啸。由于顏色相同，我們可以直接繪制一個(gè)圓和一個(gè)矩形娃殖，圓的一部分會(huì)被矩形覆蓋
//繪制圓
canvas.drawCircle(mBgCircleRadio, mBgCircleRadio, mBgCircleRadio, mBgPaint);
//繪制矩形
canvas.drawRect(mBgCircleRadio, 0, mBgWidth, mBgHeight, mBgPaint);
當(dāng)然，對(duì)于這樣的圖形议谷，我們也可以一筆繪制出來(lái)炉爆。這里需要利用 Path 類來(lái)繪制出整個(gè)圖形的輪廓，再利用畫(huà)布繪制卧晓。
//描出輪廓
mPath = new Path();
RectF rectF = new RectF(mOutBoundWidth, mOutBoundWidth, 2 * mBgCircleProgressRadio + mOutBoundWidth, mBgHeight - mOutBoundWidth);
mPath.addArc(rectF, 90, 180);
mPath.lineTo(mBgWidth, mOutBoundWidth);
mPath.lineTo(mBgWidth, mBgProgressHeight + mOutBoundWidth);
mPath.lineTo(mBgCircleRadio, mBgProgressHeight + mOutBoundWidth);
//繪制不規(guī)則圖形
canvas.drawPath(mPath,mBgPaint);
按照上面的方法芬首，可以繪制出這樣的圖形：
之后，我們用相同的辦法逼裆，也可以繪制出進(jìn)度條的部分郁稍，如下圖：
由于進(jìn)度條是不斷變化的，這個(gè)部分的繪制會(huì)不斷重復(fù)胜宇，簡(jiǎn)單的實(shí)現(xiàn)這個(gè)過(guò)程耀怜，可以通過(guò)每次通過(guò)傳入的 progress 計(jì)算長(zhǎng)度恢着，然后繪制相應(yīng)長(zhǎng)度的進(jìn)度條。但是這里财破，我們不這樣操作掰派。為了達(dá)到學(xué)習(xí)的目的，這里我們使用畫(huà)布中已 clip 開(kāi)頭的方法：clipPath\clipRect 左痢。
這里簡(jiǎn)單說(shuō)明下這個(gè)方法：
clip 意為修剪靡羡，這里以 clip 開(kāi)頭的方法都是對(duì)畫(huà)布進(jìn)行裁剪操作。裁剪后俊性，繪制到裁剪區(qū)域以外的部分都不會(huì)顯示略步。
因此這里我們把這個(gè)繪制過(guò)程利用 Picture 錄制起來(lái)，每次繪制的時(shí)候利用 clip 方法裁剪這個(gè)錄像就可以了定页。將 Picture 轉(zhuǎn)化為 PictureDrawable 后趟薄，利用 setBounds 方法會(huì)間接調(diào)用到 clip 方法，因此拯勉，我們只需要計(jì)算要繪制的長(zhǎng)度竟趾，就可以控制進(jìn)度顯示了。
private void initPicture() {
if (mProgressPicture == null) {
mProgressPicture = new Picture();
Canvas canvas = mProgressPicture.beginRecording(mBgWidth, mBgHeight);
canvas.save();
canvas.drawPath(mPath,mProgressPaint);
canvas.restore();
mProgressPicture.endRecording();
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
PictureDrawable proPd = new PictureDrawable(mProgressPicture);
proPd.setBounds(0, 0, width, mBgHeight);
proPd.draw(canvas);
}
二宫峦、繪制葉子
葉子的繪制部分岔帽，其實(shí)是整個(gè) LoadingView 的核心，這個(gè)葉子繪制的流暢與否關(guān)乎整個(gè)視圖的美觀度导绷。
首先創(chuàng)建一個(gè)類用于存放葉子的屬性：
static class Leaf {
//y = A Sin(w * x + Q) + k
// 葉子振幅 計(jì)算公式為：AmplitudeType(類型) * ApmlitudeDiff(振幅差值) + 默認(rèn)值
private static final int A_L = -1;
private static final int A_M = 0;
private static final int A_H = 1;
// 旋轉(zhuǎn)方向
private static final int Rotate_D_ZH = -1;
private static final int Rotate_D_F = 1;
//振幅類型
private int amplitudeType;
//周期
private int cycleTime;
//位置
private int x, y;
//初始相位
private float Q;
//開(kāi)始旋轉(zhuǎn)的時(shí)間
private long startT;
//旋轉(zhuǎn)初始角度
private int rotateInit;
//旋轉(zhuǎn)角度
private int rotateAngle;
//旋轉(zhuǎn)方向
private int rotateDirection;
}
之后我們需要一個(gè)葉子工廠犀勒，用于創(chuàng)建葉子：
static class LeafFactory {
public static final int DEFAULT_SIZE = 7;
public static Leaf generateLeaf() {
Random random = new Random();
Leaf leaf = new Leaf();
//隨機(jī)值使葉子在產(chǎn)生時(shí)有先后順序
long addTime = random.nextInt(CYCLE_TIME);
leaf.startT = System.currentTimeMillis() + addTime;
//初始旋轉(zhuǎn)角度
leaf.rotateInit = random.nextInt(360);
//隨機(jī)初始旋轉(zhuǎn)方向
leaf.rotateDirection = (int) Math.pow(-1, random.nextInt(1));
//隨機(jī)振幅
leaf.amplitudeType = random.nextInt(2) - 1;
//隨機(jī)周期
leaf.cycleTime = random.nextInt(1500) + mCycleTime;
//隨機(jī)相位
leaf.Q = (float) (2 * Math.PI * random.nextInt(3) / 6);
return leaf;
}
public static List<Leaf> generateLeaves(int size) {
List<Leaf> leaves = new ArrayList<>();
for (int i = 0; i < size; i++) {
Leaf leaf = generateLeaf();
leaves.add(leaf);
}
return leaves;
}
public static List<Leaf> generateLeaves() {
return generateLeaves(DEFAULT_SIZE);
}
}
好了，葉子信息已經(jīng)準(zhǔn)備好了妥曲。接下來(lái)贾费，需要我們?cè)诔跏蓟椒ㄖ校跏蓟@些值：
public void init(Context context){
//初始化畫(huà)筆
initPaint();
//獲取葉子
initLeafInfo();
//初始化圖片
initBitmap(context);
//初始化尺寸
initDimens();
//初始化路徑
initPath();
//初始化錄像
initPicture();
}
private void initLeafInfo() {
if (mLeafInfo == null) {
mLeafInfo = new ArrayList<>();
mLeafInfo = LeafFactory.generateLeaves(6);
}
}
private void initBitmap(Context context) {
mLeafBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.leaf);
mLeafWidth = mLeafBitmap.getWidth();
mLeafHeight = mLeafBitmap.getHeight();
}
現(xiàn)在數(shù)據(jù)都已經(jīng)準(zhǔn)備好了檐盟，我們只需要在 onDraw 方法中進(jìn)行相應(yīng)的繪制工作就可以了褂萧。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawLoadingBg(canvas);
drawLeafFly(canvas);
drawLoadingProgress(canvas);
}
private void drawLeafFly(Canvas canvas) {
long currentT = System.currentTimeMillis();
canvas.save();
canvas.clipPath(mPath);
canvas.translate(mBgWidth, mBgCircleRadio);
for (int i = 0; i < mLeafInfo.size(); i++) {
Leaf leaf = mLeafInfo.get(i);
if (currentT > leaf.startT && leaf.startT != 0) {
canvas.save();
//計(jì)算相對(duì)原點(diǎn)的 x y ，將數(shù)據(jù)存入 leaf 中
generateLeafLocation(leaf);
//計(jì)算相對(duì)原點(diǎn)的旋轉(zhuǎn)角度葵萎，將數(shù)據(jù)存入 leaf 中
generateLeafRotation(leaf);
//利用 matrix 進(jìn)行繪制
Matrix matrix = new Matrix();
matrix.postTranslate(leaf.x, leaf.y);
matrix.postRotate(leaf.rotateAngle, leaf.x + mLeafWidth / 2, leaf.y + mLeafHeight / 2);
canvas.drawBitmap(mLeafBitmap, matrix, mBitmapPaint);
canvas.restore();
} else {
continue;
}
}
canvas.restore();
}
private void generateLeafRotation(Leaf leaf) {
long intervalTime = System.currentTimeMillis() - leaf.startT;
if (intervalTime < 0) {
return;
} else if (intervalTime > leaf.cycleTime) {
leaf.startT = System.currentTimeMillis()
+ new Random().nextInt(leaf.cycleTime);
}
float fraction = intervalTime % mRotateTime / (float) mRotateTime;
float angle = fraction * 360;
leaf.rotateAngle = (int) (leaf.rotateInit + leaf.rotateDirection * angle);
}
private void generateLeafLocation(Leaf leaf) {
long intervalTime = System.currentTimeMillis() - leaf.startT;
if (intervalTime < 0) {
return;
} else if (intervalTime > leaf.cycleTime) {
leaf.startT = System.currentTimeMillis()
+ new Random().nextInt(leaf.cycleTime);
}
float fraction = (float) intervalTime % leaf.cycleTime / leaf.cycleTime;
leaf.x = (int) (-mBgProgressWidth * fraction);
leaf.y = calLocationY(leaf);
}
private int calLocationY(Leaf leaf) {
// y = A Sin(wx+Q) + k
int A = leaf.amplitudeType * mApmlitudeDiff + mAmplitudeMid;
double w = ((Math.PI * 2) / (mBgProgressWidth));
return (int) (A * Math.sin(w * leaf.x + leaf.Q));
}
繪制完葉子之后导犹，記得要把進(jìn)度條繪制和 progress 關(guān)聯(lián)起來(lái)，否則會(huì)看不到葉子羡忘。另外在 onDraw 繪制結(jié)束后需要調(diào)用 postInvalidate 讓它自動(dòng)重新繪制谎痢，以保證動(dòng)畫(huà)的持續(xù)變化。
這樣修改后卷雕，我們可以得到這樣的效果：
三节猿、風(fēng)扇繪制
風(fēng)扇這個(gè)部分其實(shí)是比較困難的，如果可以漫雕，其實(shí)在繪制完上面的部分之后滨嘱，利用自定義 ViewGroup 組合一下 LeafLoadingView 和一個(gè) 風(fēng)扇 ImageView 就可以完成得很好峰鄙。但是如果一定要繪制到一個(gè)控件中去，也不是沒(méi)有辦法九孩。
風(fēng)扇可以分為這樣幾個(gè)部分：
- 1.兩個(gè)圓
- 2.風(fēng)扇
- 3.完成時(shí)的文字
按照這樣的順序先馆，我們可以馬上進(jìn)行繪制：
//繪制風(fēng)扇
private void drawFan(Canvas canvas) {
canvas.save();
canvas.translate(mBgWidth, mBgCircleRadio);
//白圓
mFanBgPaint.setColor(Color.WHITE);
canvas.drawCircle(0, 0, mBgCircleRadio, mFanBgPaint);
//橙圓
mFanBgPaint.setColor(Color.parseColor(COLOR_PROGRESS));
canvas.drawCircle(0, 0, mBgCircleRadio - mFanOutBoundWidth, mFanBgPaint);
if (mProgress >= 100) {//完成文字
//獲取文字尺寸
Rect rect = new Rect();
mTextPaint.getTextBounds(mTextComplete,-0,mTextComplete.length(),rect);
canvas.drawText(mTextComplete, -(rect.right-rect.left)/2, (rect.bottom - rect.top)/2,mTextPaint);
}else{//風(fēng)扇
//計(jì)算旋轉(zhuǎn)角度
mFanRotate = (int) (System.currentTimeMillis() % mFanCycleTime / (float)mFanCycleTime * 360);
canvas.rotate(mFanRotate, 0, 0);
//圓和風(fēng)扇間留空位置 == 2
int dx = mBgCircleProgressRadio - 2;
canvas.translate(-dx, 0);
//縮放畫(huà)布使得風(fēng)扇中心可以繪制在圓心上
canvas.scale((float) (dx * 2) / (float) mFanWidth, (float) (dx * 2) / (float) mFanHeight);
canvas.drawBitmap(mFanBitmap, 0, -mFanHeight / 2, mBitmapPaint);
}
canvas.restore();
}
現(xiàn)在獲得的效果大致是這樣的：
四、一些優(yōu)化
1) 進(jìn)度條顯示
現(xiàn)在進(jìn)度條的顯示還是比較跳躍的直接顯示躺彬，可以給它增加過(guò)渡效果煤墙。為此，我們需要添加幾個(gè)屬性：
//設(shè)置新進(jìn)度時(shí)的舊進(jìn)度
private float mOldProgress;
//設(shè)置新進(jìn)度時(shí)的時(shí)間
private long mProgressSetTime;
//進(jìn)度過(guò)渡動(dòng)畫(huà)的繪制完成時(shí)間
private float mIntervalDrawTime = 200;
我們?cè)?setProgress 方法中獲取上面屬性宪拥，并且在繪制方法中利用新屬性計(jì)算應(yīng)該繪制的長(zhǎng)度：
//繪制橙色滾動(dòng)條
private void drawLoadingProgress(Canvas canvas) {
int width = generateProgressWidth();
PictureDrawable proPd = new PictureDrawable(mProgressPicture);
proPd.setBounds(0, 0, width, mBgHeight);
proPd.draw(canvas);
}
//根據(jù)屬性計(jì)算應(yīng)繪制的進(jìn)度條長(zhǎng)度
private int generateProgressWidth() {
int result = 0;
long deltaT = System.currentTimeMillis() - mProgressSetTime;
if (deltaT > 0 && mIntervalDrawTime > deltaT) {
float deltaWidth = (mProgress-mOldProgress) / mIntervalDrawTime * deltaT;
result = (int) ((mOldProgress + deltaWidth) / 100f * mBgWidth);
} else {
result = (int) (mProgress / 100f * mBgWidth);
}
return result;
}
public void setProgress(float progress){
this.mOldProgress = this.mProgress;
this.mProgress = progress;
this.mProgressSetTime = System.currentTimeMillis();
postInvalidate();
}
得到效果圖和原來(lái)的還是有很明顯的差別的：
不過(guò)仿野，由于加上動(dòng)畫(huà)， 進(jìn)度條實(shí)際到達(dá)頂端的時(shí)間點(diǎn)有變化她君，因此在繪制完成文字的臨界點(diǎn)也需要改變
//繪制風(fēng)扇
private void drawFan(Canvas canvas) {
canvas.save();
//...
//if (mProgress() >= 100) {//完成文字
if (generateProgressWidth() >= mBgWidth) {//完成文字
//...
} else {//風(fēng)扇
//...
}
canvas.restore();
}
2) Leaf 的旋轉(zhuǎn)速度隨機(jī)
這里主要給 Leaf 類多添加了一個(gè) rotateCycle 屬性脚作，在 LeafFactory 中給這個(gè)屬性賦值為隨機(jī)值，然后在 generateLeafRotation 方法中缔刹，利用 leaf 自身攜帶的屬性進(jìn)行計(jì)算球涛。
private static class Leaf {
//...
//旋轉(zhuǎn)周期
private int rotateCycle;
}
private static class LeafFactory {
private static final int DEFAULT_SIZE = 7;
private static Leaf generateLeaf() {
Random random = new Random();
Leaf leaf = new Leaf();
// ...
//隨機(jī)旋轉(zhuǎn)周期
leaf.rotateCycle = random.nextInt(1000) + ROTATE_TIME;
return leaf;
}
// ...
}
//計(jì)算樹(shù)葉旋轉(zhuǎn)角度
private void generateLeafRotation(Leaf leaf) {
long intervalTime = System.currentTimeMillis() - leaf.startT;
if (intervalTime < 0) {
return;
} else if (intervalTime > leaf.cycleTime) {
leaf.startT = System.currentTimeMillis()
+ new Random().nextInt(leaf.cycleTime);
}
// float fraction = intervalTime % mRotateTime / (float) mRotateTime;
float fraction = intervalTime % leaf.rotateCycle / (float) leaf.rotateCycle;
float angle = fraction * 360;
leaf.rotateAngle = (int) (leaf.rotateInit + leaf.rotateDirection * angle);
}
為了顯示效果方便，我把飛行速度加快校镐，增加了葉子數(shù)量亿扁，并且關(guān)閉了進(jìn)度條的繪制
3) 葉子的產(chǎn)生數(shù)量和進(jìn)度條的增長(zhǎng)速度關(guān)聯(lián)
現(xiàn)在葉子信息是由最開(kāi)始初始化的，也就是說(shuō)鸟廓，雖然我們看到的許多葉子从祝，但是事實(shí)上，它們都是最開(kāi)始我們初始化好的葉子引谜。
如果最開(kāi)始只初始化了一個(gè)葉子牍陌，那么進(jìn)度條上永遠(yuǎn)只會(huì)出現(xiàn)一片，同理员咽，如果初始化了十片毒涧，那么在葉子的一個(gè)運(yùn)動(dòng)周期上，總是會(huì)有十片葉子同時(shí)出現(xiàn)的情況贝室。
想要讓數(shù)量和進(jìn)度條增長(zhǎng)的速率相關(guān)聯(lián)契讲，就需要終止重復(fù)繪制這樣的機(jī)制，那么在繪制結(jié)束的時(shí)候档玻，就需要把這片葉子移除怀泊。在進(jìn)度變化的時(shí)候茫藏，根據(jù)進(jìn)度變化速率來(lái)產(chǎn)生相應(yīng)的葉子加入繪制误趴。
首先，先修改 setProgress 方法务傲，在設(shè)置進(jìn)度的時(shí)候添加樹(shù)葉：
public void setProgress(float progress) {
//如果進(jìn)度條過(guò)渡還未繪制完成凉当，則跳過(guò)這個(gè)變化
if (System.currentTimeMillis() - mProgressSetTime > mIntervalDrawTime || progress >= 100) {
//保存舊進(jìn)度
this.mOldProgress = this.mProgress;
//保存新進(jìn)度
this.mProgress = progress;
//保存設(shè)置時(shí)間
this.mProgressSetTime = System.currentTimeMillis();
//添加葉子
addLeaf();
Log.i(TAG, "setProgress: delta=" + (mProgress - mOldProgress));
postInvalidate();
}
}
private void addLeaf() {
float deltaProgress = mProgress - mOldProgress;
if (deltaProgress > 0 && mLeafMax > mLeafInfo.size()) {
int addNum = 1;
if (8 > deltaProgress && deltaProgress > 5) {
addNum = 2;
} else if (deltaProgress > 8) {
addNum = 3;
}
if (addNum > (mLeafMax - mLeafInfo.size())) {// 不能超過(guò)最大數(shù)量
addNum = mLeafMax - mLeafInfo.size();
}
mLeafInfo.addAll(LeafFactory.generateLeaves(addNum));
}
}
之后枣申，我們需要把已經(jīng)完成一個(gè)周期的葉子移除
private void drawLeafFly(Canvas canvas) {
// ...
canvas.save();
canvas.clipPath(mPath);
canvas.translate(mBgWidth, mBgCircleRadio);
for (int i = 0; i < mLeafInfo.size(); ) {// 由于移除葉子下標(biāo)變化，不再自加看杭，否則會(huì)閃爍
// ...drawLeaf
//移除已經(jīng)飛到末端的樹(shù)葉
if (isFlyAway(leaf)) {
mLeafInfo.remove(i);
if (mLeafInfo.size() == 0) {//保持至少有一片樹(shù)葉
Log.d(TAG, "drawLeafFly: addLeaf");
mLeafInfo.add(LeafFactory.generateLeaf());
}
} else {
i++;
}
}
canvas.restore();
}
4) 完成時(shí)忠藤，風(fēng)扇縮小，出現(xiàn) 100% 文字的動(dòng)畫(huà)
這里可以看到楼雹，就是一個(gè)在一定時(shí)間內(nèi)完成縮小放大繪制的操作模孩。
由于縮小放大操作需要用到進(jìn)度剛剛到達(dá) 100 時(shí)的時(shí)間，因此贮缅，這里需要加入一個(gè) flag 標(biāo)志當(dāng)前進(jìn)度條狀態(tài)，并用于更新進(jìn)度到達(dá) 100% 的時(shí)間。
下面附上代碼：
//繪制風(fēng)扇
private void drawFan(Canvas canvas) {
//...
if (generateProgressWidth() >= mBgWidth) {//完成文字
if (!bFinishFlag) {//記錄完成時(shí)間
bFinishFlag = true;
mFinishTime = System.currentTimeMillis();
}
//完成后柱搜、切換風(fēng)扇文字動(dòng)畫(huà)
drawCompleteFan(canvas);
drawCompleteText(canvas);
} else {//風(fēng)扇
//...
}
//...
}
private void drawCompleteFan(Canvas canvas) {
long deltaT = System.currentTimeMillis() - mFinishTime;
if (deltaT > mFanIntervalSpeedTime || !bFinishFlag) {
return;
}
canvas.save();
canvas.rotate(mFanRotate, 0, 0);
float dx = (int) ((mBgCircleProgressRadio - 2) * (1 - 1 / mFanIntervalSpeedTime * deltaT));
canvas.translate(-dx, 0);
//縮放畫(huà)布使得風(fēng)扇中心可以繪制在圓心上
canvas.scale((dx * 2) / (float) mFanWidth, (dx * 2) / (float) mFanHeight);
canvas.drawBitmap(mFanBitmap, 0, -mFanHeight / 2, mBitmapPaint);
canvas.restore();
}
private void drawCompleteText(Canvas canvas) {
long deltaT = System.currentTimeMillis() - mFinishTime;
if (!bFinishFlag) {
return;
}
if (deltaT < mFanIntervalAnimTime) {
int textSize = (int) ((DEFAULT_TEXT_SIZE) / mFanIntervalAnimTime * deltaT);
mTextPaint.setTextSize(textSize);
}
//獲取文字尺寸
Rect rect = new Rect();
mTextPaint.getTextBounds(mTextComplete, -0, mTextComplete.length(), rect);
canvas.drawText(mTextComplete, -(rect.right - rect.left) / 2, (rect.bottom - rect.top) / 2, mTextPaint);
}
public void setProgress(float progress) {
if (System.currentTimeMillis() - mProgressSetTime > mIntervalDrawTime
&& System.currentTimeMillis() - mProgressSetTime > mFanIntervalAnimTime) {
//...
//完成標(biāo)志
if (100 > progress) {
bFinishFlag = false;
}
}
}
五佣渴、遺留問(wèn)題
- 效果圖中，風(fēng)扇的旋轉(zhuǎn)也是和增長(zhǎng)速度相關(guān)聯(lián)的桂肌，但是嘗試過(guò)角速度計(jì)算之后数焊，依然不能達(dá)到很好的效果。主要還是數(shù)學(xué)忘得差不多了崎场，有空可以再考慮佩耳。
- 計(jì)算的部分大概容易讓人困惑，實(shí)際上有一部分可以利用 ValueAnimator 代替計(jì)算
- 屬性之間的比例并沒(méi)有仔細(xì)設(shè)置照雁，比如修改了 mBgWidth 后蚕愤，按理說(shuō)完成時(shí) 100% 的字體大小應(yīng)該進(jìn)行相應(yīng)改變，這里也沒(méi)有發(fā)生改變饺蚊∑加眨總之，這種尺寸計(jì)算污呼，從一開(kāi)始也沒(méi)打算做裕坊。哈哈哈哈哈
- 控件的測(cè)量，這個(gè)還是比較簡(jiǎn)單的燕酷，和之前做的幾個(gè)控件一樣測(cè)量就好
- 暴露接口
最終效果：
效果中素材和部分代碼來(lái)自：FROM GA_studio 籍凝，瞎改了部分計(jì)算方法，讓繪制沒(méi)有那么復(fù)雜苗缩，多添加了一些設(shè)置饵蒂。
感謝：GcsSloop 自定義 View 系列
以上。
