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

Question

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

我尝试使用标准和自定义样式的按钮来实现此功能，但它们的效果不佳 UI，并且它们不支持其中的图标。

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

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

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

Answer 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
}

结果是这样的：

Answer 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 等生成更多像您照片中的按钮并处理每个按钮的点击。

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

Implement a squared, colored and round-edged button in Android?

user-interface

android

styles

user-experience

button