Android实现仿iOS菊花加载圈动画效果

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() {@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); } @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.ActivityIndicatorViewandroid: 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实现仿iOS菊花加载圈动画效果的详细内容，更多关于Android仿iOS菊花加载圈动画的资料请关注好吧啦网其它相关文章！