Android---下部ポップアップウィンドウのBottomSheetDialog

BottomSheetDialog は Android 開発におけるポップアップダイアログボックスで、画面の下部からポップアップし、メインインターフェイスの一部を覆います。

1.BottomSheetDialogの使用

// 参数2：设置BottomSheetDialog的主题样式；将背景设置为transparent，这样我们写的shape_bottom_sheet_dialog.xml才会起作用
BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(this, R.style.BottomSheetDialog);
//不传第二个参数
//BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(this);

// 底部弹出的布局
View bottomView = LayoutInflater.from(requireContext()).inflate(R.layout.bottom_sheet_layout, null);

bottomSheetDialog.setContentView(bottomView);
//设置点击dialog外部不消失
//bottomSheetDialog.setCanceledOnTouchOutside(false);
bottomSheetDialog.show();

2. ロードレイアウト

Bottom_sheet_layout.xml; LayoutInflater を通じて下部のポップアップウィンドウレイアウトを取得した後、setContentView() を通じてそのレイアウトを BottomSheetDialog にロードします。

<?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="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/shape_bottom_sheet_dialog">

    <TextView
        android:id="@+id/choose_photo"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="从手机相册选择"
        android:textSize="15sp"
        android:textColor="#191919"
        android:gravity="center"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#F5F5F5"/>
    <TextView
        android:id="@+id/check_photo"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="查看上一张头像"
        android:textSize="15sp"
        android:textColor="#191919"
        android:gravity="center"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#F5F5F5"/>
    <TextView
        android:id="@+id/save_photo"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="保存到手机"
        android:textSize="15sp"
        android:textColor="#191919"
        android:gravity="center"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="#F5F5F5"/>
    <TextView
        android:id="@+id/cancel"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="取消"
        android:textSize="15sp"
        android:textColor="#191919"
        android:gravity="center"/>

</LinearLayout>

3.表示

下部のポップアップウィンドウは、BottomSheetDialg.show() メソッドを呼び出すことで表示できます。

4.BottomSheetDialogの角丸設定

シェイプを記述し、Drawable の下にshape_bottom_sheet_dialog.xml を作成し、その中に角丸スタイルを設定します。

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

    <corners android:topLeftRadius="@dimen/dime_10dp"
        android:topRightRadius="@dimen/dime_10dp"/>
    <solid android:color="@color/white"/>

</shape>

bottom_sheet_layout.xmlの背景全体をshape_bottom_sheet_dialog.xmlの形状に設定します。

上記の設定では角丸効果は表示されません。また、BottomSheetDialog の背景を透明に設定する必要があります。テーマ.xml(res->values->主題)に次の 2 つを追加します。style。

    <!--实现BottomSheetDialog圆角效果-->
    <style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
    </style>
    <style name="bottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@android:color/transparent</item>
    </style>

new BottomSheetDialog() の 2 番目のパラメーターに、このスタイルを渡します。

new BottomSheetDialog(this, R.style.BottomSheetDialog);

Android---下部ポップアップウィンドウのBottomSheetDialog

おすすめ