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

问题描述

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

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

我尝试过晶圆厂，但晶圆厂并非用于此目的，我正在寻找稍微圆润的东西，更像这样：

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

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

解决方法

如果我是你，我会这样做

这是按钮布局。 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
}

结果如下：

,

我要做的就是这个。我使用 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 等，用于生成更多按钮（如照片中的按钮）并处理每个按钮的点击。