Question

我们有一个Android应用，该应用的视图顶部带有一排按钮。该行中的三个按钮中的每个按钮均由一个圆圈内的图标组成，并在圆圈下方描述了该文字（类似于线框，尽管我随机选择了这些图标，因为我不允许分享实际的图标）：

最初，这些按钮被设计为具有图标，圆形背景和圆形边框作为光栅图像（根据需要具有多个密度）和以下代码（重复3次，每个按钮一次）：

<LinearLayout
    android:id="@+id/button1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/button1Image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:clickable="false"
        android:contentDescription="@string/button1Text"
        android:src="@drawable/button1Image" />

    <TextView
        android:id="@+id/txtButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="3dp"
        android:text="@string/button1Text"
        android:textColor="@android:color/white"
        android:textSize="14sp" />
</LinearLayout>

我被赋予了现代化代码的任务，因为我们使用的图标实际上都是原始的矢量图标（来自Material Design Library），我们应该能够只使用这些矢量而不必担心光栅化和像素密度。

我想做的是从图标本身中删除圆圈（以便我可以使用“材质”矢量图标而无需对其进行修改），并让按钮背景添加圆圈。（这也使我可以根据应用程序变体来更改圆圈的颜色，而无需使用许多不同的图像集。）

我已经看到了许多如何制作一个既带有图标又包含文本的圆形按钮的示例，但是我似乎无法弄清楚如何制作一个看起来像我想要的按钮。

如何制作一个很好的可重用组件，该组件可以使用矢量图标和文本，并为每个按钮提供此布局？

澄清：我想在这里做的是从图标中删除圆圈，并将圆圈作为按钮的背景。我知道我可以使用两个按钮来做到这一点，一个按钮用于不带背景的文本，一个按钮用于具有背景的图像，但是我想知道是否有一种方法可以对单个XML标签进行处理，因为我有一个完整的按钮一堆。

Answer 1

您可以使用按钮并使用android:drawableTop="@drawable/icon"来设置按钮的图标。

这里是完整代码：

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:background="@android:color/transparent"
        android:drawableTop="@drawable/ic_launcher_background"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

已更新：在这种情况下，您可以做的是创建自定义组件并从那里设置顶部图标。这是我尝试并成功的步骤：

在attrs.xml中创建res/values folder文件，并将topIcon创建为属性名称：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="topIcon" format="reference" />

    <declare-styleable name="CustomButton">
        <attr name="topIcon" />
    </declare-styleable>
</resources>

创建CustomButton类，并使用LayerDrawable添加可绘制的圆形作为背景图层：

public class CustomButton extends Button {
    public CustomButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        if (attrs != null) {
            TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomButton);
            Drawable topIcon = typedArray.getDrawable(R.styleable.CustomButton_topIcon);

            LayerDrawable layerDrawable = new LayerDrawable(
                    new Drawable[]{getResources().getDrawable(R.drawable.circle), topIcon}
            );

            setCompoundDrawablesWithIntrinsicBounds(null, layerDrawable, null, null);
            typedArray.recycle();
        }
    }
}

使用从布局文件创建的组件并设置topIcon属性。另外，随着我们扩展Button类，您可以使用它的任何其他属性。确保包名称正确：

   <com.natigbabayev.experimental.CustomButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:topIcon="@android:drawable/ic_input_add"/>

Answer 2

使用Material Button；例如：

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

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        android:text="@string/text_button_delete"
        android:layout_width="wrap_content"
        android:layout_height="148dp"
        android:elevation="4dp"
        android:textSize="18sp"
        app:cornerRadius="80dp"
        app:icon="@drawable/ic_delete_black_36dp"
        app:iconPadding="6dp"/>

</layout>

如何清理这些复杂的按钮？

2 个答案: