圆角 BottomSheetDialogFragment

我有一个习俗 BttomSheetDialogFragment, 我希望在底部的顶部有圆角

这是我的用户课,夸大了我想要看到的布局


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 android:shape="rectangle" xmlns:android="[url=http://schemas.android.com/apk/res/android">]http://schemas.android.com/apk ... gt%3B[/url]
<corners android:topleftradius="35dp" android:toprightradius="35dp"></corners>
<solid android:color="@color/white"></solid>
<padding android:bottom="10dp" android:left="16dp" android:right="16dp" android:top="10dp"></padding>


但问题是当我将此资源文件设置为我的布局根元素的背景时 , 角落仍然没有圆形

, 我不能使用下面的代码。 :


this.getDialog//.getWindow//.setBackgroundDrawableResource/R.drawable.charge_layout_background/;


因为他的默认重新定义背景是平等的 BottomSheetDialog, 在我的下方没有明亮的灰色
</shape>
已邀请:

君笑尘

赞同来自:

创建自定义画布
rounded_dialog.xml

:


xml version="1.0" encoding="utf-8"?
<shape android:shape="rectangle" xmlns:android="[url=http://schemas.android.com/apk/res/android">]http://schemas.android.com/apk ... gt%3B[/url]
<solid android:color="@android:color/white"></solid>
<corners android:topleftradius="16dp" android:toprightradius="16dp"></corners>
</shape>


然后覆盖
bottomSheetDialogTheme


styles.xml

, 使用 drawable 作为背景:


<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 
<item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
</style>
<style name="AppBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/AppModalStyle</item>
</style>
<style name="AppModalStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/rounded_dialog</item>
</style>


这将改变一切 BottomSheetDialogs 你的申请。

卫东

赞同来自:

在新图书馆的帮助下
https://github.com/material-co ... droid
你可以
https://github.com/material-co ... hapes
您的组件使用

属性
shapeAppearanceOverlay

在你的风格 /

笔记:

这需要版本。

1.1.0

/

刚使用
https://developer.android.com/ ... gment
BottomSheetDialogFragment

, 覆盖方法
onCreateView

, 然后为底板的对话框确定自己的样式。

确定属性
bottomSheetDialogTheme


styles.xml

在您的申请主题中:


 Base application theme. 
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<!-- Customize your theme here. -->
<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>


https://i.stack.imgur.com/1VmSy.png
通过覆盖您在您的方法中可以获得相同的行为
BottomSheetDialogFragment

/而不是加入
bottomSheetDialogTheme

在您的申请中/:


@Override public int getTheme// {
return R.style.CustomBottomSheetDialog;
}


在这种情况下,您使用此 themeOverlay 只有一个
BottomSheetDialogFragment

, 而不是整个申请。

重要的提示

关于

延长状态

:

在部署中 BottomSheet

有平坦的角落

. 您可以查看官方评论
https://github.com/material-co ... 68983
github :

我们的设计师团队坚信圆角角度表示滚动的内容,并且平坦角度表示没有额外的内容。 所以他们不希望我们添加这种变化 fitToContents.

提供此行为
BottomSheetBehavior

, 并且无法覆盖它。

但是,有一个解决方法 ->

DISCLAIMER:

它可以停止在以下版本中工作。 !!

你可以加
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/ {
//In the EXPANDED STATE apply a new MaterialShapeDrawable with rounded cornes
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 =

//Create a ShapeAppearanceModel with the same shapeAppearanceOverlay used in the style
ShapeAppearanceModel.builder/getContext//, 0, R.style.CustomShapeAppearanceBottomSheetDialog/
.build//;

//Create a new MaterialShapeDrawable /you can't use the original MaterialShapeDrawable in the BottoSheet/
MaterialShapeDrawable currentMaterialShapeDrawable = /MaterialShapeDrawable/ bottomSheet.getBackground//;
MaterialShapeDrawable newMaterialShapeDrawable = new MaterialShapeDrawable//shapeAppearanceModel//;
//Copy the attributes in the new MaterialShapeDrawable
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;
}

八刀丁二

赞同来自:

BottomSheetDialog

设置默认的白色背景 , 因此,要显示它们的角度,您需要使对话框的背景透明,覆盖样式
BottomSheetDialog

.

确定你的风格
res/values/styles/styles.xml



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


并将这种风格设置为您的 BottomSheetDialog


