📜  如何在Android中创建CircularDialog?(1)

📅  最后修改于: 2023-12-03 14:52:39.261000             🧑  作者: Mango

在Android中创建CircularDialog

在Android应用程序开发中,我们经常需要在界面上显示对话框以提醒用户或获取用户的信息。其中,圆形对话框广泛应用于许多应用程序,它不仅美观,而且可以在设计中提高用户体验。在本文中,我们将介绍如何在Android中创建一个圆形对话框。

创建一个自定义布局

首先,我们需要创建一个自定义布局来表示圆形对话框。我们可以使用XML文件来创建自定义布局。以下是一个示例布局文件,定义了一个圆形对话框。

    <?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"
        android:background="@android:color/transparent">

        <RelativeLayout
            android:id="@+id/dialog_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:padding="20dp"
            android:background="@drawable/circular_dialog_background">

            <ProgressBar
                android:id="@+id/progress_bar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="@style/Widget.AppCompat.ProgressBar"
                android:indeterminateDrawable="@drawable/circular_progress_bar"
                android:layout_centerHorizontal="true" />

            <TextView
                android:id="@+id/message_text"
                android:layout_below="@id/progress_bar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Loading..."
                android:textColor="#fff"
                android:layout_marginTop="10dp"
                android:layout_centerHorizontal="true"/>

        </RelativeLayout>

    </RelativeLayout>
创建圆形进度条

我们需要使用圆形进度条的样式来表示进度条。以下是一个示例进度条文件。@drawable/circular_progress_bar.xml

    <?xml version="1.0" encoding="utf-8"?>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:drawable="@drawable/progress_anim"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromDegrees="0"
        android:toDegrees="360">
    </rotate>

其中,progress_anim是一个带有动画的Drawable。该Drawable文件的内容如下。@drawable/progress_anim.xml

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

        <item
            android:drawable="@drawable/progress_1"
            android:duration="50"/>

        <item
            android:drawable="@drawable/progress_2"
            android:duration="50"/>

        <item
            android:drawable="@drawable/progress_3"
            android:duration="50"/>

        <item
            android:drawable="@drawable/progress_4"
            android:duration="50"/>

        <item
            android:drawable="@drawable/progress_5"
            android:duration="50"/>

        <item
            android:drawable="@drawable/progress_6"
            android:duration="50"/>

        <item
            android:drawable="@drawable/progress_7"
            android:duration="50"/>

        <item
            android:drawable="@drawable/progress_8"
            android:duration="50"/>

    </animation-list>
使用DialogFragment

在Android中,我们可以使用DialogFragment类来显示对话框。我们需要创建一个自定义对话框类并扩展自DialogFragment类。在该类中,我们可以获取到自定义布局文件和圆形进度条,并对其进行初始化和设置。以下是一个示例自定义对话框类。

    public class CircularDialog extends DialogFragment {

        @Override
        public Dialog onCreateDialog(Bundle savedInstanceState) {

            Dialog dialog = new Dialog(getActivity(), R.style.DialogStyle);
            dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
            dialog.setCancelable(false);

            LayoutInflater inflater = LayoutInflater.from(getActivity());
            View view = inflater.inflate(R.layout.circular_dialog, null);

            TextView messageText = view.findViewById(R.id.message_text);
            ProgressBar progressBar = view.findViewById(R.id.progress_bar);

            messageText.setText("Loading...");

            dialog.setContentView(view);

            return dialog;

        }

    }

在上面的代码中,我们使用onCreateDialog方法来创建对话框,并获取自定义布局文件。我们还设置了一个圆形进度条,该进度条将会被使用来显示进度。在该类中,可以根据需要添加其他的自定义UI元素和逻辑。

启动圆形对话框

现在,我们可以在需要显示圆形对话框的地方,使用以下代码来显示它。

    CircularDialog circularDialog = new CircularDialog();
    circularDialog.show(getActivity().getSupportFragmentManager(), "CircularDialog");
代码片段

此处为自定义布局文件的示例代码。

    <?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"
        android:background="@android:color/transparent">

        <RelativeLayout
            android:id="@+id/dialog_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:padding="20dp"
            android:background="@drawable/circular_dialog_background">

            <ProgressBar
                android:id="@+id/progress_bar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="@style/Widget.AppCompat.ProgressBar"
                android:indeterminateDrawable="@drawable/circular_progress_bar"
                android:layout_centerHorizontal="true" />

            <TextView
                android:id="@+id/message_text"
                android:layout_below="@id/progress_bar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Loading..."
                android:textColor="#fff"
                android:layout_marginTop="10dp"
                android:layout_centerHorizontal="true"/>

        </RelativeLayout>

    </RelativeLayout>

此处为代码片段的示例代码。


public class CircularDialog extends DialogFragment {

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {

        Dialog dialog = new Dialog(getActivity(), R.style.DialogStyle);
        dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
        dialog.setCancelable(false);

        LayoutInflater inflater = LayoutInflater.from(getActivity());
        View view = inflater.inflate(R.layout.circular_dialog, null);

        TextView messageText = view.findViewById(R.id.message_text);
        ProgressBar progressBar = view.findViewById(R.id.progress_bar);

        messageText.setText("Loading...");

        dialog.setContentView(view);

        return dialog;

    }

}