如何将浮动操作按钮用作正方形？答案

【问题标题】：How do I use a floating action button as a square?如何将浮动操作按钮用作正方形？
【发布时间】：2020-11-09 05:28:29
【问题描述】：

有大量的 SO 线程说他们的按钮显示为一个 bug 的正方形

Floating Action Button with square shape

Square FloatingActionButton with Android Design Library

Floating Action Button appearing as a square

但是我的目标是使用方形按钮。如何将circle floating action button 更改为正方形？

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"     
        android:backgroundTint="@color/standardBlue"
        app:srcCompat="@drawable/ic_3d_model"/>

【问题讨论】：

标签： android floating-action-button material-components-android material-components android-shapedrawable

【解决方案1】：

您可以通过使用 shapeAppearanceOverlay 属性在 Material Components Library 中使用官方 FloatingActionButton 来实现。

只需使用：

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

与

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

【讨论】：

【解决方案2】：

你最好使用这个库 customFloatingActionButton Robertlevonyan。

<com.robertlevonyan.examples.customfloatingactionbutton.view.FloatingLayout
        android:id="@+id/floating_layout"
        app:fabType="square"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

【讨论】：

【解决方案3】：

FloatingActionButton 不提供shapes 以外的rounded 参见此Request: allow to set the shape of FAB

除此之外还有很多方法可以做到，但我个人推荐的一种方法是使用robertlevonyan 的customFloatingActionButton 库，它易于使用且可自定义。

方形

将以下代码行添加到您的模块（应用）级别的 Gradle 文件中

implementation 'com.robertlevonyan.view:CustomFloatingActionButton:3.0.1'

现在将以下代码添加到 activity_main.xml

<com.robertlevonyan.views.customfloatingactionbutton.FloatingActionButton
       android:id="@+id/custom_fab"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom|end" />

您也可以通过添加 app:fabType="square" 在 XML 中自定义它，但我更喜欢 MainActivity.java

然后在MainActivity.java中自定义floatingactionbutton

public class MainActivity extends AppCompatActivity {
    private FloatingActionButton floatingActionButton;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        floatingActionButton = findViewById(R.id.custom_fab);

        floatingActionButton.setFabType(FabType.FAB_TYPE_SQUARE); //set button type to square
        floatingActionButton.setFabIcon(getResources().getDrawable(R.drawable.ic_baseline_add_btn_24, null));

    }
}

输出

【讨论】：

不正确。官方 FAB 支持使用ShapeAppearanceModel 进行整形，您可以定义自定义CornerTreatment，而不仅仅是RoundedCornerTreatment 或CutCornerTreatment。在这种情况下，RoundedCornerTreatment 就足够了，只需使用0dp，您可以查看我的答案。