새로운 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;
}
이 경우이 themeOverlay 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;
}