我有一个自定义的bittomsheetdialogfragment,我想在底部视图的顶部有圆角
这是我的自定义类,它膨胀了我想要从底部显示的布局
View mView;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
mView = inflater.inflate(R.layout.charge_layout, container, false);
initChargeLayoutViews();
return mView;
}
我还有这个XML资源文件作为背景:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<corners android:topRightRadius="35dp"
android:topLeftRadius="35dp"
/>
<solid android:color="@color/white"/>
<padding android:top="10dp"
android:bottom="10dp"
android:right="16dp"
android:left="16dp"/>
</shape>
问题是,当我把这个资源文件设置为我的布局的根元素的背景,角仍然不是圆角。
我不能使用以下代码:
this.getDialog().getWindow().setBackgroundDrawableResource(R.drawable.charge_layout_background);
因为它覆盖了底部对话框的默认背景,底部视图上方不会有任何半透明的灰色。
简单的解决方案:
class TopRoundedCornersFragment : BottomSheetDialogFragment() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setStyle(STYLE_NORMAL, R.style.AppBottomSheetDialogTheme)
}
}
在styles.xml
<style name="BottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/bottom_sheet_dialog_bg</item>
</style>
<style name="AppBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/BottomSheetStyle</item>
</style>
最后,创建一个顶部圆角可绘制资源(bottom_sheet_dialog_bg.xml)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/white" />
<corners
android:topLeftRadius="4dp"
android:topRightRadius="4dp" />
</shape>
如果你需要setFitContents=true,我尝试了通过钩子onStateChanged解决方案,但一旦对话框达到扩展状态,它就会从直角闪烁到圆角。这很烦人。
有一种替代的解决方案,它不会导致闪烁,不需要使用私有api,而且更易于阅读(恕我冒犯)。
查看BottomSheetBehavior的代码,我们发现:
/** True if Behavior has a non-null value for the @shapeAppearance attribute */
private boolean shapeThemingEnabled;
事实证明,如果形状主题被禁用,MaterialShapeDrawable将不会被使用。我们在BottomSheetBehavior.onLayout()中找到了这个:
// Only set MaterialShapeDrawable as background if shapeTheming is enabled, otherwise will
// default to android:background declared in styles or layout.
if (shapeThemingEnabled && materialShapeDrawable != null) {
ViewCompat.setBackground(child, materialShapeDrawable);
}
默认为android:background正是我们所需要的,因为这意味着完全控制如何渲染背景。
我们可以通过创建一个单独的样式来禁用材质主题,并将shapeAppearance和shapeAppearance overlay设置为null:
<style name="Theme.YourApp.NoShapeBottomSheetDialog" parent="Theme.MaterialComponents.BottomSheetDialog">
<item name="bottomSheetStyle">@style/Theme.YourApp.NoShapeButtonSheet</item>
</style>
<style name="Theme.YourApp.NoShapeButtonSheet" parent="Widget.MaterialComponents.BottomSheet.Modal">
<item name="shapeAppearance">@null</item>
<item name="shapeAppearanceOverlay">@null</item>
</style>
扩展BottomSheetDialogFragment和覆盖onCreateDialog:
public Dialog onCreateDialog(@Nullable Bundle savedInstanceState) {
return new BottomSheetDialog(requireContext(),
R.style.Theme_Grupin_NoShapeBottomSheetDialog);
}
下面的表格现在是裸露的,没有任何背景。所以我们可以添加任何我们想要的背景,没有动画将被触发。
首先,你应该创建一个可绘制的XML文件,其中包含一个顶部圆角的形状,任何你想要的名称。
我将其命名为bottom rounded_top_shape.xml
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<solid android:color="@android:color/white" />
<corners
android:topLeftRadius="16dp"
android:topRightRadius="16dp"
/>
然后在style.xml中添加这个
<style name="AppBottomSheetDialogTheme" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/AppModalStyle</item>
</style>
<style name="AppModalStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/rounded_top_shape</item>
</style>
然后在你的应用主题中添加如下所示的行
<style name="MyAppTheme" parent="Theme.MaterialComponents.Light.Bridge">
<!-- this line -->
<item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
</style>
如果您正在使用材质组件主题,您可以通过将背景颜色设置为透明,然后将布局的背景设置为四舍五入来覆盖BottomSheetDialog的默认行为。
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Customize your theme here. -->
<item name="bottomSheetDialogTheme">@style/BottomSheetDialog</item>
</style>
<style name="BottomSheetDialog" parent="ThemeOverlay.MaterialComponents.BottomSheetDialog">
<item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
</style>
<style name="bottomSheetStyleWrapper" parent="Widget.MaterialComponents.BottomSheet.Modal">
<item name="android:backgroundTint">@android:color/transparent</item>
</style>
rounded_corner.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/white"/>
<corners android:topLeftRadius="26dp"
android:topRightRadius="26dp"/>
</shape>
然后将形状应用到你的底部表格根布局的背景:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/rounded_corner">
<!--
other layout components
-->
</LinearLayout>
注意,如果你在底部表单布局中使用Webview这样的组件,你可能无法实现预期的圆角,因为Webview有一个默认的白色背景。在这种情况下,你可以像这样简单地删除背景:
webView.setBackgroundColor(0);
你必须改变底部的主题,以实现顶部圆形布局
创建一个自定义绘制background_bottom_sheet_dialog_fragment.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
<padding android:top="0dp" />
<solid android:color="@color/white" />
</shape>
然后在styles.xml上使用drawable作为背景覆盖bottomSheetDialogTheme:
<!--Bottom sheet-->
<style name="BottomSheet" parent="@style/Widget.Design.BottomSheet.Modal">
<item
name="android:background">@drawable/background_bottom_sheet_dialog_fragment
</item>
</style>
<style name="BaseBottomSheetDialog"
parent="@style/Theme.Design.Light.BottomSheetDialog">
<item name="android:windowIsFloating">false</item>
<item name="bottomSheetStyle">@style/BottomSheet</item>
</style>
<style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog" />
这将改变你的底页的背景布局
BottomSheetDialog
class SheetFragment() : BottomSheetDialogFragment() {
lateinit var binding: SheetFragmentBinding;
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val dialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog;
val view = View.inflate(context, R.layout.fragment_bottom_sheet, null);
binding = DataBindingUtil.bind(view)!!;
binding.viewModel = SheetFragmentVM();
dialog.setContentView(view);
var bottomSheetBehavior = BottomSheetBehavior.from(view.parent as View);
bottomSheetBehavior.setPeekHeight(BottomSheetBehavior.PEEK_HEIGHT_AUTO);
bottomSheetBehavior.setBottomSheetCallback(object :
BottomSheetBehavior.BottomSheetCallback() {
override fun onStateChanged(bottomSheet: View, newState: Int) {
if (BottomSheetBehavior.STATE_EXPANDED == newState) {
// do on STATE_EXPANDED
}
if (BottomSheetBehavior.STATE_COLLAPSED == newState) {
// do on STATE_COLLAPSED
}
if (BottomSheetBehavior.STATE_HIDDEN == newState) {
dismiss()
}
}
override fun onSlide(bottomSheet: View, slideOffset: Float) {
// do on slide
}
})
return dialog
}