Android仿ios加載loading菊花圖效果

2019-12-12 00:31:28

字體：大中小

供稿：網(wǎng)友

項(xiàng)目中經(jīng)常會(huì)用到加載數(shù)據(jù)的loading顯示圖，除了設(shè)計(jì)根據(jù)app自身設(shè)計(jì)的動(dòng)畫loading，一般用的比較多的是仿照ios 的菊花加載loading 圖，當(dāng)然一些條件下還會(huì)涉及到加載成功/ 失敗情況的顯示，還有顯示文字。

使用ProgressBar 來加載動(dòng)畫轉(zhuǎn)圈，這里使用drawable文件定義轉(zhuǎn)圈動(dòng)畫， indeterminateDrawable 屬性進(jìn)行加載。

<?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" />

部分情況下，在加載成功/ 失敗之后會(huì)顯示對(duì)應(yīng)的靜態(tài)圖片，所以一開始想直接通過 setIndeterminateDrawable(Drawable d) 來加載靜態(tài)圖片，但是直接寫是顯示不出圖片的，還要設(shè)置Drawable 的位置 d.setBounds(Rect bounds) ，即使這樣加載出了靜態(tài)圖片，但是設(shè)置 R.drawable.anim 的轉(zhuǎn)圈動(dòng)畫時(shí) 卻沒有了轉(zhuǎn)圈的效果，好氣喲 ~~

所以在自定義view 的布局里成功/失敗的狀態(tài)單獨(dú)用 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，提供三種狀態(tài)的方法。

public class LoadingView extends LinearLayout {  ...構(gòu)造函數(shù)...  /**   * 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);  }}

效果圖：