ด้วยไลบรารีMaterial Componentใหม่คุณสามารถปรับแต่งรูปร่างของส่วนประกอบโดยใช้shapeAppearanceOverlayแอตทริบิวต์ในสไตล์ของคุณ ( หมายเหตุ:ต้องใช้เวอร์ชัน1.1.0 )
เพียงใช้วิธีการBottomSheetDialogFragmentลบล้างonCreateViewจากนั้นกำหนดรูปแบบที่คุณกำหนดเองสำหรับกล่องโต้ตอบด้านล่าง
กำหนดbottomSheetDialogThemeแอตทริบิวต์ในstyles.xmlธีมแอปของคุณ:
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<item name="colorPrimary">@color/colorPrimary</item>
....
<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>
คุณสามารถได้รับพฤติกรรมเดียวกันที่แทนที่วิธีนี้ในของคุณBottomSheetDialogFragment(แทนที่จะเพิ่มbottomSheetDialogThemeในธีมแอปของคุณ):
@Override public int getTheme() {
return R.style.CustomBottomSheetDialog;
}
ในกรณีนี้คุณกำลังใช้ธีมนี้โอเวอร์เลย์เฉพาะในแอพเดียวBottomSheetDialogFragmentและไม่ได้อยู่ในแอพทั้งหมด
หมายเหตุสำคัญเกี่ยวกับสถานะที่ขยาย :
ในรัฐขยายตัวที่ BottomSheet มีมุมแบน คุณสามารถตรวจสอบความคิดเห็นอย่างเป็นทางการในgithub repo :
ทีมออกแบบของเรามีความเห็นเป็นอย่างยิ่งว่ามุมโค้งมนบ่งบอกถึงเนื้อหาที่เลื่อนได้ในขณะที่มุมแบนแสดงว่าไม่มีเนื้อหาเพิ่มเติม ด้วยเหตุนี้พวกเขาจึงไม่ต้องการให้เราเพิ่มการเปลี่ยนแปลงนี้ด้วย fitToContents
พฤติกรรมนี้จัดทำขึ้นโดยBottomSheetBehaviorและเป็นไปไม่ได้ที่จะลบล้างพฤติกรรมนี้
อย่างไรก็ตามมีวิธีแก้ไขเบื้องต้น -> การปฏิเสธความรับผิด:สามารถหยุดทำงานได้ในรุ่นถัดไป !!
คุณสามารถเพิ่มBottomSheetCallbackใน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;
}