天天看點
傳回

Android實用視圖動畫及工具系列之二：Toast對話框和加載載入對話框 聲明

實作效果

Android實用視圖動畫及工具系列之二：Toast對話框和加載載入對話框 聲明

功能說明

類似Toast底色的彈出對話框和加載對話框，主要實作彈出和提示消息的功能，對話框可以實作不被取消，主要功能原理利用了安卓逐幀動畫和繼承對話框接口來實作，适用于新手及新學習Android的碼友們，老玩家當然也可以看看，這個還是挺簡單挺實用的，在後面會簡略介紹實作方法及源代碼，同時部落格的最後還提供源代碼和圖檔等資源github下載下傳位址。

這篇文章的逐幀動畫實作就不做詳細介紹，前面的文章我有詳細的介紹： --------------------------------------------------------------------------------------------------------------------

Android實用視圖動畫及工具系列之一：簡單的載入視圖和載入動畫： http://blog.csdn.net/jaikydota163/article/details/52098833

--------------------------------------------------------------------------------------------------------------------

實作步驟

步驟一：添加逐幀動畫資源和幀布局Drawable，以及對話框背景樣式

顧名思義，逐幀動畫就是一幀一幀的播放，在Android原生元件不主持gif的情況下，我們要實作逐幀動畫隻能使用一張一張圖檔來逐幀播放以達到效果，如下面的幾張圖（其他圖檔資源在源代碼内，需要的自行下載下傳）：

Android實用視圖動畫及工具系列之二：Toast對話框和加載載入對話框 聲明
Android實用視圖動畫及工具系列之二：Toast對話框和加載載入對話框 聲明
Android實用視圖動畫及工具系列之二：Toast對話框和加載載入對話框 聲明

将所有幀圖檔導入到Android項目目錄的drawable檔案夾下：

Android實用視圖動畫及工具系列之二：Toast對話框和加載載入對話框 聲明

在drawable目錄下建立xml，取名loading_progress_white_rotate.xml，輸入如下代碼（附屬性說明）： animation-list：Android動畫清單 ； oneshot：true播放一次，false循環播放； item：每項動畫； android:drawable：圖檔索引； android:duration：每幀持續時間。

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >

    <item android:duration="100" android:drawable="@drawable/loading_white_01">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_white_02">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_white_03">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_white_04">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_white_05">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_white_06">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_white_07">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_white_08">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_white_09">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_white_10">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_white_11">
    </item>
    <item android:duration="100" android:drawable="@drawable/loading_white_12">
    </item>

</animation-list>

建立toast_bgshape.xml檔案：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

<gradient
    android:angle="90.0"
    android:endColor="#99363636"
    android:startColor="#99363636"/>

<corners android:radius="5dp"/>

</shape>

步驟二：建立自定義動畫類

建立類ListAniImageView，代碼如下，此類主要繼承自ImageView，實作了基本動畫播放，暫停和停止功能，注意包名改為自己的：

package com.jaiky.test.loadinganimation;

import android.content.Context;
import android.graphics.drawable.AnimationDrawable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * Author by Jaiky, Email [email protected], Date on 9/22/2016.
 * PS: Not easy to write code, please indicate.
 */
public class ListAniImageView extends ImageView {

    private AnimationDrawable animationDrawable;

    public ListAniImageView(Context context) {
        super(context);
        inti();

    }

    public ListAniImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        inti();
    }

    public ListAniImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        inti();
    }

    public void inti() {
        animationDrawable = (AnimationDrawable) getDrawable();
        animationDrawable.start();
    }

    public void startAnimation() {
        animationDrawable.start();
    }

    public void stopAnimation() {
        animationDrawable.setVisible(true, true);
        animationDrawable.stop();
    }

    public void pauseAnimation() {
        animationDrawable.stop();
    }

}

步驟三：添加對話框樣式和Toast對話框布局

在Android項目values檔案下的styles.xml檔案中添加如下代碼（主要用于對話框顯示樣式）：

