如何使用BottomSheetDialogFragment在左右到底部的底部构建边距？

Question

我想给左右的底部对话框提供保证金。我尝试了几种方法，但不幸的是不起作用。

我有一个底部纸，当我使用底部导航移动到其中一个片段时，它会打开。

底部导航：

这是使用 BottomSheetDialoggragment 实现的底部表，当我单击一个导航菜单之一时，它会出现。

这是为此的代码：

class ProfileFragment : BottomSheetDialogFragment() {

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {

    // Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_profile_bottom_sheet, container, false)
}

}

，这是我的布局文件的样子：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@color/transparent"
tools:context=".fragments.ProfileFragment"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:orientation="vertical"
>

<LinearLayout
  android:id="@+id/bottomSheet"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="vertical"
  android:background="@color/purple_200"
  >

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

  <de.hdodenhof.circleimageview.CircleImageView
      android:id="@+id/profile_image"
      android:layout_width="96dp"
      android:layout_height="96dp"
      android:src="@drawable/img_profile"
      />

  <LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center_vertical"
      android:orientation="vertical"
      >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Akash Sharma"
        android:textColor="@color/black"
        android:textStyle="bold"
        android:textSize="24sp"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View Profile"
        android:fontFamily="sans-serif"
        android:layout_marginTop="4dp"
        />
  </LinearLayout>

</LinearLayout>

<View
    android:layout_width="wrap_content"
    android:layout_height="2dp"
    android:background="#43736C6C"
    android:layout_marginTop="8dp"
    android:layout_marginLeft="12dp"
    android:layout_marginRight="12dp"
    />


<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="24dp"
    >


  <ImageView
      android:layout_width="30dp"
      android:layout_height="30dp"
      android:src="@drawable/ic_pen"
      />


  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="My Posts"
      android:layout_marginLeft="10dp"
      android:textSize="20sp"
      android:textColor="@color/black"
      />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="24dp"
    >


  <ImageView
      android:layout_width="30dp"
      android:layout_height="30dp"
      android:src="@drawable/ic_groups"
      />


  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="My Posts"
      android:layout_marginLeft="10dp"

      android:textSize="20sp"
      android:textColor="@color/black"
      />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="24dp"
    >


  <ImageView
      android:layout_width="30dp"
      android:layout_height="30dp"
      android:src="@drawable/ic_location"
      />


  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="My Location"
      android:textSize="20sp"
      android:layout_marginLeft="10dp"
      android:textColor="@color/black"
      />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="24dp"
    >


  <ImageView
      android:layout_width="30dp"
      android:layout_height="30dp"
      android:src="@drawable/ic_share"
      />


  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Share App"
      android:layout_marginLeft="10dp"
      android:textSize="20sp"
      android:textColor="@color/black"
      />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="24dp"
    >


  <ImageView
      android:layout_width="30dp"
      android:layout_height="30dp"
      android:src="@drawable/ic_settings"
      />


  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Settings &amp; Privacy "
      android:layout_marginLeft="12dp"
      android:textSize="20sp"
      android:textColor="@color/black"
      />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="24dp"
    >


  <ImageView
      android:layout_width="30dp"
      android:layout_height="30dp"
      android:src="@drawable/ic_feedback"
      />


  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Give Feedback"
      android:layout_marginLeft="12dp"
      android:textSize="20sp"
      android:textColor="@color/black"
      />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="24dp"
    >


  <ImageView
      android:layout_width="30dp"
      android:layout_height="30dp"
      android:src="@drawable/ic_signout"
      />


  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Sign Out"
      android:layout_marginLeft="12dp"
      android:textSize="20sp"
      android:textColor="@color/black"
      android:layout_marginBottom="16dp"
      />
    </LinearLayout>

  </LinearLayout>

</RelativeLayout>

    

Answer 1

在应用程序主题的 styles.xml 中定义 BottomSheetDialogTheme 属性：

  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.MaterialComponents.Light">
    <!-- Customize your theme here. -->
    
    <item name="bottomSheetDialogTheme">@style/CustomBottomSheetDialog</item>
  </style>

然后只需使用 shapeAppearanceOverlay 定义您喜欢的形状，

 <style name="CustomBottomSheetDialog" parent="@style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/CustomBottomSheet</item>
  </style>

  <style name="CustomBottomSheet" parent="Widget.MaterialComponents.BottomSheet">
    <item name="shapeAppearanceOverlay">@style/CustomShapeAppearanceBottomSheetDialog</item>
  </style>

  <style name="CustomShapeAppearanceBottomSheetDialog" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">16dp</item>
    <item name="cornerSizeTopLeft">16dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
  </style>

然后在自定义片段中覆盖此方法。

 @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //bottom sheet round corners can be obtained but the while background appears to remove that we need to add this.
        setStyle(DialogFragment.STYLE_NO_FRAME,R.style.CustomBottomSheetDialog);
    }