Android開源：想送你一款小清新的加載等待 控件
前言
Android開發中，加載等待的需求 很是常見- 本文將手把手教你作 一款 可愛 & 小資風格的加載等待
Android自定義View控件，但願大家會喜歡。
已在
Github開源：Kawaii_LoadingView，歡迎Star！android
目錄
1. 簡介
一款 可愛 、清新 & 小資風格的 Android自定義View控件git
已在
Github開源：Kawaii_LoadingView，歡迎Star！github
2. 應用場景
App 長時間加載等待時，用於提示用戶進度 & 緩解用戶情緒算法
3. 特色
對比市面上的加載等待自定義控件，該控件Kawaii_LoadingView 的特色是：canvas
3.1 樣式清新
- 對比市面上 各類酷炫、眼花繚亂的加載等待自定義控件，該款
Kawaii_LoadingView的 清新 & 小資風格 簡直是一股清流 - 同時，可根據您的
App定位 & 主色進行顏色調整，使得控件更加符合App的形象。具體以下：
3.2 使用簡單
僅須要3步驟 & 配置簡單。數組
具體請看文章：Android開源控件：一款你不可錯過的可愛 & 小資風格的加載等待自定義Viewbash
3.3 二次開發成本低
- 本項目已在
Github上開源：Kawaii_LoadingView - 詳細的源碼分析文檔：具體請看本文的第6節
因此，在其上作二次開發 & 定製化成本很是低。ide
4. 具體使用
具體請看文章：Android開源控件：一款你不可錯過的可愛 & 小資風格的加載等待自定義Viewoop
5. 完整Demo地址
Carson_Ho的Github地址：Kawaii_LoadingView_TestDemo源碼分析
6. 源碼分析
下面，我將手把手教你如何實現這款 可愛 & 小資風格的加載等待Android自定義View控件
6.1 準備說明
- 方格排列說明
- 方塊類型說明
6.2 動畫原理
- 隱藏固定的2個方塊 & 移動方塊繼承其中1個的位置
注：只有外部方塊運動
- 經過 屬性動畫 （平移 + 旋轉 = 組合動畫）改變移動方塊的位置 & 旋轉角度
- 經過調用
invalidate()從新繪製，從而實現動態的動畫效果 - 具體原理圖以下：
6.3 實現步驟
下面我將詳細介紹每一個步驟：
步驟1：初始化動畫屬性
- 屬性說明：
- 具體屬性設置
- 添加屬性文件
attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Kawaii_LoadingView">
<attr name="half_BlockWidth" format="dimension" />
<attr name="blockInterval" format="dimension" />
<attr name="initPosition" format="integer" />
<attr name="isClock_Wise" format="boolean" />
<attr name="lineNumber" format="integer" />
<attr name="moveSpeed" format="integer" />
<attr name="blockColor" format="color" />
<attr name="moveBlock_Angle" format="float" />
<attr name="fixBlock_Angle" format="float" />
<attr name="move_Interpolator" format="reference" />
</declare-styleable>
</resources>
複製代碼
- 具體源碼分析
private void initAttrs(Context context, AttributeSet attrs) {
// 控件資源名稱
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Kawaii_LoadingView);
// 一行的數量(最少3行)
lineNumber = typedArray.getInteger(R.styleable.Kawaii_LoadingView_lineNumber, 3);
if (lineNumber < 3) {
lineNumber = 3;
}
// 半個方塊的寬度（dp）
half_BlockWidth = typedArray.getDimension(R.styleable.Kawaii_LoadingView_half_BlockWidth, 30);
// 方塊間隔寬度（dp）
blockInterval = typedArray.getDimension(R.styleable.Kawaii_LoadingView_blockInterval, 10);
// 移動方塊的圓角半徑
moveBlock_Angle = typedArray.getFloat(R.styleable.Kawaii_LoadingView_moveBlock_Angle, 10);
// 固定方塊的圓角半徑
fixBlock_Angle = typedArray.getFloat(R.styleable.Kawaii_LoadingView_fixBlock_Angle, 30);
// 經過設置兩個方塊的圓角半徑使得兩者不一樣能夠獲得更好的動畫效果哦
// 方塊顏色（使用十六進制代碼，如#33三、#8e8e8e）
int defaultColor = context.getResources().getColor(R.color.colorAccent); // 默認顏色
blockColor = typedArray.getColor(R.styleable.Kawaii_LoadingView_blockColor, defaultColor);
// 移動方塊的初始位置（即空白位置）
initPosition = typedArray.getInteger(R.styleable.Kawaii_LoadingView_initPosition, 0);
// 因爲移動方塊只能是外部方塊，因此這裏須要判斷方塊是否屬於外部方塊 -->關注1
if (isInsideTheRect(initPosition, lineNumber)) {
initPosition = 0;
}
// 動畫方向是否 = 順時針旋轉
isClock_Wise = typedArray.getBoolean(R.styleable.Kawaii_LoadingView_isClock_Wise, true);
// 移動方塊的移動速度
// 注：不建議使用者將速度調得過快
// 由於會致使ValueAnimator動畫對象頻繁重複的建立，存在內存抖動
moveSpeed = typedArray.getInteger(R.styleable.Kawaii_LoadingView_moveSpeed, 250);
// 設置移動方塊動畫的插值器
int move_InterpolatorResId = typedArray.getResourceId(R.styleable.Kawaii_LoadingView_move_Interpolator,
android.R.anim.linear_interpolator);
move_Interpolator = AnimationUtils.loadInterpolator(context, move_InterpolatorResId);
// 當方塊移動後，須要實時更新的空白方塊的位置
mCurrEmptyPosition = initPosition;
// 釋放資源
typedArray.recycle();
}
// 此步驟結束
/**
* 關注1：判斷方塊是否在內部
*/
private boolean isInsideTheRect(int pos, int lineCount) {
// 判斷方塊是否在第1行
if (pos < lineCount) {
return false;
// 是否在最後1行
} else if (pos > (lineCount * lineCount - 1 - lineCount)) {
return false;
// 是否在最後1行
} else if ((pos + 1) % lineCount == 0) {
return false;
// 是否在第1行
} else if (pos % lineCount == 0) {
return false;
}
// 若不在4邊，則在內部
return true;
}
// 回到原處
複製代碼
步驟2：初始化方塊對象 & 之間的關係
private void init() {
// 初始化畫筆
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(blockColor);
// 初始化方塊對象 & 關係 ->>關注1
initBlocks(initPosition);
}
/**
* 關注1
* 初始化方塊對象、之間的關係
* 參數說明：initPosition = 移動方塊的初始位置
*/
private void initBlocks(int initPosition) {
// 1. 建立總方塊的數量（固定方塊） = lineNumber * lineNumber
// lineNumber = 方塊的行數
// fixedBlock = 固定方塊 類 ->>關注2
mfixedBlocks = new fixedBlock[lineNumber * lineNumber];
// 2. 建立方塊
for (int i = 0; i < mfixedBlocks.length; i++) {
// 建立固定方塊 & 保存到數組中
mfixedBlocks[i] = new fixedBlock();
// 對固定方塊對象裏的變量進行賦值
mfixedBlocks[i].index = i;
// 對方塊是否顯示進行判斷
// 若該方塊的位置 = 移動方塊的初始位置，則隱藏；不然顯示
mfixedBlocks[i].isShow = initPosition == i ? false : true;
mfixedBlocks[i].rectF = new RectF();
}
// 3. 建立移動的方塊（1個） ->>關注3
mMoveBlock = new MoveBlock();
mMoveBlock.rectF = new RectF();
mMoveBlock.isShow = false;
// 4. 關聯外部方塊的位置
// 由於外部的方塊序號 ≠ 0、一、2…排列，經過 next變量（指定其下一個），一個接一個鏈接 外部方塊 成圈
// ->>關注4
relate_OuterBlock(mfixedBlocks, isClock_Wise);
}
// 此步驟結束
/**
* 關注2：固定方塊 類（內部類）
*/
private class fixedBlock {
// 存儲方塊的座標位置參數
RectF rectF;
// 方塊對應序號
int index;
// 標誌位：判斷是否須要繪製
boolean isShow;
// 指向下一個須要移動的位置
fixedBlock next;
// 外部的方塊序號 ≠ 0、一、2…排列，經過 next變量（指定其下一個），一個接一個鏈接 外部方塊 成圈
}
// 請回到原處
/**
* 關注3
*：移動方塊類（內部類）
*/
private class MoveBlock {
// 存儲方塊的座標位置參數
RectF rectF;
// 方塊對應序號
int index;
// 標誌位：判斷是否須要繪製
boolean isShow;
// 旋轉中心座標
// 移動時的旋轉中心（X，Y）
float cx;
float cy;
}
// 請回到原處
/**
* 關注4：將外部方塊的位置關聯起來
* 算法思想： 按照第1行、最後1行、第1列 & 最後1列的順序，分別讓每一個外部方塊的next屬性 == 下一個外部方塊的位置，最終對整個外部方塊的位置進行關聯
* 注：須要考慮移動方向變量isClockwise（ 順 Or 逆時針）
*/
private void relate_OuterBlock(fixedBlock[] fixedBlocks, boolean isClockwise) {
int lineCount = (int) Math.sqrt(fixedBlocks.length);
// 狀況1：關聯第1行
for (int i = 0; i < lineCount; i++) {
// 位於最左邊
if (i % lineCount == 0) {
fixedBlocks[i].next = isClockwise ? fixedBlocks[i + lineCount] : fixedBlocks[i + 1];
// 位於最右邊
} else if ((i + 1) % lineCount == 0) {
fixedBlocks[i].next = isClockwise ? fixedBlocks[i - 1] : fixedBlocks[i + lineCount];
// 中間
} else {
fixedBlocks[i].next = isClockwise ? fixedBlocks[i - 1] : fixedBlocks[i + 1];
}
}
// 狀況2：關聯最後1行
for (int i = (lineCount - 1) * lineCount; i < lineCount * lineCount; i++) {
// 位於最左邊
if (i % lineCount == 0) {
fixedBlocks[i].next = isClockwise ? fixedBlocks[i + 1] : fixedBlocks[i - lineCount];
// 位於最右邊
} else if ((i + 1) % lineCount == 0) {
fixedBlocks[i].next = isClockwise ? fixedBlocks[i - lineCount] : fixedBlocks[i - 1];
// 中間
} else {
fixedBlocks[i].next = isClockwise ? fixedBlocks[i + 1] : fixedBlocks[i - 1];
}
}
// 狀況3：關聯第1列
for (int i = 1 * lineCount; i <= (lineCount - 1) * lineCount; i += lineCount) {
// 如果第1列最後1個
if (i == (lineCount - 1) * lineCount) {
fixedBlocks[i].next = isClockwise ? fixedBlocks[i + 1] : fixedBlocks[i - lineCount];
continue;
}
fixedBlocks[i].next = isClockwise ? fixedBlocks[i + lineCount] : fixedBlocks[i - lineCount];
}
// 狀況4：關聯最後1列
for (int i = 2 * lineCount - 1; i <= lineCount * lineCount - 1; i += lineCount) {
// 如果最後1列最後1個
if (i == lineCount * lineCount - 1) {
fixedBlocks[i].next = isClockwise ? fixedBlocks[i - lineCount] : fixedBlocks[i - 1];
continue;
}
fixedBlocks[i].next = isClockwise ? fixedBlocks[i - lineCount] : fixedBlocks[i + lineCount];
}
}
// 請回到原處
複製代碼
步驟3：設置方塊初始位置
// 該步驟寫在onSizeChanged（）
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
// 調用時刻：onCreate以後onDraw以前調用；view的大小發生改變就會調用該方法
// 使用場景：用於屏幕的大小改變時，須要根據屏幕寬高來決定的其餘變量能夠在這裏進行初始化操做
super.onSizeChanged(w, h, oldw, oldh);
int measuredWidth = getMeasuredWidth();
int measuredHeight = getMeasuredHeight();
// 1. 設置移動方塊的旋轉中心座標
int cx = measuredWidth / 2;
int cy = measuredHeight / 2;
// 2. 設置固定方塊的位置 ->>關注1
fixedBlockPosition(mfixedBlocks, cx, cy, blockInterval, half_BlockWidth);
// 3. 設置移動方塊的位置 ->>關注2
MoveBlockPosition(mfixedBlocks, mMoveBlock, initPosition, isClock_Wise);
}
// 此步驟結束
/**
* 關注1：設置 固定方塊位置
*/
private void fixedBlockPosition(fixedBlock[] fixedBlocks, int cx, int cy, float dividerWidth, float halfSquareWidth) {
// 1. 肯定第1個方塊的位置
// 分爲2種狀況：行數 = 偶 / 奇數時
// 主要是是數學知識，此處不做過多描述
float squareWidth = halfSquareWidth * 2;
int lineCount = (int) Math.sqrt(fixedBlocks.length);
float firstRectLeft = 0;
float firstRectTop = 0;
// 狀況1：當行數 = 偶數時
if (lineCount % 2 == 0) {
int squareCountInAline = lineCount / 2;
int diviCountInAline = squareCountInAline - 1;
float firstRectLeftTopFromCenter = squareCountInAline * squareWidth
+ diviCountInAline * dividerWidth
+ dividerWidth / 2;
firstRectLeft = cx - firstRectLeftTopFromCenter;
firstRectTop = cy - firstRectLeftTopFromCenter;
// 狀況2：當行數 = 奇數時
} else {
int squareCountInAline = lineCount / 2;
int diviCountInAline = squareCountInAline;
float firstRectLeftTopFromCenter = squareCountInAline * squareWidth
+ diviCountInAline * dividerWidth
+ halfSquareWidth;
firstRectLeft = cx - firstRectLeftTopFromCenter;
firstRectTop = cy - firstRectLeftTopFromCenter;
firstRectLeft = cx - firstRectLeftTopFromCenter;
firstRectTop = cy - firstRectLeftTopFromCenter;
}
// 2. 肯定剩下的方塊位置
// 思想：把第一行方塊位置往下移動便可
// 經過for循環肯定：第一個for循環 = 行，第二個 = 列
for (int i = 0; i < lineCount; i++) {//行
for (int j = 0; j < lineCount; j++) {//列
if (i == 0) {
if (j == 0) {
fixedBlocks[0].rectF.set(firstRectLeft, firstRectTop,
firstRectLeft + squareWidth, firstRectTop + squareWidth);
} else {
int currIndex = i * lineCount + j;
fixedBlocks[currIndex].rectF.set(fixedBlocks[currIndex - 1].rectF);
fixedBlocks[currIndex].rectF.offset(dividerWidth + squareWidth, 0);
}
} else {
int currIndex = i * lineCount + j;
fixedBlocks[currIndex].rectF.set(fixedBlocks[currIndex - lineCount].rectF);
fixedBlocks[currIndex].rectF.offset(0, dividerWidth + squareWidth);
}
}
}
}
// 回到原處
/**
* 關注2：設置移動方塊的位置
*/
private void MoveBlockPosition(fixedBlock[] fixedBlocks,
MoveBlock moveBlock, int initPosition, boolean isClockwise) {
// 移動方塊位置 = 設置初始的空出位置 的下一個位置（next）
// 下一個位置 經過 鏈接的外部方塊位置肯定
fixedBlock fixedBlock = fixedBlocks[initPosition];
moveBlock.rectF.set(fixedBlock.next.rectF);
}
// 回到原處
複製代碼
步驟4：繪製方塊
// 此步驟寫到onDraw（）中
@Override
protected void onDraw(Canvas canvas) {
// 1. 繪製內部方塊（固定的）
for (int i = 0; i < mfixedBlocks.length; i++) {
// 根據標誌位判斷是否須要繪製
if (mfixedBlocks[i].isShow) {
// 傳入方塊位置參數、圓角 & 畫筆屬性
canvas.drawRoundRect(mfixedBlocks[i].rectF, fixBlock_Angle, fixBlock_Angle, mPaint);
}
}
// 2. 繪製移動的方塊
if (mMoveBlock.isShow) {
canvas.rotate(isClock_Wise ? mRotateDegree : -mRotateDegree, mMoveBlock.cx, mMoveBlock.cy);
canvas.drawRoundRect(mMoveBlock.rectF, moveBlock_Angle, moveBlock_Angle, mPaint);
}
}
複製代碼
步驟5：設置動畫
實現該動畫的步驟包括：設置平移動畫、旋轉動畫 & 組合動畫。
1.設置平移動畫
private ValueAnimator createTranslateValueAnimator(fixedBlock currEmptyfixedBlock,
fixedBlock moveBlock) {
float startAnimValue = 0;
float endAnimValue = 0;
PropertyValuesHolder left = null;
PropertyValuesHolder top = null;
// 1. 設置移動速度
ValueAnimator valueAnimator = new ValueAnimator().setDuration(moveSpeed);
// 2. 設置移動方向
// 狀況分爲：4種，分別是移動方塊向左、右移動 和 上、下移動
// 注：需考慮 旋轉方向（isClock_Wise），即順逆時針 ->>關注1
if (isNextRollLeftOrRight(currEmptyfixedBlock, moveBlock)) {
// 狀況1：順時針且在第一行 / 逆時針且在最後一行時，移動方塊向右移動
if (isClock_Wise && currEmptyfixedBlock.index > moveBlock.index || !isClock_Wise && currEmptyfixedBlock.index > moveBlock.index) {
startAnimValue = moveBlock.rectF.left;
endAnimValue = moveBlock.rectF.left + blockInterval;
// 狀況2：順時針且在最後一行 / 逆時針且在第一行，移動方塊向左移動
} else if (isClock_Wise && currEmptyfixedBlock.index < moveBlock.index
|| !isClock_Wise && currEmptyfixedBlock.index < moveBlock.index) {
startAnimValue = moveBlock.rectF.left;
endAnimValue = moveBlock.rectF.left - blockInterval;
}
// 設置屬性值
left = PropertyValuesHolder.ofFloat("left", startAnimValue, endAnimValue);
valueAnimator.setValues(left);
} else {
// 狀況3：順時針且在最左列 / 逆時針且在最右列，移動方塊向上移動
if (isClock_Wise && currEmptyfixedBlock.index < moveBlock.index
|| !isClock_Wise && currEmptyfixedBlock.index < moveBlock.index) {
startAnimValue = moveBlock.rectF.top;
endAnimValue = moveBlock.rectF.top - blockInterval;
// 狀況4：順時針且在最右列 / 逆時針且在最左列，移動方塊向下移動
} else if (isClock_Wise && currEmptyfixedBlock.index > moveBlock.index
|| !isClock_Wise && currEmptyfixedBlock.index > moveBlock.index) {
startAnimValue = moveBlock.rectF.top;
endAnimValue = moveBlock.rectF.top + blockInterval;
}
// 設置屬性值
top = PropertyValuesHolder.ofFloat("top", startAnimValue, endAnimValue);
valueAnimator.setValues(top);
}
// 3. 經過監聽器更新屬性值
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
Object left = animation.getAnimatedValue("left");
Object top = animation.getAnimatedValue("top");
if (left != null) {
mMoveBlock.rectF.offsetTo((Float) left, mMoveBlock.rectF.top);
}
if (top != null) {
mMoveBlock.rectF.offsetTo(mMoveBlock.rectF.left, (Float) top);
}
// 實時更新旋轉中心 ->>關注2
setMoveBlockRotateCenter(mMoveBlock, isClock_Wise);
// 更新繪製
invalidate();
}
});
return valueAnimator;
}
// 此步驟分析完畢
/**
* 關注1：判斷移動方向
* 即上下 or 左右
*/
private boolean isNextRollLeftOrRight(fixedBlock currEmptyfixedBlock, fixedBlock rollSquare) {
if (currEmptyfixedBlock.rectF.left - rollSquare.rectF.left == 0) {
return false;
} else {
return true;
}
}
// 回到原處
/**
* 關注2：實時更新移動方塊的旋轉中心
* 由於方塊在平移旋轉過程當中，旋轉中心也會跟着改變，所以須要改變MoveBlock的旋轉中心（cx,cy）
*/
private void setMoveBlockRotateCenter(MoveBlock moveBlock, boolean isClockwise) {
// 狀況1：以移動方塊的左上角爲旋轉中心
if (moveBlock.index == 0) {
moveBlock.cx = moveBlock.rectF.right;
moveBlock.cy = moveBlock.rectF.bottom;
// 狀況2：以移動方塊的右下角爲旋轉中心
} else if (moveBlock.index == lineNumber * lineNumber - 1) {
moveBlock.cx = moveBlock.rectF.left;
moveBlock.cy = moveBlock.rectF.top;
// 狀況3：以移動方塊的左下角爲旋轉中心
} else if (moveBlock.index == lineNumber * (lineNumber - 1)) {
moveBlock.cx = moveBlock.rectF.right;
moveBlock.cy = moveBlock.rectF.top;
// 狀況4：以移動方塊的右上角爲旋轉中心
} else if (moveBlock.index == lineNumber - 1) {
moveBlock.cx = moveBlock.rectF.left;
moveBlock.cy = moveBlock.rectF.bottom;
}
//如下判斷與旋轉方向有關：即順 or 逆順時針
// 狀況1：左邊
else if (moveBlock.index % lineNumber == 0) {
moveBlock.cx = moveBlock.rectF.right;
moveBlock.cy = isClockwise ? moveBlock.rectF.top : moveBlock.rectF.bottom;
// 狀況2：上邊
} else if (moveBlock.index < lineNumber) {
moveBlock.cx = isClockwise ? moveBlock.rectF.right : moveBlock.rectF.left;
moveBlock.cy = moveBlock.rectF.bottom;
// 狀況3：右邊
} else if ((moveBlock.index + 1) % lineNumber == 0) {
moveBlock.cx = moveBlock.rectF.left;
moveBlock.cy = isClockwise ? moveBlock.rectF.bottom : moveBlock.rectF.top;
// 狀況4：下邊
} else if (moveBlock.index > (lineNumber - 1) * lineNumber) {
moveBlock.cx = isClockwise ? moveBlock.rectF.left : moveBlock.rectF.right;
moveBlock.cy = moveBlock.rectF.top;
}
}
// 回到原處
複製代碼
2. 設置旋轉動畫
private ValueAnimator createMoveValueAnimator() {
// 經過屬性動畫進行設置
ValueAnimator moveAnim = ValueAnimator.ofFloat(0, 90).setDuration(moveSpeed);
moveAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
Object animatedValue = animation.getAnimatedValue();
// 賦值
mRotateDegree = (float) animatedValue;
// 更新視圖
invalidate();
}
});
return moveAnim;
}
// 此步驟完畢
複製代碼
3. 設置組合動畫
private void setAnimation（） {
// 1. 獲取固定方塊當前的空位置，即移動方塊當前位置
fixedBlock currEmptyfixedBlock = mfixedBlocks[mCurrEmptyPosition];
// 2. 獲取移動方塊的到達位置，即固定方塊當前空位置的下1個位置
fixedBlock movedBlock = currEmptyfixedBlock.next;
// 3. 設置動畫變化的插值器
mAnimatorSet.setInterpolator(move_Interpolator);
mAnimatorSet.playTogether(translateConrtroller, moveConrtroller);
mAnimatorSet.addListener(new AnimatorListenerAdapter() {
// 4. 動畫開始時進行一些設置
@Override
public void onAnimationStart(Animator animation) {
// 每次動畫開始前都須要更新移動方塊的位置 ->>關注1
updateMoveBlock();
// 讓移動方塊的初始位置的下個位置也隱藏 = 兩個隱藏的方塊
mfixedBlocks[mCurrEmptyPosition].next.isShow = false;
// 經過標誌位將移動的方塊顯示出來
mMoveBlock.isShow = true;
}
// 5. 結束時進行一些設置
@Override
public void onAnimationEnd(Animator animation) {
isMoving = false;
mfixedBlocks[mCurrEmptyPosition].isShow = true;
mCurrEmptyPosition = mfixedBlocks[mCurrEmptyPosition].next.index;
// 將移動的方塊隱藏
mMoveBlock.isShow = false;
// 經過標誌位判斷動畫是否要循環播放
if (mAllowRoll) {
startMoving();
}
}
});
// 此步驟分析完畢
/**
* 關注1：更新移動方塊的位置
*/
private void updateMoveBlock() {
mMoveBlock.rectF.set(mfixedBlocks[mCurrEmptyPosition].next.rectF);
mMoveBlock.index = mfixedBlocks[mCurrEmptyPosition].next.index;
setMoveBlockRotateCenter(mMoveBlock, isClock_Wise);
}
// 回到原處
複製代碼
步驟6：啓動動畫
public void startMoving() {
// 1. 根據標誌位 & 視圖是否可見肯定是否須要啓動動畫
// 此處設置是爲了方便手動 & 自動中止動畫
if (isMoving || getVisibility() != View.VISIBLE ) {
return;
}
// 2. 設置標記位：以即是否中止動畫
isMoving = true;
mAllowRoll = true;
// 3. 啓動動畫
mAnimatorSet.start();
// 中止動畫
public void stopMoving() {
// 經過標記位來設置
mAllowRoll = false;
}
複製代碼
- 至此，該款小清新加載等待的自定義控件源碼分析完畢
- 完整源碼地址：https://github.com/Carson-Ho/Kawaii_LoadingView
7. 貢獻代碼
- 但願大家能和我一塊兒完善這款清新 & 小資風格的自定義控件，具體請看：貢獻代碼說明
- 關於該開源項目的意見 & 建議可在Issue上提出。歡迎
Star！
8. 總結
- 相信你必定會喜歡上 這款小清新的加載等待自定義控件
已在
Github上開源：Kawaii_LoadingView，歡迎Star！
- 此外，我還有一些有趣的自定義
View實例講解，有興趣能夠繼續關注Carson_Ho的安卓開發筆記
請點贊！由於你的鼓勵是我寫做的最大動力！
- 參考文章
http://www.jianshu.com/p/9a6cbb7aa54f http://www.jianshu.com/p/2412d00a0ce4 http://www.jianshu.com/p/733532041f46 http://halohoop.com/2017/06/04/roll_loading/ http://www.jianshu.com/p/e9d8420b1b9c http://www.jianshu.com/p/762b490403c3 http://www.jianshu.com/p/1dab927b2f36 http://www.jianshu.com/p/158736a2549d http://www.jianshu.com/p/146e5cec4863
相關文章
- 1. 小清新加載等待控件
- 2. 一個可愛 & 小清新的加載等待Android控件
- 3. WinForm--進度加載等待控件
- 4. easyui加載等待的js
- 5. Android 自定義一款炫酷的加載控件
- 6. Oracle 12c的一些新等待事件
- 7. JQuery EasyUI 的加載等待效果....
- 8. 介紹一個Android的開源的自定義小控件:TextDrawable
- 9. android 顏色選擇控件、等待動畫、圖片高斯模糊等源碼
- 10. android 新聞應用、Xposed模塊、酷炫的加載動畫、下載模塊、九宮格控件等源碼
- 更多相關文章...
- • ionic 加載動畫 - ionic 教程
- • ionic 加載動作 - ionic 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • PHP開發工具
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
