如何添加边距底部Sheet Fragment像Youtube应用程序?

Question

我只是想知道如何使用材料3设计像新版本的youtube应用程序添加边距到bottomsheetfragment。
这是底部表片段的截图，我想实现底部表的例子
我已经尝试了解决方案从这里自定义底部表对话框的视图，但它不能正常工作与材料3

这是我的底部页段布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context=".utils.Bottom">
<TextView
android:layout_width="match_parent"
android:layout_height="@dimen/dimen_48"
android:gravity="center_vertical"
android:text="Thhis is a bottom sheet"/>
<TextView
android:layout_width="match_parent"
android:layout_height="@dimen/dimen_48"
android:gravity="center_vertical"
android:text="Thhis is a bottom sheet"/>
<TextView
android:layout_width="match_parent"
android:layout_height="@dimen/dimen_48"
android:gravity="center_vertical"
android:text="Thhis is a bottom sheet"/>
<TextView
android:layout_width="match_parent"
android:layout_height="@dimen/dimen_48"
android:gravity="center_vertical"
android:text="Thhis is a bottom sheet"/>

下面是我的bottom sheet fragment类:

class BottomSheet : BottomSheetDialogFragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
// Inflate the layout for this fragment
val view = View.inflate(context,R.layout.fragment_bottom,null)

return view
}
}

我应该做些什么来复制底部的表单像上面的截图?

Answer 1

您可以通过将自定义样式设置为BottomSheetDialogFragment来实现这一点，这会使底部表单的背景透明。

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setStyle(STYLE_NORMAL, R.style.CustomBottomSheetDialogTheme)
}

创建新的样式到styles.xml文件

<style name="CustomBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/CustomBottomSheetStyle</item>
</style>
<style name="CustomBottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@android:color/transparent</item>
</style>

创建底部表单对话框布局文件

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#05ffffff">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_10sdp"
android:layout_marginEnd="@dimen/_10sdp"
android:layout_marginBottom="@dimen/_20sdp"
android:background="@drawable/dialog_bg"
app:layout_constraintBottom_toTopOf="@id/view1">
<View
android:id="@+id/view"
android:layout_width="@dimen/_60sdp"
android:layout_height="@dimen/_3sdp"
android:layout_marginTop="@dimen/_10sdp"
android:background="@drawable/rounded_corner"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Save To Watch Later"
android:textColor="@color/white"
android:textSize="@dimen/_15ssp"
android:layout_marginTop="@dimen/_10sdp"
app:layout_constraintTop_toBottomOf="@id/view" />
<TextView
android:id="@+id/text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Save To Watch Later"
android:textColor="@color/white"
android:textSize="@dimen/_15ssp"
android:layout_marginTop="@dimen/_10sdp"
app:layout_constraintTop_toBottomOf="@id/text1" />
<TextView
android:id="@+id/text3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Save To Watch Later"
android:textColor="@color/white"
android:textSize="@dimen/_15ssp"
android:layout_marginTop="@dimen/_10sdp"
app:layout_constraintTop_toBottomOf="@id/text2" />
<TextView
android:id="@+id/text4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingBottom="@dimen/_10sdp"
android:layout_marginTop="@dimen/_10sdp"
android:text="Save To Watch Later"
android:textColor="@color/white"
android:textSize="@dimen/_15ssp"
app:layout_constraintTop_toBottomOf="@id/text3" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="@+id/view1"
android:layout_width="@dimen/_60sdp"
android:layout_height="@dimen/_3sdp"
android:layout_marginBottom="@dimen/_20sdp"
android:background="@drawable/rounded_corner"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

设置5%的透明度背景色为主布局，并设置对话框背景为内部布局。