加載旋轉框(loading spinner)


目標是這樣的

用到的組件 AlertDialogProgressBar

先創建一個 AlertDialog 的布局

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

<!-- File: res/layout/dialog_loading.xml -->
<ProgressBar
    style="?android:progressBarStyleLarge"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

接下來創建彈窗類,需要將背景設置為透明,否則背景很難看

package com.seliote.loadingdialog;

/**
 * File: com/seliote/loadingdialog/LoadingDialog.java
 */

import android.content.Context;
import android.support.v7.app.AlertDialog;

public class LoadingDialog {
    private Context mContext;
    private AlertDialog mAlertDialog;

    public LoadingDialog(Context aContext) {
        mContext = aContext;
        mAlertDialog = new AlertDialog.Builder(mContext)
                .setView(R.layout.dialog_loading)
                .create();
        // Set AlertDialog background to transparent
        mAlertDialog.getWindow().getDecorView().setBackgroundResource(android.R.color.transparent);
    }

    public void show() {
        if (!mAlertDialog.isShowing()) {
            mAlertDialog.show();
        }
    }

    public void dismiss() {
        if (mAlertDialog.isShowing()) {
            mAlertDialog.dismiss();
        }
    }
}

效果

背景在彈窗后自動變暗,不怎么好看,修改一下

res/layout/styles.xml 中添加 style 標簽

<!-- Disable background dim for AlertDialog -->
<style name="NoDimAlertDialog" parent="Theme.AppCompat.Dialog.Alert">
    <item name="android:backgroundDimEnabled">false</item>
</style>

應用標簽,LoadingDialog.java 中創建 AlertDialog 時使用自定義樣式
mAlertDialog = new AlertDialog.Builder(mContext, R.style.NoDimAlertDialog)
效果

ok,大體完成

再來點微調,下方加上提示符,loading_dialog.xml 改為

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

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- style="?android:progressBarStyleLarge" 變成大圈 -->
    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"/>

    <!-- 顏色默認為白色,記得改一下,不然看不到 -->
    <TextView
        android:id="@+id/loading_dialog_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="16dp"
        android:text="@string/default_loading_dialog_text"
        android:textSize="16sp"
        android:textAllCaps="false"
        android:textColor="@android:color/darker_gray"/>

</LinearLayout>

LoadingDialog.java 改為

package com.seliote.driftbottle.component;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.app.AlertDialog;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;

import com.seliote.driftbottle.R;

/**
 * 加載旋轉框,用於耗時操作時堵塞用戶操作
 */
public class LoadingDialog {

    private Context mContext;
    private AlertDialog mAlertDialog;
    private View mView;

    /**
     * 構造一個可以阻塞用戶操作的的彈窗對象
     *
     * @param aContext 上下文對象
     */
    public LoadingDialog(Context aContext) {
        this.mContext = aContext;

        this.mView = LayoutInflater.from(aContext).inflate(R.layout.dialog_loading, null);

        this.mAlertDialog = new AlertDialog
                .Builder(this.mContext, R.style.NoDimAlertDialog)
                .setView(this.mView)
                .setCancelable(false)
                .create();
        // 將背景設置為透明的
        this.mAlertDialog.getWindow().getDecorView().setBackgroundResource(android.R.color.transparent);
    }

    /**
     * 構造一個可以阻塞用戶操作的的彈窗對象,並指定提示字符
     *
     * @param aContext    上下文對象
     * @param aPromptText 提示字符
     */
    public LoadingDialog(Context aContext, @NonNull String aPromptText) {
        this.mContext = aContext;

        this.mView = LayoutInflater.from(aContext).inflate(R.layout.dialog_loading, null);

        TextView textView = this.mView.findViewById(R.id.loading_dialog_text_view);
        textView.setText(aPromptText);

        this.mAlertDialog = new AlertDialog
                .Builder(this.mContext, R.style.NoDimAlertDialog)
                .setView(this.mView)
                .setCancelable(false)
                .create();
        // 將背景設置為透明的
        this.mAlertDialog.getWindow().getDecorView().setBackgroundResource(android.R.color.transparent);
    }

    /**
     * 顯示彈窗
     */
    public void show() {
        if (!this.mAlertDialog.isShowing()) {
            this.mAlertDialog.show();
        }
    }

    /**
     * 隱藏彈窗
     */
    public void dismiss() {
        if (this.mAlertDialog.isShowing()) {
            this.mAlertDialog.dismiss();
        }
    }

    /**
     * 更改提示字符
     *
     * @param aPrompt 提示字符
     */
    public void changePrompt(String aPrompt) {
        TextView textView = this.mView.findViewById(R.id.loading_dialog_text_view);
        textView.setText(aPrompt);
    }
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM