Android之實現帶動畫加載狀態的Dialog

請尊重個人勞動成果,轉載註明出處,謝謝!
http://blog.csdn.net/xiaxiazaizai01/article/details/52232846

在加載網絡請求數據時,顯示一個加載中的dialog彈窗的話則會增強用戶的體驗感,參考博客中的一個夥計的思路,記不清是誰了這裏就不貼地址了,廢話不多說,先上效果圖
這裏寫圖片描述

實現起來也相當簡單,首先看下dialog的配置

<!-- dialog樣式 -->
    <style name="MyDialog" parent="@android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:backgroundDimAmount">0.6</item>
    </style>

下面看一下自定義dialog代碼

/**
 * 自定義dialog
 */
public class MyDialog extends Dialog {

    private Context context;
    private static MyDialog dialog;
    private ImageView ivProgress;


    public MyDialog(Context context) {
        super(context);
        this.context = context;
    }

    public MyDialog(Context context, int themeResId) {
        super(context, themeResId);
        this.context = context;

    }
    //顯示dialog的方法
    public static MyDialog showDialog(Context context){
        dialog = new MyDialog(context, R.style.MyDialog);//dialog樣式
        dialog.setContentView(R.layout.dialog_layout);//dialog佈局文件
        dialog.setCanceledOnTouchOutside(false);//點擊外部不允許關閉dialog
        return dialog;
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if(hasFocus && dialog != null){
           ivProgress = (ImageView) dialog.findViewById(R.id.ivProgress);
            Animation animation = AnimationUtils.loadAnimation(context, R.anim.dialog_progress_anim);
            ivProgress.startAnimation(animation);
        }
    }
}

下面是dialog的佈局文件

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="15dp"
        android:layout_centerInParent="true"
        android:background="@drawable/shape_dialog_bg"
        android:orientation="vertical">
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center">
            <ImageView
                android:id="@+id/ivBackGround"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/loading_background"
                android:layout_centerInParent="true"
                />
            <ImageView
                android:id="@+id/ivProgress"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/loading_progress"
                android:layout_centerInParent="true"
                />
        </RelativeLayout>
        <TextView
            android:id="@+id/tvText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="加載中,請稍後..."
            android:textSize="16sp"
            android:layout_marginTop="5dp"
            />
    </LinearLayout>
</RelativeLayout>

代碼中用到的加載進度最外層的轉圈動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <!-- 如果不想共享一個interpolator(動畫變化的速率),則設置android:shareInterpolator="false",並且需要在每一個動畫效果處添加interpolator -->

    <rotate
        android:fromDegrees="0"
        android:toDegrees="+360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:repeatMode="restart"
        android:interpolator="@android:anim/linear_interpolator"
        android:duration="800"
        />
    <!--
        fromDegrees   動畫開始時的角度
        toDegrees     動畫結束時物件的旋轉角度,正代表順時針
        pivotX    屬性爲動畫相對於物件的X座標的開始位置
        pivotY    屬性爲動畫相對於物件的Y座標的開始位置
        repeatCount 動畫重複次數,-1表示無限執行
        repeatMode  重複類型,有兩個值,reverse表示倒序回放,restart表示從頭播放
        interpolator 動畫變化速率,這裏是勻速
    -->
</set>

然後就是在我們需要調用顯示dialog的地方去調用顯示即可

public class MainActivity extends AppCompatActivity {

    private Button btn;
    MyDialog dialog;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btn = (Button) findViewById(R.id.btnClick);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog = MyDialog.showDialog(MainActivity.this);
                dialog.show();
            }
        });
    }
}

這個demo非常簡單,主要代碼也已經粘貼出來,所以也就沒有上傳源代碼。不過最近有好多小夥伴問我要這個demo的完整代碼,所以在這裏提供下載鏈接,有需要的點擊下方的源碼下載即可。其實我在寫購物車的時候裏面寫了個通過Builder構建的Dialog彈窗,調用更簡潔,有需要的請查看我的這篇文章仿京東中購物車列表模塊的實現【以及通過Builder的方式創建dialog彈窗 鏈式調用】

此demo的源代碼下載鏈接

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章