快捷導(dǎo)航

Android仿ios加載loading菊花圖效果

更新時(shí)間：2018年09月17日 10:19:24 作者：程序猿tx

這篇文章主要介紹了Android仿ios加載loading菊花圖效果，本文通過(guò)實(shí)例代碼效果圖展示給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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

使用ProgressBar 來(lái)加載動(dòng)畫(huà)轉(zhuǎn)圈，這里使用drawable文件定義轉(zhuǎn)圈動(dòng)畫(huà)， 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)圖片，所以一開(kāi)始想直接通過(guò) setIndeterminateDrawable(Drawable d) 來(lái)加載靜態(tài)圖片，但是直接寫(xiě)是顯示不出圖片的，還要設(shè)置Drawable 的位置 d.setBounds(Rect bounds) ，即使這樣加載出了靜態(tài)圖片，但是設(shè)置 R.drawable.anim 的轉(zhuǎn)圈動(dòng)畫(huà)時(shí) 卻沒(méi)有了轉(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);
  }
}

效果圖：