Android仿iOS菊花加載圈動畫效果
iOS上有一個(gè)UIActivityIndicator的控件，就是俗稱轉(zhuǎn)菊花的控件，一般UI設(shè)計(jì)師會按照iOS的風(fēng)格來出設(shè)計(jì)稿，也要求使用這種Loading效果，實(shí)現(xiàn)方式有很多：
切圖，做旋轉(zhuǎn)動畫
自定義View，繪制效果
gif圖
1、切圖會增加體積，但相對簡單，不過在換膚的場景下，會使用不同顏色，需要準(zhǔn)備多張圖，不夠靈活。
2、由于自定義的好處，不同顏色只需要提供自定義屬性，換膚時(shí)切換屬性設(shè)置即可，比較靈活。
3、gif圖普遍比較大，而且加載gif沒有原生支持，需要引入第三方庫，而且消耗內(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" /><!-- 是否自動開始 --><attr name="aiv_auto_start" format="boolean" /></declare-styleable></resources>
Java代碼實(shí)現(xiàn)過程：
public class ActivityIndicatorView extends View {/*** 菊花顏色*/private int mColor = Color.argb(255, 255, 255, 255);/*** 開始角度*/private int mStartAngle = 0;/*** 每條線的寬度*/private float mStrokeWidth = 0;/*** 是否自動開始旋轉(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;/*** 動畫Handler*/private Handler mAnimHandler = new Handler(Looper.getMainLooper());/*** 動畫任務(wù)*/private Runnable mAnimRunnable = new Runnable() {@Overridepublic 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);}@Overrideprotected 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, 是防止沒有設(shè)置的Padding時(shí),圖像會超出View范圍centerX + pointX(-mAngleGradient * i + mStartAngle, radius - mStrokeWidth / 2),//這里計(jì)算Y值時(shí), 之所以減去線寬/2, 是防止沒有設(shè)置的Padding時(shí),圖像會超出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));}@Overrideprotected void onAttachedToWindow() {super.onAttachedToWindow();if (isAutoStart) {start();}}@Overrideprotected void onDetachedFromWindow() {super.onDetachedFromWindow();if (mAnimHandler != null) {stop();}}/*** 開始動畫*/public void start() {mAnimHandler.post(mAnimRunnable);}/*** 停止動畫*/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)效果比較不符合使用。
<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.ActivityIndicatorViewandroid: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é)束了.
評論
圖片
表情