Android實(shí)現(xiàn)仿iOS菊花加載圈動(dòng)畫(huà)效果
常見(jiàn)的實(shí)現(xiàn)方式
- 切圖,做旋轉(zhuǎn)動(dòng)畫(huà)
- 自定義View,繪制效果
- gif圖
1、切圖會(huì)增加體積,但相對(duì)簡(jiǎn)單,不過(guò)在換膚的場(chǎng)景下,會(huì)使用不同顏色,需要準(zhǔn)備多張圖,不夠靈活。
2、由于自定義的好處,不同顏色只需要提供自定義屬性,換膚時(shí)切換屬性設(shè)置即可,比較靈活。
3、gif圖普遍比較大,而且加載gif沒(méi)有原生支持,需要引入第三方庫(kù),而且消耗內(nèi)存比較大,不推薦。
效果圖:

完整代碼
自定義屬性:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ActivityIndicatorView">
<!-- 菊花顏色 -->
<attr name="aiv_color" format="color" />
<!-- 開(kāi)始角度 -->
<attr name="aiv_startAngle" format="integer" />
<!-- 線條寬度 -->
<attr name="aiv_strokeWidth" format="dimension" />
<!-- 是否自動(dòng)開(kāi)始 -->
<attr name="aiv_auto_start" format="boolean" />
</declare-styleable>
</resources>
Java代碼實(shí)現(xiàn)過(guò)程:
public class ActivityIndicatorView extends View {
/**
* 菊花顏色
*/
private int mColor = Color.argb(255, 255, 255, 255);
/**
* 開(kāi)始角度
*/
private int mStartAngle = 0;
/**
* 每條線的寬度
*/
private float mStrokeWidth = 0;
/**
* 是否自動(dòng)開(kāi)始旋轉(zhuǎn)
*/
private boolean isAutoStart;
/**
* 一共多少條先
*/
private final int mLineCount = 12;
private final int minAlpha = 0;
/**
* 每一條線疊加的
*/
private final int mAngleGradient = 360 / mLineCount;
/**
* 每條線的顏色
*/
private int[] mColors = new int[mLineCount];
/**
* 畫(huà)筆
*/
private Paint mPaint;
/**
* 動(dòng)畫(huà)Handler
*/
private Handler mAnimHandler = new Handler(Looper.getMainLooper());
/**
* 動(dòng)畫(huà)任務(wù)
*/
private Runnable mAnimRunnable = new Runnable() {
@Override
public void run() {
mStartAngle += mAngleGradient;
invalidate();
mAnimHandler.postDelayed(mAnimRunnable, 50);
}
};
public ActivityIndicatorView(Context context) {
this(context, null);
}
public ActivityIndicatorView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ActivityIndicatorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setup(context, attrs, defStyleAttr, 0);
}
private void setup(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ActivityIndicatorView, defStyleAttr, defStyleRes);
mColor = typedArray.getColor(R.styleable.ActivityIndicatorView_aiv_color, mColor);
mStartAngle = typedArray.getInt(R.styleable.ActivityIndicatorView_aiv_startAngle, mStartAngle);
mStrokeWidth = typedArray.getDimension(R.styleable.ActivityIndicatorView_aiv_strokeWidth, mStrokeWidth);
isAutoStart = typedArray.getBoolean(R.styleable.ActivityIndicatorView_aiv_auto_start, true);
typedArray.recycle();
initialize();
}
private void initialize() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
int alpha = Color.alpha(mColor);
int red = Color.red(mColor);
int green = Color.green(mColor);
int blue = Color.blue(mColor);
int alphaGradient = Math.abs(alpha - minAlpha) / mLineCount;
for (int i = 0; i < mColors.length; i++) {
mColors[i] = Color.argb(alpha - alphaGradient * i, red, green, blue);
}
mPaint.setStrokeCap(Paint.Cap.ROUND);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int centerX = getWidth() / 2;
int centerY = getHeight() / 2;
float radius = Math.min(getWidth() - getPaddingLeft() - getPaddingRight(), getHeight() - getPaddingTop() - getPaddingBottom()) * 0.5f;
if (mStrokeWidth == 0) {
mStrokeWidth = pointX(mAngleGradient / 2, radius / 2) / 2;
}
mPaint.setStrokeWidth(mStrokeWidth);
for (int i = 0; i < mColors.length; i++) {
mPaint.setColor(mColors[i]);
canvas.drawLine(
centerX + pointX(-mAngleGradient * i + mStartAngle, radius / 2),
centerY + pointY(-mAngleGradient * i + mStartAngle, radius / 2),
//這里計(jì)算Y值時(shí), 之所以減去線寬/2, 是防止沒(méi)有設(shè)置的Padding時(shí),圖像會(huì)超出View范圍
centerX + pointX(-mAngleGradient * i + mStartAngle, radius - mStrokeWidth / 2),
//這里計(jì)算Y值時(shí), 之所以減去線寬/2, 是防止沒(méi)有設(shè)置的Padding時(shí),圖像會(huì)超出View范圍
centerY + pointY(-mAngleGradient * i + mStartAngle, radius - mStrokeWidth / 2),
mPaint);
}
}
private float pointX(int angle, float radius) {
return (float) (radius * Math.cos(angle * Math.PI / 180));
}
private float pointY(int angle, float radius) {
return (float) (radius * Math.sin(angle * Math.PI / 180));
}
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
if (isAutoStart) {
start();
}
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
if (mAnimHandler != null) {
stop();
}
}
/**
* 開(kāi)始動(dòng)畫(huà)
*/
public void start() {
mAnimHandler.post(mAnimRunnable);
}
/**
* 停止動(dòng)畫(huà)
*/
public void stop() {
mAnimHandler.removeCallbacks(mAnimRunnable);
}
/**
* 設(shè)置菊花顏色
*/
public void setColor(int color) {
this.mColor = color;
}
/**
* 設(shè)置線寬
*/
public void setStrokeWidth(float strokeWidth) {
this.mStrokeWidth = strokeWidth;
}
/**
* 設(shè)置開(kāi)始的角度
*/
public void setStartAngle(int startAngle) {
this.mStartAngle = startAngle;
}
}
布局代碼
布局中添加控件,適當(dāng)時(shí)候顯示、隱藏即可,最好都設(shè)置寬、高、顏色以及線寬,默認(rèn)效果比較不符合使用。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.tongwei.bootrunsample.base.widget.ActivityIndicatorView
android:id="@+id/activity_indicator"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="center"
android:layout_centerInParent="true"
app:aiv_color="#A2A3B0"
app:aiv_strokeWidth="2.5dp" />
</RelativeLayout>
到這里就結(jié)束了.
以上就是Android實(shí)現(xiàn)仿iOS菊花加載圈動(dòng)畫(huà)效果的詳細(xì)內(nèi)容,更多關(guān)于Android仿iOS菊花加載圈動(dòng)畫(huà)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android編程實(shí)現(xiàn)號(hào)碼歸屬地查詢的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)號(hào)碼歸屬地查詢的方法,涉及Android xml文件的發(fā)送及WebService的操作技巧,需要的朋友可以參考下2016-01-01
Android使用GridView實(shí)現(xiàn)日歷功能示例(詳細(xì)代碼)
本篇文章主要介紹了Android使用GridView實(shí)現(xiàn)日歷功能示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧2017-01-01
Android實(shí)現(xiàn)菜單關(guān)聯(lián)activity的方法示例
這篇文章主要介紹了Android實(shí)現(xiàn)菜單關(guān)聯(lián)activity的方法,涉及Android使用Intent實(shí)現(xiàn)菜單關(guān)聯(lián)activity相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
Android 第三方應(yīng)用接入微信平臺(tái)研究情況分享(二)
微信平臺(tái)開(kāi)放后倒是挺火的,許多第三方應(yīng)用都想試下,這里把我的整個(gè)研究情況給出來(lái),希望可以共同學(xué)習(xí),感興趣的朋友可以了解下2013-01-01
Android實(shí)現(xiàn)上傳文件到服務(wù)器實(shí)例詳解
本篇文章詳細(xì)介紹了Android實(shí)現(xiàn)上傳文件到服務(wù)器實(shí)例詳解,實(shí)現(xiàn)了文件每隔5秒進(jìn)行上傳,有需要的可以了解一下。2016-11-11
Android編程之語(yǔ)音識(shí)別實(shí)現(xiàn)方法
這篇文章主要介紹了Android編程語(yǔ)音識(shí)別實(shí)現(xiàn)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android語(yǔ)音識(shí)別的操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-10-10

