Với thư viện Thành phần Vật liệu mới, bạn có thể tùy chỉnh hình dạng của thành phần bằng cách sử dụng shapeAppearanceOverlay
thuộc tính theo phong cách của bạn ( Lưu ý: nó yêu cầu phiên bản 1.1.0 )
Chỉ cần sử dụng phương pháp ghi BottomSheetDialogFragment
đè onCreateView
và sau đó xác định kiểu tùy chỉnh của bạn cho Hộp thoại Trang tính Dưới cùng.
Xác định bottomSheetDialogTheme
thuộc tính trong styles.xml
chủ đề ứng dụng của bạn:
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<item name="colorPrimary">@color/colorPrimary</item>
....
<item name="bottomSheetDialogTheme">@style/CustomBottomSheetDialog</item>
</style>
Sau đó, chỉ cần xác định hình dạng yêu thích của bạn với 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>
Bạn có thể có được cùng một hành vi ghi đè phương thức này trong của bạn BottomSheetDialogFragment
(thay vì thêm bottomSheetDialogTheme
chủ đề trong ứng dụng của bạn):
@Override public int getTheme() {
return R.style.CustomBottomSheetDialog;
}
Trong trường hợp này, bạn đang sử dụng chủ đề này Chỉ phát trong một BottomSheetDialogFragment
và không phải trong tất cả các ứng dụng.
Lưu ý quan trọng về NHÀ NƯỚC MỞ RỘNG :
Ở trạng thái mở rộng, BottomSheet có các góc phẳng . Bạn có thể kiểm tra nhận xét chính thức trong github repo :
Nhóm thiết kế của chúng tôi rất kiên định rằng các góc tròn cho biết nội dung có thể cuộn được trong khi các góc phẳng cho biết không có nội dung bổ sung. Do đó, họ không muốn chúng tôi thêm thay đổi này với fitToContents.
Hành vi này được cung cấp bởi BottomSheetBehavior
và không thể ghi đè nó.
Tuy nhiên, có một cách giải quyết -> KHUYẾN CÁO: nó có thể ngừng hoạt động trong các bản phát hành tiếp theo !!
Bạn có thể thêm một BottomSheetCallback
trong BottomSheetDialogFragment
:
@NonNull @Override public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
Dialog dialog = super.onCreateDialog(savedInstanceState);
((BottomSheetDialog)dialog).getBehavior().addBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override public void onStateChanged(@NonNull View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_EXPANDED) {
MaterialShapeDrawable newMaterialShapeDrawable = createMaterialShapeDrawable(bottomSheet);
ViewCompat.setBackground(bottomSheet, newMaterialShapeDrawable);
}
}
@Override public void onSlide(@NonNull View bottomSheet, float slideOffset) {
}
});
return dialog;
}
@NotNull private MaterialShapeDrawable createMaterialShapeDrawable(@NonNull View bottomSheet) {
ShapeAppearanceModel shapeAppearanceModel =
ShapeAppearanceModel.builder(getContext(), 0, R.style.CustomShapeAppearanceBottomSheetDialog)
.build();
MaterialShapeDrawable currentMaterialShapeDrawable = (MaterialShapeDrawable) bottomSheet.getBackground();
MaterialShapeDrawable newMaterialShapeDrawable = new MaterialShapeDrawable((shapeAppearanceModel));
newMaterialShapeDrawable.initializeElevationOverlay(getContext());
newMaterialShapeDrawable.setFillColor(currentMaterialShapeDrawable.getFillColor());
newMaterialShapeDrawable.setTintList(currentMaterialShapeDrawable.getTintList());
newMaterialShapeDrawable.setElevation(currentMaterialShapeDrawable.getElevation());
newMaterialShapeDrawable.setStrokeWidth(currentMaterialShapeDrawable.getStrokeWidth());
newMaterialShapeDrawable.setStrokeColor(currentMaterialShapeDrawable.getStrokeColor());
return newMaterialShapeDrawable;
}