<!-- 無标題無黑幕透明背景對話框樣式 -->
    <style name="NoFrameNoDim_Dialog" parent="android:Theme.Dialog">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:backgroundDimEnabled">false</item>
    </style>

在layout檔案下建立布局檔案dialog_toast.xml：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="center"
    android:background="@drawable/toast_bgshape"
    android:gravity="center"
    android:orientation="vertical">

    <com.jaiky.test.toastdialog.ListAniImageView
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_gravity="center"
        android:src="@drawable/loading_progress_white_rotate"
        android:visibility="visible"/>

    <TextView
        android:id="@+id/dialogToast_tvLoadInfo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:text="正在送出..."
        android:textColor="#ffffff"
        android:textSize="12sp"
        />
</LinearLayout>

步驟四：建立Toast對話框類

建立類ToastDialog，繼承自Dialog，代碼如下： setMsg(String msg)：設定顯示的文本。 setIsAllowClose(String msg)：是否允許關閉對話框。

package com.jaiky.test.toastdialog;

import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.KeyEvent;
import android.widget.TextView;

/**
 * Author by Jaiky, Email [email protected], Date on 8/15/2016.
 * PS: Not easy to write code, please indicate.
 */
public class ToastDialog extends Dialog {

    private TextView tvLoadInfo;
    private boolean isAllowClose = true;

    public ToastDialog(Context context) {
        this(context, R.style.NoFrameNoDim_Dialog);
    }

    private ToastDialog(Context context, int theme) {
        super(context, theme);
        init();
    }

    private void init() {
        setContentView(R.layout.dialog_toast);
        tvLoadInfo = (TextView) findViewById(R.id.dialogToast_tvLoadInfo);
        setCanceledOnTouchOutside(true);
    }


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    /**
     * 設定加載消息内容
     *
     * @param msg
     */
    public ToastDialog setMsg(String msg) {
        tvLoadInfo.setText(msg);
        return this;
    }

    /**
     * 是否允許關閉對話框
     *
     * @param isAllowClose
     * @return
     */
    public ToastDialog setIsAllowClose(boolean isAllowClose) {
        setCanceledOnTouchOutside(isAllowClose);
        this.isAllowClose = isAllowClose;
        return this;
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (!isAllowClose) {
            return true;
        } else {
            return super.onKeyDown(keyCode, event);
        }
    }
}

步驟五：Demo測試修改布局和主類

修改activity_main.xml内容如下（注意自定義控件包名）：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.jaiky.test.toastdialog.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn1"
            android:text="彈出加載對話框"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <Button
            android:id="@+id/btn2"
            android:text="不允許關閉對話框"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />
    </LinearLayout>

</RelativeLayout>

修改MainActiivty内容如下（注意包名）：

package com.jaiky.test.toastdialog;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    Button btn1, btn2;
    ToastDialog mToastDialog;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn1 = (Button) findViewById(R.id.btn1);
        btn2 = (Button) findViewById(R.id.btn2);


        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mToastDialog == null)
                    mToastDialog = new ToastDialog(MainActivity.this);
                mToastDialog.setMsg("正在加載...")
                .show();
            }
        });

        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mToastDialog == null)
                    mToastDialog = new ToastDialog(MainActivity.this);
                mToastDialog.setIsAllowClose(false);
            }
        });
    }
}

--------------------------------------------------------------------------------------------------------------------

擷取源代碼及資源檔案： https://github.com/jaikydota/Android-ToastDialog

--------------------------------------------------------------------------------------------------------------------

聲明

歡迎轉載，但請保留文章原始出處

作者：Jaiky_傑哥 

出處：http://blog.csdn.net/jaikydota163/article/details/52098841

android Android實用視圖及工具系列 Toast對話框 載入對話框 Android對話框 Android幀動畫 Android入門對話框
上一篇: Toast系列（一）：Toast基本工作原理（android 7.0及以前）
下一篇: Sklearn實作KMeans聚類

繼續閱讀