2023全面指南：Android自定义按钮设计与实现，打造精美圆形按钮与颜色搭配技巧

3 年 ago

清, 扬

7 minutes

在本教程中，我们将自定义Android应用中的按钮。如果您对Android按钮不熟悉，请在开始之前查看相关基础教程。我们将在XML中为按钮设置选择器和形状。

Android按钮设计

选择器用于为按钮的不同状态定义不同的行为。什么是可绘制状态？视图（按钮或任何其他类型的视图）的以下事件都是一种状态类型：

state_pressed（按下状态）
state_selected（选中状态）
state_focused（聚焦状态）
state_enabled（启用状态）

当你将鼠标指针悬停在小部件上时，state_focused（聚焦状态）被激活。通常只在模拟器上有效。state_selected（选中状态）用于选择视图，无法用于普通按钮上，但可以用于单选按钮。对于按钮而言，通常只有三个重要状态：正常、按下和启用。对于选择器的每个状态，我们可以在按钮上设置不同的drawable（可绘制资源）/颜色/形状。让我们在一个新的Android Studio项目中开始实现每个状态的功能。

Android自定义按钮项目结构

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@color/red"/>
    <item android:state_focused="true" android:drawable="@color/yellow"/>
    <item android:drawable="@color/green"/>
</selector>

在上述代码中，每个状态都用item标签表示。选择器标签的行为有点类似于if-else if语句。它从上到下检查每个条件。每当条件匹配时，它会设置按钮上的相关内容，并停止处理下一个item标签。第三个item标签是默认的。我们将其保留在最后是很重要的。如果将其放在顶部，将不允许其他两个item标签被执行。我们在activity_main.xml中的按钮上设置了以上的可绘制选择器文件。

<Button
    android:id="@+id/btnBgSelector"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:background="@drawable/btn_bg_selector"
    android:padding="8dp"
    android:text="颜色选择器" />

选择器设置在按钮的background（背景）属性上。

禁用按钮的选择器

这个selector（选择器）btn_bg_selector_disabled.xml被用在一个未启用的按钮上。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@color/yellow"/>
    <item android:state_pressed="true" android:drawable="@color/red"/>
    <item android:drawable="@color/green"/>
</selector>

要让上述选择器起作用，我们需要将android:enabled（启用）属性指定为false。

<Button
    android:id="@+id/btnBgSelectorDisabled"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:background="@drawable/btn_bg_selector_disabled"
    android:enabled="false"
    android:padding="8dp"
    android:text="禁用的颜色选择器" />

不同的可绘制资源选择器

根据按钮的状态，我们可以设置不同的可绘制图像进行显示。负责这样做的选择器代码包含在btn_drawable_selector.xml文件中。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/sad" android:state_pressed="true"/>
    <item android:drawable="@drawable/happy" android:state_focused="true"/>
    <item android:drawable="@drawable/happy"/>
</selector>

注意：聚焦状态在智能手机上无效。现在，当将可绘制图像设置为按钮背景时，如果其宽度/高度大于按钮的宽度/高度，图像将被拉伸。因此，我们需要根据可绘制图像设置按钮的宽度/高度。可以通过在XML中硬编码或以编程方式获取可绘制图像的尺寸并将其设置在按钮上来实现。为了方便起见，我们在这里选择了前者。

<Button
    android:id="@+id/btnDrawableSelector"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_margin="8dp"
    android:background="@drawable/btn_drawable_selector"
    android:padding="16dp" />

当你需要将可绘制对象作为按钮背景显示时，ImageButton（图像按钮）是理想的视图，因为它能够适当地调整可绘制对象的大小。ImageButton还带有android:scaleType（缩放类型）属性，用于调整可绘制对象的图像大小。

<ImageButton
    android:id="@+id/imgButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:background="@color/green"
    android:padding="8dp"
    android:scaleType="center"
    android:src="@drawable/btn_drawable_selector" />

Android按钮颜色

我们可以根据选择器中的状态更改按钮上的文字颜色。来自btn_txt_selector.xml的以下代码实现了这一功能。在此处我们需要使用android:color来替换android:drawable。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/red"/>
    <item android:state_focused="true" android:color="@color/yellow"/>
    <item android:color="@color/green"/>
</selector>

布局中的按钮：

<Button
    android:id="@+id/btnTxtSelector"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="8dp"
    android:text="文字颜色选择器"
    android:textColor="@drawable/btn_txt_selector" />

