Android 按钮设计，自定义按钮，圆形按钮，颜色

2 年 ago
清, 扬
7 minutes

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

安卓按钮设计

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

  • state_pressed
  • state_selected
  • state_focused
  • state_enabled

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

Android自定义按钮项目结构

android button selector 
<?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="Colored Selector" />

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

禁用按钮的选择器

这个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="Color Selector Disabled" />

不同的可绘制物选择器

根据按钮的状态，我们可以设置不同的可绘制图像进行显示。负责这样做的选择器代码包含在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:scale属性，用于调整可绘制对象的图像大小。

<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" />

安卓按钮颜色

我们可以根据选择器中的状态更改按钮上的文字颜色。来自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="Text Selector"
            android:textColor="@drawable/btn_txt_selector" />

安卓按钮形状

我们可以使用xml标签在按钮上设置自定义形状。这些xml文件也是在drawable文件夹中创建的。形状可以在选择器中使用。形状可以设置为矩形（默认）、椭圆、环形、线条。在形状标签内部最常用的标签有：[需要具体列举需要翻译的标签名称]

  • – Setting start and end colors of the gradient along with the type(radius, linear, sweep)
  • – Setting border color and width
  • – Setting the solid color on the button
  • – Setting radius

安卓圆角按钮

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的倍数指定，否则会崩溃。
将按钮形状设置为capsule 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="Selectors"
            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="Colored Selector" />

        <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="Color Selector Disabled" />

        <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="Text Selector"
            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="Shapes+Selectors"
            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="ROUND SHAPE" />

        <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="SHAPE WITH GRADIENT" />


        <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="SELECTOR SHAPE" />


        <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="Text Selector"
            android:textColor="@drawable/btn_txt_selector" />


    </LinearLayout>


</LinearLayout>

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

android custom button design app example
发表回复 0

Your email address will not be published. Required fields are marked *