簡易仿ios菊花加載loading圖

原文連結： https://mp.weixin.qq.com/s/wBbQgOfr59wntNK9ZJ5iRw

項目中經常會用到加載資料的loading顯示圖，除了設計根據app自身設計的動畫loading，一般用的比較多的是仿照ios 的菊花加載loading 圖，當然一些條件下還會涉及到加載成功/ 失敗情況的顯示，還有顯示文字。

使用ProgressBar 來加載動畫轉圈，這裡使用drawable檔案 定義轉圈動畫，

indeterminateDrawable

屬性進行加載。

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@mipmap/load"
    android:pivotX="50%"
    android:pivotY="50%" />
    
<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:indeterminateDrawable="@drawable/anim" />           

部分情況下，在加載成功/ 失敗之後會顯示對應的靜态圖檔，是以一開始想直接通過

setIndeterminateDrawable(Drawable d)

來加載靜态圖檔，但是直接寫是顯示不出圖檔的，還要設定Drawable 的位置

d.setBounds(Rect bounds)

，即使這樣加載出了靜态圖檔，但是設定

R.drawable.anim

的轉圈動畫時 卻沒有了轉圈的效果，好氣喲 ~~

是以在自定義view 的布局裡 成功/失敗的狀态單獨用

imageView

顯示

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="110dp"
    android:layout_height="110dp"
    android:background="@drawable/shape_dialog_bg"
    android:gravity="center"
    android:orientation="vertical">

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:indeterminateDrawable="@drawable/anim" />

    <ImageView
        android:id="@+id/iv"
        android:visibility="gone"
        android:layout_width="50dp"
        android:layout_height="50dp" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="正在加載"
        android:textColor="#fff" />

</LinearLayout>           

自定義view，提供三種狀态的方法。

public class LoadingView extends LinearLayout {

    ...構造函數...
    
    /**
     * loading
     */
    public void showLoading() {
        iv.setVisibility(GONE);
        progressBar.setVisibility(VISIBLE);
    }

    /**
     * 成功
     */
    public void showSuccess() {
        iv.setImageResource(R.mipmap.load_success);
        iv.setVisibility(View.VISIBLE);
        progressBar.setVisibility(GONE);
    }

    /**
     *失敗
     */
    public void showFail() {
        iv.setImageResource(R.mipmap.load_fail);
        iv.setVisibility(View.VISIBLE);
        progressBar.setVisibility(GONE);
    }

    /**
     * 提示文字
     *
     * @param txt string
     */
    public void setText(String txt) {
        tv.setText(txt);
    }

    /**
     * 提示文字
     */
    public void setText(@StringRes int txtId) {
        tv.setText(txtId);
    }
    
}           

效果圖：

github位址：

https://github.com/taixiang/loading

歡迎關注我的個人部落格：

https://www.manjiexiang.cn/

更多精彩歡迎關注微信号：春風十裡不如認識你

一起學習，一起進步，有問題随時聯系，一起解決！！！