底部导航栏 - 矩形操作按钮

Question

使用google.android.material：

1. 是否可以将操作按钮设为矩形？
2. 是否可以将它移高/低一点？

我说的是中间的圆圈按钮。

Answer 1

试试这个：如果你使用FloatingActionButton

app:borderWidth="0dp"

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    android:layout_marginRight="20dp"
    app:fabSize="normal"
    android:elevation="@dimen/fab_elevation"
    android:background="#000000"
    app:borderWidth="0dp"
    android:stateListAnimator="@animator/fab_anim"
    android:layout_gravity="center_horizontal"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true" />

希望这会有所帮助！

Answer 2

要更改浮动操作按钮的形状，您可以在可绘制文件夹中创建一个单独的资源文件，例如：shape.xml as-

<?xml version="1.0" encoding="utf-8"?>
<shape 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">

<solid android:color="@color/colorAccent" />

然后在 Floating Action Button 中添加以下属性：

 android:background="@drawable/shape"

此外，您可以使用边距将其移得更高。

Answer 3

使用elevation 属性到FAB

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/nav_items" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="40dp"
        android:clickable="true"
        app:elevation="8dp"
        app:srcCompat="@android:drawable/ic_input_add" />

Answer 4

可以使用app:shapeAppearanceOverlay属性实现方形按钮，app:fabCradleVerticalOffset属性可以改变FAB到BottomAppBar的距离。

类似：

  <com.google.android.material.bottomappbar.BottomAppBar
         app:fabCradleVerticalOffset="16dp"
         app:fabCradleRoundedCornerRadius="0dp"
         app:fabCradleMargin="0dp"
          ..>


      <com.google.android.material.floatingactionbutton.FloatingActionButton
          app:shapeAppearanceOverlay="@style/SquareFloatingShapeOVerlay"
          ../>

与：

  <style name="SquareFloatingShapeOVerlay" parent="">
    <item name="cornerSize">0dp</item>
  </style>

如果您想要 矩形 形状，可以使用 ExtendedFloatingActionButton 代替 FloatingActionButton。

类似：

  <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      app:layout_anchor="@id/bottom_app_bar"
      app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlayExtended"
      ../>

与：

  <style name="ShapeAppearanceOverlayExtended" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">0dp</item>
  </style>

注意：它需要材料组件库的版本1.1.0。