新 Material 库：中心图标，在按钮内的文本上方

Question

我有这个按钮，我想让图标居中，但它也应该在文本上方。

问题是，有一个设置图标重力的选项，即app:iconGravity，但它只有两个选项，其中none是中心。如果没有文本，将选项设置为 textStart 会将图标移动到中心，但我希望图标居中并位于文本上方。

这是当前代码：

<com.google.android.material.button.MaterialButton
            android:id="@+id/payButton"
            style="@style/Widget.MaterialComponents.Button.Icon"
            android:layout_width="0dp"
            android:layout_height="96dp"
            android:layout_weight="1"
            android:fontFamily="@font/montserrat_regular"
            android:text="@string/pay"
            android:textColor="?attr/colorPrimary"
            app:backgroundTint="@android:color/white"
            app:icon="@drawable/ic_pay_black_24dp"
            app:iconGravity="textStart"
            app:iconSize="32dp"
            app:iconTint="@color/colorPrimary" />

Answer 1

MaterialButton 视图不允许执行您想要的操作。您将根据自己的观点手动完成。

Answer 2

他们似乎不认为这是一个好idea/design但是他们的设计者同意在未来的版本中添加该功能。

这里有一个 request/discussion 在他们的 repo 上围绕这个主题： https://github.com/material-components/material-components-android/issues/671

目前，我发现的唯一可能性是：

使用 android:drawableTop 而不是 app:icon：可定制性较差
创建您自己的自定义视图或布局，并将其包含在您需要的地方

我刚刚提交了一个 PR 来添加这个功能，因为他们似乎同意它应该支持 top gravity。

更新 (2021-02-17)

现在应该可以通过使用以下选项之一在 Material 1.3.0 上使用它：app:iconGravity="top" 或 app:iconGravity="textTop"

新 Material 库：中心图标，在按钮内的文本上方

New Material Library: Center icon, above the text inside button

xml

android

android-button

material-design