![](/img/trans.png)
[英]Floating action button (Fab) Icon size problems after migrating to sdk 28
[英]Adjust icon size of Floating action button (fab)
新的浮动操作按钮应为56dp x 56dp ,其中的图标应为24dp x 24dp 。 所以 icon 和 button 之间的间距应该是16dp 。
<ImageButton
android:id="@+id/fab_add"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:background="@drawable/ripple_oval"
android:elevation="8dp"
android:src="@drawable/ic_add_black_48dp" />
ripple_oval.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item>
<shape android:shape="oval">
<solid android:color="?android:colorAccent" />
</shape>
</item>
</ripple>
这是我得到的结果:
我使用了\material-design-icons-1.0.0\content\drawable-hdpi\ic_add_black_48dp.png 中的图标
https://github.com/google/material-design-icons/releases/tag/1.0.1
如何使按钮内的图标大小与指南中描述的完全一致?
http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button
由于您的内容是 24dp x 24dp,您应该使用24dp icon 。 然后在 ImageButton 中设置android:scaleType="center"
以避免自动调整大小。
将支持库更新到 v28.0.0 后,尝试使用app:maxImageSize="56dp"
而不是上述答案
在维度中输入此条目
<!--Floating action button-->
<dimen name="design_fab_image_size" tools:override="true">36dp</dimen>
这里 36dp 是浮点按钮上的图标大小。 这将为浮动操作按钮的所有图标设置 36dp 大小。
根据评论更新
如果您想将图标大小设置为特定的浮动操作按钮,只需使用浮动操作按钮属性,例如 app:fabSize="normal" 和 android:scaleType="center"。
<!--app:fabSize decides size of floating action button You can use normal, auto or mini as per need-->
app:fabSize="normal"
<!--android:scaleType decides how the icon drawable will be scaled on Floating action button. You can use center(to show scr image as original), fitXY, centerCrop, fitCenter, fitEnd, fitStart, centerInside.-->
android:scaleType="center"
自定义 FAB 有三个关键的 XML 属性:
app:fabSize
:“迷你”(40dp)、“普通”(56dp) (默认)或“自动”app:fabCustomSize
:这将决定整体 FAB 大小。app:maxImageSize
:这将决定图标大小。例子:
app:fabCustomSize="64dp"
app:maxImageSize="32dp"
FAB 填充(图标和背景圆圈之间的空间,又名涟漪)通过以下方式隐式计算:
4-edge padding = (fabCustomSize - maxImageSize) / 2.0 = 16
请注意,fab 的边距可以通过通常的android:margin
xml 标签属性设置。
设计指南定义了两种大小,除非有充分的理由不使用任何一种,否则可以使用FloatingActionButton
组件的fabSize
XML 属性来控制大小。
考虑使用app:fabSize="normal"
或app:fabSize="mini"
,例如:
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_done_white_24px"
app:fabSize="mini" />
<ImageButton
android:background="@drawable/action_button_bg"
android:layout_width="56dp"
android:layout_height="56dp"
android:padding="16dp"
android:src="@drawable/ic_add_black_48dp"
android:scaleType="fitXY"
android:elevation="8dp"/>
使用您提供的背景,我的设备上会显示以下按钮(Nexus 7 2012)
在我看来很好。
你的目标是什么?
如果将图标图像大小设置为更大的:
确保图像尺寸大于目标尺寸(so you can set max image size for your icon)
我的目标图标图像大小为84dp ,晶圆厂大小为112dp :
<android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src= <image here> app:fabCustomSize="112dp" app:fabSize="auto" app:maxImageSize="84dp" />
如果您使用的是 androidx 1.0.0 并使用自定义 fab 大小,则必须使用指定自定义大小
app:fabCustomSize="your custom size in dp"
默认情况下,尺寸为 56dp,还有另一种变体,即 40dp 的小型晶圆厂,如果您使用任何东西,则必须指定它才能正确计算填充
您可以使用 FloatingActionButton 的以下设置:android:scaleType 和 app:maxImageSize。 至于我,如果 android:scaleType="centerInside" 和 app:maxImageSize="56dp",我就得到了理想的结果。
由于FAB
就像ImageView
所以你可以使用scaleType
属性来改变ImageView
的图标大小。 FAB
默认scaleType
是fitCenter
。 您可以使用center
和centerInside
分别使图标变小和变大。
scaleType
属性的所有值是 - center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY
和matrix
。
有关更多详细信息,请参阅https://developer.android.com/reference/android/widget/ImageView.ScaleType.html 。
关闭@IRadha 在矢量可绘制设置中的答案android:height="_dp"
并将缩放类型设置为android:scaleType="center"
将可绘制设置为设置的任何大小
新的浮动操作按钮应为56dp x 56dp ,其内部的图标应为24dp x 24dp 。 因此,图标和按钮之间的间距应为16dp 。
<ImageButton
android:id="@+id/fab_add"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:background="@drawable/ripple_oval"
android:elevation="8dp"
android:src="@drawable/ic_add_black_48dp" />
波纹_oval.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item>
<shape android:shape="oval">
<solid android:color="?android:colorAccent" />
</shape>
</item>
</ripple>
这是我得到的结果:
我使用了\\ material-design-icons-1.0.0 \\ content \\ drawable-hdpi \\ ic_add_black_48dp.png中的图标
https://github.com/google/material-design-icons/releases/tag/1.0.1
如何使按钮内的图标大小完全符合准则中所述?
http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button
使用 ExtendedFloatingActionButton,这为我解决了这个问题:
app:iconSize="<x>dp"
我试过iconPadding
或fabCustomSize
但我似乎没有任何变化
您可以使用以下方法轻松设置 FAB 图标大小,
最终 FloatingActionButton 按钮 = 新的 FloatingActionButton(context);
button.setCustomSize(50);
android:id="@+id/floatingActionButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="true"
app:backgroundTint="#FBFAFA"
app:fabCustomSize="70dp"
app:fabSize="mini"
app:maxImageSize="84dp"
app:srcCompat="@drawable/resim"
app:tint="#E81C1C"
tools:layout_editor_absoluteX="325dp"
tools:layout_editor_absoluteY="517dp" />
我是这样处理的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.