View view = getLayoutInflater//.inflate/R.layout.chooser_bottom_sheet, null/;
BottomSheetDialog dialog = new BottomSheetDialog/this,R.style.BottomSheetDialog/; // Style here
dialog.setContentView/view/;
dialog.show//;

裸奔

赞同来自:

创建一个名称的数字 rounded_corners_shape


<shape android:shape="rectangle" xmlns:android="[url=http://schemas.android.com/apk/res/android">]http://schemas.android.com/apk ... gt%3B[/url]
<corners android:topleftradius="8dp" android:toprightradius="8dp"></corners>
<solid android:color="@color/white"></solid>
</shape>


样式定义


<style name="AppBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/AppModalStyle</item>
</style>
<style name="AppModalStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/rounded_corners_shape</item>
</style>


在您的自定义上使用此样式 BottomSheetDialogFragment 所以,这将是一份工作!


public class CustomDialogFragment extends BottomSheetDialogFragment {
@Override
public void onCreate/@Nullable Bundle savedInstanceState/ {
super.onCreate/savedInstanceState/;
setStyle/STYLE_NORMAL, R.style. AppBottomSheetDialogTheme/;
}

...
}

冰洋

赞同来自:

如果您正在使用
https://github.com/material-co ... droid
, 你只需要覆盖
ShapeAppearance.MaterialComponents.LargeComponent

/由于底板使用此表格/ 例如,设置所需的值 :


<style name="ShapeAppearance.YourApp.LargeComponent" parent="ShapeAppearance.MaterialComponents.LargeComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">12dp</item>
</style>


然后在您的应用程序样式中安装 :


<item name="shapeAppearanceLargeComponent">@style/ShapeAppearance.YourApp.LargeComponent</item>


同样,它也有效,但它更容易。

知食

赞同来自:

回答



为我工作,你必须尝试一下。

创建 xml 在 drawable , 说 dialog_bg.xml


xml version="1.0" encoding="utf-8"?
<shape xmlns:android="[url=http://schemas.android.com/apk/res/android">]http://schemas.android.com/apk ... gt%3B[/url]
<solid android:color="@color/white"></solid>
<corners android:radius="30dp"></corners>
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp"></padding>
</shape>


把它放在你的根结 layout xml:

将其安装为布局中的背景。 xml


android:background="@drawable/dialog_bg"


和在
onCreateView//

一年把它放在这一点:

安装透明对话框的背景。


dialog.getWindow//.setBackgroundDrawable/new ColorDrawable/Color.TRANSPARENT//;

莫问

赞同来自:

我今天检查了同样的情况,是的,你是对下一个代码的


this.getDialog//.getWindow//.setBackgroundDrawableResource/R.drawable.charge_layout_background/;


这也适用于零碎背景,因此您必须从对话框中获取底板视图并更改此代码的后台。


@SuppressLint/"RestrictedApi"/
@Override
public void setupDialog/Dialog dialog, int style/ {
super.setupDialog/dialog, style/;
View rootView = getActivity//.getLayoutInflater//.inflate/R.layout.view_member_info,null,false/;
unbinder = ButterKnife.bind/this, rootView/;
adjustUIComponents//;
dialog.setContentView/rootView/;
FrameLayout bottomSheet = /FrameLayout/ dialog.getWindow//.findViewById/android.support.design.R.id.design_bottom_sheet/;
bottomSheet.setBackgroundResource/R.drawable.container_background/;
}


在这里,底形表是您要更改的实际视图。

石油百科

赞同来自:

创建一个数字 drawable .., 我们将用作底板的背景 .
指定左上角和右角的半径的相应值 .


xml version="1.0" encoding="utf-8"?
<shape android:shape="rectangle" xmlns:android="[url=http://schemas.android.com/apk/res/android">]http://schemas.android.com/apk ... gt%3B[/url]
<corners android:topleftradius="24dp" android:toprightradius="24dp"></corners>
<padding android:top="2dp"></padding>
<solid android:color="@color/white"></solid>
</shape>


现在创造一种风格 " 底部纸张对话框的片段 "


<style name="BottomSheet" parent="@style/Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/drawable_bottomsheet_background</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"></style>


现在创建一个将展开的自定义类 BottomSheetDilogFragment, 你在哪里提供风格 .


open class CustomRoundBottomSheet : BottomSheetDialogFragment// {

override fun getTheme//: Int = R.style.BottomSheetDialogTheme

override fun onCreateDialog/savedInstanceState: Bundle?/: Dialog = BottomSheetDialog/requireContext//, theme/

}


