欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android實(shí)現(xiàn)仿iOS菊花加載圈動(dòng)畫效果

 更新時(shí)間:2021年05月17日 09:47:10   作者:愛(ài)寫代碼的何蜀黍  
iOS上有一個(gè)UIActivityIndicator的控件,就是俗稱轉(zhuǎn)菊花的控件,一般UI設(shè)計(jì)師會(huì)按照iOS的風(fēng)格來(lái)出設(shè)計(jì)稿,也要求使用這種Loading效果,本文將具體的講述如何實(shí)現(xiàn)這種效果,感興趣的朋友可以參考下

常見(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)文章

最新評(píng)論