如何制作自定义大小的FloatingActionButton

Question

默认情况下，FloatingActionButton有两种大小（normal和mini），但我需要另一种比normal更大的大小。

xml中的app:fabSize参数变成了FloatingActionButton类中的private int mSize;变量。实际大小将由此函数确定：

final int getSizeDimension() {
    switch(this.mSize) {
    case 0:
    default:
        return this.getResources().getDimensionPixelSize(dimen.fab_size_normal);
    case 1:
        return this.getResources().getDimensionPixelSize(dimen.fab_size_mini);
    }
}

因为它被声明为 final，所以我不能继承它。有什么想法吗？也许我可以在我的应用程序中重新定义 dimen.fab_size_mini 资源？

- tse

---

它是最终的，因为它遵循了Material指南。 - Gabriele Mariotti

有哪些准则禁止扩展getSizeDimension方法？你是什么意思？ - tse

设计库遵循材料指南，这是你只能使用2维的原因。请查看http://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button。 - Gabriele Mariotti

Answer 1

自支持库版本27.1.0起，这里有一个相关属性：

只需设置app:fabCustomSize即可。

- osrl

Answer 2

因为我没有使用大小为mini的FAB，所以我重新定义了这个尺寸。

dimens.xml：

<resources>
    <dimen name="design_fab_size_mini">100dp</dimen>
</resources>

布局文件 layout.xml（第一个浮动操作按钮比第二个更大）：

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/addPhoto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        app:fabSize="mini"
        android:layout_marginBottom="@dimen/fab_margin_bottom"
        android:layout_marginRight="@dimen/fab_margin_right"
        android:src="@drawable/ic_photo_camera_white_24dp"

        />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/addPicture"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@id/addPhoto"
        android:layout_marginBottom="@dimen/fab_margin_bottom"
        android:layout_marginRight="0dp"
        android:src="@drawable/ic_photo_white_24dp"
        />

- tse

---

当fab为正常大小而不是mini时，类似的名称是design_fab_size_normal。 - Vlad

Answer 3

您可以通过以下方式定义自己的浮动操作按钮（FloatingActionButton）

public class CustomSizeFloatingActionButton extends FloatingActionButton {

    public CustomSizeFloatingActionButton(Context context) {
        super(context);
    }

    public CustomSizeFloatingActionButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomSizeFloatingActionButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        setMeasuredDimension((int) (width * 1.5f), (int) (height * 1.5f));
    }

}

你可以定义自己的乘数，而不是使用1.5f。
这样做可以避免重新定义可能会影响应用程序其他部分的资源。

- Rino

Answer 4

问题在MaterialComponents依赖中的新版本浮动操作按钮中得到解决。

使用以下代码：

app:maxImageSize="24dp"
app:fabCustomSize="34dp"

请添加以下依赖项：

implementation 'com.google.android.material:material:1.1.0'

将AppCompat主题更改为MaterialComponents以查看效果。

styles.xml

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:fontFamily">@font/raleway</item>
    </style>

注意：Android项目应迁移到AndroidX

您需要使用此依赖项

这将适用于API级别大于等于21的设备（API >= 21）

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_share"
    android:padding="0dp"
    app:backgroundTint="@color/yellow"
    app:maxImageSize="24dp"
    app:fabCustomSize="34dp"
    />

我希望这能帮助到某个人。

- Nikesh Nayak

Answer 5

您可以按照以下步骤设置自定义大小

**将高度或宽度设置为match_parent，另一个根据需要进行设置**

<android.support.design.widget.FloatingActionButton
    android:id="@+id/addPhoto"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    />

- Saubhik Singh