现在使用您希望具有圆角的圆角的此类。 .
例如。


class BottomSheetSuccess : CustomRoundBottomSheet// {

override fun onCreateView/inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?/: View? {
return inflater.inflate/R.layout.bottomsheet_shopcreate_success, container, false/
}


override fun onViewCreated/view: View, savedInstanceState: Bundle?/ {
super.onViewCreated/view, savedInstanceState/
}

}

知食

赞同来自:

此答案仅适用于设置背景颜色的问题
Color.TRANSPARENT

在设置图形后,用圆形的背景布局。

没有答案为我致力于设置背景颜色
Color.TRANSPARENT

, 除了覆盖解决方案
setupDialog//

:


@Override
public void setupDialog/Dialog dialog, int style/ {
super.setupDialog/dialog, style/;
View contentView = View.inflate/getContext//,
R.layout.fragment_bottom_sheet, null/;
dialog.setContentView/contentView/;
...
//View/ contentView.getParent///.setBackgroundColor/ContextCompat.getColor/getContext//, android.R.color.transparent//;
}


BUT

contentView

, 在这里安装哪些对话 - 这不是那样的
view

, 你进去的
onViewCreated//

当充气B.
onCreateView//

. 它违反了标准流,因此它可能会导致问题,例如您无法使用
View Bindings

-
Kotlin Android Extensions


onViewCreated//


所以我纠正了一点安装背景
onActivityCreated//

:


override fun onActivityCreated/savedInstanceState: Bundle?/ {
super.onActivityCreated/savedInstanceState/
/view?.parent as View/.setBackgroundColor/Color.TRANSPARENT/
}


我希望这有助于那些遇到同样麻烦的人

知食

赞同来自:

将这两种方法添加到您的课堂上 BottomsheetDialogFragment.


public void setDialogBorder/Dialog dialog/ {
FrameLayout bottomSheet = /FrameLayout/ dialog.getWindow//.findViewById/android.support.design.R.id.design_bottom_sheet/;
bottomSheet.setBackground/new ColorDrawable/Color.TRANSPARENT//;
setMargins/bottomSheet, 10, 0, 10, 20/;
}

private void setMargins/View view, int left, int top, int right, int bottom/ {
if /view.getLayoutParams// instanceof ViewGroup.MarginLayoutParams/ {
ViewGroup.MarginLayoutParams p = /ViewGroup.MarginLayoutParams/ view.getLayoutParams//;
p.setMargins/left, top, right, bottom/;
view.requestLayout//;
}
}


现在调用方法
setDialogBorder/dialog/

在方法中
setupDialog//

你的班 BottomsheetDialogFragment.

现在在文件夹中创建表单文件 drawable.


xml version="1.0" encoding="utf-8"?
<shape android:shape="rectangle" xmlns:android="[url=http://schemas.android.com/apk/res/android">]http://schemas.android.com/apk ... gt%3B[/url]
<corners android:radius="20dp"></corners>
<solid android:color="@color/white"></solid>
<stroke android:color="@color/transparent" android:width="1dp"></stroke>
</shape>


现在安装父对话框的背景 viewgroup 在文件中 xml.


android:background="@drawable/round_border_white"


准备好 !!

郭文康

赞同来自:

我知道这个问题已经有一个普遍接受的答案。 我想经过我通过的问题,以及我如何在未来终于让他的工作对某人有用。

首先,我用过
Theme.AppCompat.Light.DarkActionBar

作为我们的父母
AppTheme

. 这意味着决定 @Gabriele Mariotti 继续犯错误
Could not inflate Behavior subclass com.google.android.material.bottomsheet.BottomSheetBehavior

. 我纠正了它,只是改变父母
Theme.MaterialComponents.Light.DarkActionBar

. 它没有影响我们的主题,但是 RTE 消失了。 您也可以通过简单地打开您的风格来纠正此问题。 但我没有发现需要什么样的风格 BottomSheetBehavior.

其次,正如我尝试的那样,但我无法获得框架的实际布局 /这是 BottomSheetDialogFragment/, 使用圆角。 我意识到将此参数安装到可以绘制的图像,工作,但不是图形或
@null

. 事实证明,这是因为
LinearLayout

, 我使用过哪个背景。 它在任何风格的背景上。 拆除最终导致圆角。

此外,我不需要在角落里安装任何背景表单。 Mariotti一旦我做出上述变化就会工作。 但是,要设置背景的背景颜色,我想看到他,我不得不覆盖元素 "backgroundTint".

