1. 程式人生 > >仿美團頁面載入-頁面內載入效果

仿美團頁面載入-頁面內載入效果

先上圖片:
效果

用法:
首先在主頁面初始化下列資訊

  MultiConfigure.setEmptyViewResId(R.layout.welcome); //空頁面
    MultiConfigure.setErrorViewResId(R.layout.error); //錯誤頁面
    MultiConfigure.setLoadingViewResId(R.layout.loding); //載入頁面
    MultiConfigure.setViewState(MultiConfigure.LOADING_VIEW); //初始頁面狀態
    //如果不寫初始頁面狀態,預設為載入頁面

然後在佈局中巢狀使用

<czh.stateviewlib.MultiStateView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/stateview" >

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="頁面載入完成"
            android:id="@+id/textView10" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="emplay"
            android:text="空頁面"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="error"
            android:text="失敗頁面"
             />
    </LinearLayout>

</czh.stateviewlib.MultiStateView>

有如下2種方法可以在頁面中呼叫:

 setViewState(ViewState state);
 getViewState();

使用方法:

  multiStateView=(MultiStateView)findViewById(R.id.stateview);
  //伺服器請求完資料後呼叫頁面切換回來。
  multiStateView.setViewState(MultiStateView.ViewState.CONTENT);

切換狀態說明:

MultiStateView.ViewState.CONTENT; //主頁面
MultiStateView.ViewState.EMPTY; //空頁面
MultiStateView.ViewState.ERROR; //錯誤頁面
MultiStateView.ViewState.LOADING; //載入頁面

初始配置狀態說明:

MultiConfigure.LOADING_VIEW

public static final int CONTENT_VIEW = 0; //初始開啟為主頁面

public static final int ERROR_VIEW = 1; //錯誤頁面

public static final int EMPTY_VIEW = 2; //空頁面

public static final int LOADING_VIEW = 3; //載入頁面

說明:
直接下載LIB包匯入就可以使用,空頁面是做預留作用,以防有載入和錯誤狀態外的頁面狀態使用。

另外:
為了實現小人奔跑效果,另附上自己寫的一個小控制元件。

<czh.stateviewlib.LodingView
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:layout_marginTop="50dp"
    android:background="@drawable/loding"
    android:id="@+id/view"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true" />

直接設定背景圖片,就會自動迴圈播放背景圖片的動畫。
圖片動畫檔案:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/progress_loading_image_01" android:duration="200"/>
<item android:drawable="@drawable/progress_loading_image_02" android:duration="200"/>
</animation-list>