Android實(shí)現(xiàn)仿iOS菊花加載圈動(dòng)畫效果
常見(jiàn)的實(shí)現(xiàn)方式
- 切圖,做旋轉(zhuǎn)動(dòng)畫
- 自定義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" /> <!-- 開始角度 --> <attr name="aiv_startAngle" format="integer" /> <!-- 線條寬度 --> <attr name="aiv_strokeWidth" format="dimension" /> <!-- 是否自動(dòng)開始 --> <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); /** * 開始角度 */ private int mStartAngle = 0; /** * 每條線的寬度 */ private float mStrokeWidth = 0; /** * 是否自動(dòng)開始旋轉(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]; /** * 畫筆 */ private Paint mPaint; /** * 動(dòng)畫Handler */ private Handler mAnimHandler = new Handler(Looper.getMainLooper()); /** * 動(dòng)畫任務(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(); } } /** * 開始動(dòng)畫 */ public void start() { mAnimHandler.post(mAnimRunnable); } /** * 停止動(dòng)畫 */ 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è)置開始的角度 */ 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)畫效果的詳細(xì)內(nèi)容,更多關(guān)于Android仿iOS菊花加載圈動(dòng)畫的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android點(diǎn)擊事件之多點(diǎn)觸摸與手勢(shì)識(shí)別的實(shí)現(xiàn)
這篇文章主要介紹了Android點(diǎn)擊事件之多點(diǎn)觸摸與手勢(shì)識(shí)別的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05Android之Intent附加數(shù)據(jù)的兩種實(shí)現(xiàn)方法
這篇文章主要介紹了Android之Intent附加數(shù)據(jù)的兩種實(shí)現(xiàn)方法,以實(shí)例形式較為詳細(xì)的分析了添加數(shù)據(jù)到Intent的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09PC版與Android手機(jī)版帶斷點(diǎn)續(xù)傳的多線程下載
這篇文章主要介紹了PC版與Android手機(jī)版帶斷點(diǎn)續(xù)傳的多線程下載的相關(guān)資料,需要的朋友可以參考下2015-10-10Android音視頻開發(fā)Media FrameWork框架源碼解析
這篇文章主要為大家介紹了Android音視頻開發(fā)Media FrameWork框架源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12Android 使用 DowanloadManager 實(shí)現(xiàn)下載并獲取下載進(jìn)度實(shí)例代碼
這篇文章主要介紹了Android 使用 DowanloadManager 實(shí)現(xiàn)下載并獲取下載進(jìn)度實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06android實(shí)現(xiàn)QQ微信側(cè)滑刪除效果
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)QQ微信側(cè)滑刪除效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12