PS: 我是新的b。 Android dev 我支持在大学内部使用的旧应用程序。 我对布局系统不太熟悉 Android 或者与材料库。 可能,这就是为什么它花了 3 一天了解它。 我希望这对未来某人有用。

江南孤鹜

赞同来自:

创建一个具有圆角的自定义绘图,并将其安装为您的布局根的背景 BottomSheetDialogFragment


xml version="1.0" encoding="UTF-8"?
<shape android:shape="rectangle" xmlns:android="[url=http://schemas.android.com/apk/res/android">]http://schemas.android.com/apk ... gt%3B[/url]
<solid android:color="@color/colorPrimary"></solid>
<corners android:bottomleftradius="0dp" android:bottomrightradius="0dp" android:topleftradius="12dp" android:toprightradius="12dp"></corners>
</shape>


然后只需将下面的代码添加到您的课程中 BottomSheetDialogFragment


@Override
public void setupDialog/Dialog dialog, int style/ {
super.setupDialog/dialog, style/;
View contentView = View.inflate/getContext//,
R.layout.fragment_bottom_sheet, null/;
dialog.setContentView/contentView/;

CoordinatorLayout.LayoutParams params = /CoordinatorLayout.LayoutParams/ //View/ contentView.getParent///
.getLayoutParams//;
CoordinatorLayout.Behavior behavior = params.getBehavior//;
//View/ contentView.getParent///.setBackgroundColor/ContextCompat.getColor/getContext//, android.R.color.transparent//;
}


您甚至可以使用参数来安装边距,如下所示


params.setMargins/50, 0, 50, 0/;

龙天

赞同来自:

消除这个问题的另一种方法是扩展 BottomSheetDialog 并创建一个与您需求匹配的自定义类。 您可以为文件做同样的事情。 layout xml 并添加背景或任何其他必要的设置。 它还具有优点,即您不会依赖于所用标识符的名称 Android/android.support.design.R.id.design_bottom_sheet/, 改变背景时 /虽然标识符名称的变化很少发生 AFAIK/.

龙天

赞同来自:

你必须改变
bottom sheet theme

, 实现顶级圆形布局

创建自定义画布 background_bottom_sheet_dialog_fragment.xml:


xml version="1.0" encoding="utf-8"?
<shape android:shape="rectangle" xmlns:android="[url=http://schemas.android.com/apk/res/android">]http://schemas.android.com/apk ... gt%3B[/url]
<corners android:topleftradius="8dp" android:toprightradius="8dp"></corners>
<padding android:top="0dp"></padding>
<solid android:color="@color/white"></solid>
</shape>


然后覆盖 bottomSheetDialogTheme 在 styles.xml, 使用 drawable 作为背景:


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"></style>


这将改变下纸张的后台位置。

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
}

郭文康

赞同来自:

添加具有圆角的图形,使其成为根布局的背景


xml version="1.0" encoding="utf-8" ?
<shape android:shape="rectangle" xmlns:android="[url=http://schemas.android.com/apk/res/android">]http://schemas.android.com/apk ... gt%3B[/url]
<corners android:topleftradius="@dimen/padding_margin_16_dp" android:toprightradius="@dimen/padding_margin_16_dp"></corners>
<solid android:color="@color/white"></solid>
</shape>


让背景透明 BottomSheetDialogFragment


override fun onActivityCreated/savedInstanceState: Bundle?/ {
super.onActivityCreated/savedInstanceState/
/view?.parent as View/.setBackgroundColor/Color.TRANSPARENT/
}


他的工作 Contraintlayout, Framelyaout, Linearlayout, Relativelayout.

窦买办

赞同来自:

它为我工作了

创建一个名称的数字 shape_rounded_dialog


<shape android:shape="rectangle" xmlns:android="[url=http://schemas.android.com/apk/res/android">]http://schemas.android.com/apk ... gt%3B[/url]
<solid android:color="@color/color_white"></solid>
<corners android:topleftradius="16dp" android:toprightradius="16dp"></corners>


添加以下样式


<style name="AppBottomSheetDialogTheme" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
<item name="bottomSheetStyle">@style/CustomBottomSheetStyle</item>
</style>
<style name="CustomBottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/shape_rounded_dialog</item>
</style>


在课堂里 DialogFragment, getTheme 覆盖和返回风格的方式。


@Override
public int getTheme// {
return R.style.AppBottomSheetDialogTheme;
}


</shape>

要回复问题请先登录注册