在 Android 中实现方形、彩色和圆边按钮？答案

【问题标题】：Implement a squared, colored and round-edged button in Android?在 Android 中实现方形、彩色和圆边按钮？
【发布时间】：2021-04-14 17:59:30
【问题描述】：

我正在尝试设计一个带有按钮驱动用户界面的 Android 应用。这意味着有几个按钮，具有不同的颜色和图标，每个按钮都执行其任务。

我尝试使用标准和自定义样式的按钮来实现这一点，但它们没有漂亮的 UI，而且它们不支持其中的图标。

我尝试过使用 fabs，但 fabs 不是为此目的，我正在寻找稍微圆润的东西，更像这样：

这将是完美的，因为按钮是彩色的，带有圆形边缘的方形，它们包含一个图标，并且它们下面有一个标签。

有任何建议/示例可以复制这种相同的观点吗？对于颜色，您只需从调色板中选择浅色和深色变体。将文本标签放在按钮下方非常简单，但我不知道如何在 XML 中编写类似的代码。

【问题讨论】：

标签： android user-interface button styles user-experience

【解决方案1】：

如果我是你，我会这样做

这是按钮布局。 ic_baseline_folder_24 是使用 Android Studio 生成的矢量资产

<LinearLayout
  android:id="@+id/folder_button"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="vertical">

  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/bg_image_button"
    android:padding="12dp"
    android:src="@drawable/ic_baseline_folder_24" />

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Folders"
    android:textColor="#CCC" />

</LinearLayout>

bg_image_button.xml 是这样定义的。它可以扩展以支持不同的状态：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape >
      <solid android:color="#7B0800"/>
      <corners android:radius="8dp" />
    </shape>
  </item>
</selector>

最后，设置点击动作处理程序：

val binding = ActivityMainBinding.inflate(layoutInflater)
binding.folderButton.setOnClickListener {
  // do something
}

结果如下：

【讨论】：

谢谢！有没有办法以编程方式更改图像视图的背景颜色？
@AndreaCioccarelli 在此处更改背景颜色需要您更改可绘制对象的背景颜色，在本例中为 bg_image_button.xml。这是您每次想要实现这一点时都需要执行的几行代码。我们不要忘记，您需要创建如此多的 XML 文件才能在菜单中使用不同的颜色。使用我提供的解决方案，CardView 在这种情况下是一个更好的解决方案，因为您可以用一条简单的线更改背景颜色：cardView.setBackgroundColor(color);并且不会影响其他菜单项。
背景颜色可以使用setBackgroundResource(int resId) 和不同的背景xml 资源以编程方式更改。如果图像视图需要不同的状态，如禁用、单击、激活，我相信它更容易。如果不需要状态变化，SlothCoding 的解决方案也很有效。
感谢两位。这非常有用且简单明了:)

【解决方案2】：

我会做的就是这个。我使用 CardView 创建了一个带有圆角的按钮。 CardView 非常棒且易于使用，您以后可以轻松更改任何您想要的内容。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/btn_settings"
    android:layout_width="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:cardCornerRadius="20dp"
        app:cardBackgroundColor="@android:color/holo_blue_bright">
        
        <ImageView
            android:layout_width="52dp"
            android:layout_height="52dp"
            android:src="@drawable/ic_settings"
            android:layout_gravity="center"/>
    </androidx.cardview.widget.CardView>

    <TextView
        android:layout_gravity="center_horizontal"
        android:textSize="20sp"
        android:textColor="@android:color/black"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Settings" />    
</LinearLayout>

使用此代码，您可以得到：

现在只需输入您的代码类型：

LinearLayout btn_settings = findViewById(R.id.btn_settings);
btn_settings.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               //do something
           }
       });

现在在 onClick 中输入您的代码来处理按钮的点击。制作更多这样的布局并将它们添加到您想要的任何视图中。 GridView、RecylcerView 等生成更多按钮，例如在您的照片中并处理每个按钮的点击。

【讨论】：