溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Android如何實現仿iOS菊花加載圈動畫效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
切圖，做旋轉動畫
自定義View，繪制效果
gif圖
1、切圖會增加體積，但相對簡單，不過在換膚的場景下，會使用不同顏色，需要準備多張圖，不夠靈活。
2、由于自定義的好處，不同顏色只需要提供自定義屬性，換膚時切換屬性設置即可，比較靈活。
3、gif圖普遍比較大，而且加載gif沒有原生支持，需要引入第三方庫，而且消耗內存比較大，不推薦。
自定義屬性：
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="ActivityIndicatorView"> <!-- 菊花顏色 --> <attr name="aiv_color" format="color" /> <!-- 開始角度 --> <attr name="aiv_startAngle" format="integer" /> <!-- 線條寬度 --> <attr name="aiv_strokeWidth" format="dimension" /> <!-- 是否自動開始 --> <attr name="aiv_auto_start" format="boolean" /> </declare-styleable> </resources>
Java代碼實現過程：
public class ActivityIndicatorView extends View {
/**
* 菊花顏色
*/
private int mColor = Color.argb(255, 255, 255, 255);
/**
* 開始角度
*/
private int mStartAngle = 0;
/**
* 每條線的寬度
*/
private float mStrokeWidth = 0;
/**
* 是否自動開始旋轉
*/
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];
/**
* 畫筆
*/
private Paint mPaint;
/**
* 動畫Handler
*/
private Handler mAnimHandler = new Handler(Looper.getMainLooper());
/**
* 動畫任務
*/
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),
//這里計算Y值時, 之所以減去線寬/2, 是防止沒有設置的Padding時,圖像會超出View范圍
centerX + pointX(-mAngleGradient * i + mStartAngle, radius - mStrokeWidth / 2),
//這里計算Y值時, 之所以減去線寬/2, 是防止沒有設置的Padding時,圖像會超出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();
}
}
/**
* 開始動畫
*/
public void start() {
mAnimHandler.post(mAnimRunnable);
}
/**
* 停止動畫
*/
public void stop() {
mAnimHandler.removeCallbacks(mAnimRunnable);
}
/**
* 設置菊花顏色
*/
public void setColor(int color) {
this.mColor = color;
}
/**
* 設置線寬
*/
public void setStrokeWidth(float strokeWidth) {
this.mStrokeWidth = strokeWidth;
}
/**
* 設置開始的角度
*/
public void setStartAngle(int startAngle) {
this.mStartAngle = startAngle;
}
}布局中添加控件，適當時候顯示、隱藏即可，最好都設置寬、高、顏色以及線寬，默認效果比較不符合使用。
<?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>
到這里就結束了.
Android是一種基于Linux內核的自由及開放源代碼的操作系統，主要使用于移動設備，如智能手機和平板電腦，由美國Google公司和開放手機聯盟領導及開發。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“Android如何實現仿iOS菊花加載圈動畫效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
