Android自定义加载框效果

下面是一份详细的攻略，希望能对您有所帮助。

Android自定义加载框效果

简介

在Android应用程序中，经常需要使用到数据加载框，用以提示用户正在等待数据加载，请稍候。Android系统提供了ProgressDialog组件，可以满足基本的需求，但是其官方提供的样式较为简单，不能满足我们的需求。

因此，我们需要对加载框进行自定义，根据自己的需求添加自己的样式。

实现步骤

1. 第一步：新建自定义加载框的布局文件

在res/layout/目录下，新建custom_loading_dialog.xml文件，用来定义我们自己的加载框布局。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/custom_loading_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/custom_loading_background"
        android:gravity="center">

        <ProgressBar
            android:id="@+id/custom_loading_progress_bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />

        <TextView
            android:id="@+id/custom_loading_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/custom_loading_progress_bar"
            android:layout_centerHorizontal="true"
            android:paddingTop="12dp"
            android:text="加载中..."
            android:textColor="@android:color/white"
            android:textSize="14sp" />
    </RelativeLayout>

</FrameLayout>

其中，我们使用了FrameLayout包裹RelativeLayout布局，是为了在布局中添加蒙层，使加载框位于顶层。

RelativeLayout布局中，我们添加了ProgressBar进度条和TextView文本控件，用于显示提示信息。同时我们添加了一个自定义Drawable作为背景，以实现美观的效果。

1. 第二步：定义自定义Drawable

在res/drawable/目录下，新建custom_loading_background.xml文件，用来定义我们自己的Drawable背景。

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

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

    <gradient
        android:endColor="#3F51B5"
        android:startColor="#303F9F"
        android:type="linear" />

</shape>

我们使用了ShapeDrawable，并定义了圆角矩形和线性渐变效果。

1. 第三步：创建自定义加载框

在需要使用的地方，创建自定义的加载框。

private Dialog dialog;

private void showLoadingDialog() {
    if (dialog == null) {
        dialog = new Dialog(this, android.R.style.Theme_Translucent_NoTitleBar);
        dialog.setContentView(R.layout.custom_loading_dialog);
        dialog.setCancelable(false);
    }
    dialog.show();
}

我们使用了Android系统提供的Dialog组件，并指定了它的主题为透明无标题栏主题。这里我们使用了一个成员变量dialog，如果需要多次使用，只需要检查dialog是否为空即可，避免重复创建。

1. 第四步：关闭自定义加载框

在需要关闭加载框的地方，调用下面的方法即可：

private void hideLoadingDialog() {
    if (dialog != null && dialog.isShowing()) {
        dialog.dismiss();
    }
}

我们检查dialog是否存在，以及是否在显示状态，如果是，则将其关闭。

示例说明

示例1：调用系统提供的ProgressDialog

如果我们只是需要一个基本的loading框，我们可以直接使用ProgressDialog组件来实现。下面是一个简单的示例：

private ProgressDialog progressDialog;

private void showProgressDialog() {
    if (progressDialog == null) {
        progressDialog = new ProgressDialog(this);
        progressDialog.setCanceledOnTouchOutside(false);
        progressDialog.setMessage("Loading...");
    }
    progressDialog.show();
}

private void hideProgressDialog() {
    if (progressDialog != null && progressDialog.isShowing()) {
        progressDialog.dismiss();
    }
}

这里我们使用了ProgressDialog组件，并设置了其消息和点击外部不可取消属性。

示例2：自定义加载框

如果我们需要一个自定义的加载框，我们可以使用上面的步骤，在需要的地方创建一个自定义的加载框。下面是一个示例：

private Dialog dialog;

private void showLoadingDialog() {
    if (dialog == null) {
        dialog = new Dialog(this, android.R.style.Theme_Translucent_NoTitleBar);
        dialog.setContentView(R.layout.custom_loading_dialog);
        dialog.setCancelable(false);
    }
    dialog.show();
}

private void hideLoadingDialog() {
    if (dialog != null && dialog.isShowing()) {
        dialog.dismiss();
    }
}

这里我们使用了自定义Dialog组件，以及自定义布局和背景，实现了一个简单的自定义加载框。