Android按钮形状

我们可以使用XML标签<shape>在按钮上设置自定义形状。这些XML文件也是在drawable文件夹中创建的。形状可以在选择器中使用。形状可以设置为矩形（默认）、椭圆、环形、线条。在形状标签内部最常用的标签有：<ul class=”post-ul”><li><gradient> – 设置渐变的起始和结束颜色以及类型（径向、线性、扫描）</li><li><stroke> – 设置边框颜色和宽度</li><li><solid> – 设置按钮的纯色填充</li><li><corners> – 设置圆角半径</li></ul></p>

安卓圆角按钮

btn_shape_round.xml文件的XML代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:padding="16dp"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="@android:color/black" />
    <corners android:radius="10dp" />
</shape>

就像选择器一样，我们可以在XML布局中的Button上设置android:background属性。

具有渐变效果的安卓按钮形状

在下面的btn_shape_gradient.xml文件中，我们将渐变设置为径向渐变。我们也必须设置gradient_radius属性。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:endColor="@color/green"
        android:gradientRadius="30dp"
        android:type="radial"
        android:startColor="@color/yellow" />

    <corners android:radius="@dimen/btn_corner_radius" />

    <stroke
        android:width="4dp"
        android:color="@android:color/black" />

</shape>

安卓按钮形状和选择器一同使用

btn_selector_shape.xml包含了选择器。每个项目都指定了一个形状。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">

        <shape android:shape="oval">
            <gradient android:angle="135" android:endColor="@color/jd_red" android:startColor="@color/green" />
            <corners android:radius="20dp" />
            <stroke android:width="2dp" android:color="@android:color/black" />
        </shape>

    </item>

    <item>
        <shape android:shape="rectangle">
            <gradient android:angle="225" android:endColor="@color/green" android:startColor="@color/jd_red" />
            <corners android:radius="@dimen/btn_corner_radius" />
            <stroke android:width="4dp" android:color="@android:color/black" />
        </shape>

    </item>
</selector>

当按钮被点击时，将其设置为椭圆形。
线性渐变的角度应以45的倍数指定，否则会导致程序崩溃。
将按钮形状设置为胶囊状，可以创建btn_shape_capsule.xml文件，在选择器中将形状设置为胶囊状。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape android:shape="rectangle">

            <solid android:color="@color/colorAccent" />
            <corners android:radius="10dp" />

        </shape>

    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/yellow" />
            <corners android:radius="10dp" />
        </shape>

    </item>

</selector>

下面是MainActivity.java类的代码，该类包含了上述所有按钮示例的代码。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:weightSum="2">


    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="选择器"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="bold|italic" />


        <Button
            android:id="@+id/btnBgSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector"
            android:padding="8dp"
            android:text="颜色选择器" />

        <Button
            android:id="@+id/btnBgSelectorDisabled"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector_disabled"
            android:enabled="false"
            android:padding="8dp"
            android:text="禁用颜色选择器" />

        <Button
            android:id="@+id/btnDrawableSelector"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_margin="8dp"
            android:background="@drawable/btn_drawable_selector"
            android:padding="16dp" />

        <ImageButton
            android:id="@+id/imgButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@color/green"
            android:padding="8dp"
            android:scaleType="center"
            android:src="@drawable/btn_drawable_selector" />

        <Button
            android:id="@+id/btnTxtSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="文本选择器"
            android:textColor="@drawable/btn_txt_selector" />


    </LinearLayout>


    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="形状+选择器"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="bold|italic" />

        <Button
            android:id="@+id/btnRoundShape"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_shape_round"
            android:padding="8dp"
            android:text="圆形形状" />

        <Button
            android:id="@+id/btnBgShape"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_shape_gradient"
            android:padding="8dp"
            android:text="渐变形状" />


        <Button
            android:id="@+id/btnSelectorShape"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_selector_shape"
            android:padding="8dp"
            android:text="选择器形状" />


        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_shape_gradient"
            android:padding="8dp"
            android:scaleType="center"
            android:src="@drawable/btn_drawable_selector" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_shape_capsule"
            android:padding="8dp"
            android:text="文本选择器"
            android:textColor="@drawable/btn_txt_selector" />


    </LinearLayout>


</LinearLayout>

安卓定制按钮设计应用的输出结果

#Android开发 #UI设计 #圆形按钮 #按钮设计 #自定义控件