底部導航欄 - 矩形操作按鈕

Question

使用google.android.material ：

1. 是否可以制作動作按鈕矩形？
2. 是否有可能將它移動得更高/更低？

我說的是中間的圓圈按鈕。

Answer 1

您可以使用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版本。

Answer 2

試試這個：如果你正在使用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 3

要更改浮動操作按鈕的形狀，您可以在 drawable 文件夾中創建一個單獨的資源文件，例如： 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" />

然后在浮動操作按鈕中添加以下屬性：

 android:background="@drawable/shape"

此外，您可以使用保證金將其移得更高。

Answer 4

對 FAB 使用elevation屬性

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