Android Button圆角矩形+Selector组合

最新推荐文章于 2020-12-03 12:22:01 发布

原创最新推荐文章于 2020-12-03 12:22:01 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android

Android 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了如何在Android中创建一个圆角矩形的Button，并结合Selector实现不同状态的效果。通过使用Shape Drawable定义按钮的形状、颜色和圆角，以及State List Drawable定义按钮的点击和焦点状态，开发者可以自定义美观的交互式按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android默认Button是矩形的，假如需要一个圆角矩形的Button该如何实现呢？

Drawable Resources为我们提供了不同类型的画板。其中有一个Shape Drawable。这个XML文件定义了一个几何图形，包括颜色和渐变和四个边角角度。

关于<shape> Google官方文档也给出了详细的解释：点击打开链接 (需要翻墙)

Shape提供了几种属性：

1.<corners/>标签：用来描述圆角半径，默认为矩形。

<corners android:radius="10dp" />

表示四个圆角半径为10dp

2.<solid/>标签：填充的颜色。

<solid android:color="#6495ED" />

3.<stroke/>标签：轮廓属性

<stroke android:dashGap="0dp" android:width="2dp" android:color="@android:color/holo_orange_light" />

轮廓为实线，宽度为2dp以及颜色

4.<gradient/>标签：渐变色属性。

<gradient
        android:angle="135"
        android:centerX="0"
        android:centerY="0"
        android:endColor="@android:color/black"
        android:startColor="@android:color/white"
        android:type="linear"
        android:useLevel="true" />

5.<padding/>标签：内部内容距离View边距。

    <padding
        android:left="10dp"
        android:right="10dp" />

关于Selector也是Drawable Resources为我们提供的一个属性：State List

Selector标签内部提供了<item/>标签，其中有这几种属性比较常用：

<item android:state_pressed="true"> 点击状态

<item android:state_focused="true"> 焦点状态

<item android:state_selected="true"> 选中状态 =点击+焦点
<item >默认状态什么都不设置

将Selector与Shape结合：

在项目的res/drawable目录下新建一个state.xml：

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

    <item android:state_pressed="true"><shape>
            <corners android:radius="10dp" />

            <!-- <solid android:color="#6495ED" /> -->
            <padding android:left="10dp" android:right="10dp" />

            <stroke android:dashGap="0dp" android:width="2dp" android:color="@android:color/holo_orange_light" />

            <gradient android:angle="90" android:centerX="0" android:centerY="0" android:endColor="@android:color/black" android:startColor="@android:color/white" android:type="linear" android:useLevel="true" />
        </shape></item>
    <!-- pressed -->
    <item android:state_focused="true"><shape>
            <corners android:radius="10dp" />

            <!-- <solid android:color="#6495ED" /> -->
            <padding android:left="10dp" android:right="10dp" />

            <stroke android:dashGap="0dp" android:width="2dp" android:color="@android:color/holo_orange_light" />

            <gradient android:angle="90" android:centerX="0" android:centerY="0" android:endColor="@android:color/black" android:startColor="@android:color/white" android:type="linear" android:useLevel="true" />
        </shape></item>
    <!-- focused -->
    <item android:state_selected="true"><shape>
            <corners android:radius="10dp" />

            <!-- <solid android:color="#6495ED" /> -->
            <padding android:left="10dp" android:right="10dp" />

            <stroke android:dashGap="0dp" android:width="2dp" android:color="@android:color/holo_orange_light" />

            <gradient android:angle="90" android:centerX="0" android:centerY="0" android:endColor="@android:color/black" android:startColor="@android:color/white" android:type="linear" android:useLevel="true" />
        </shape></item>
    <!-- selected -->
    <item><shape>
            <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="0dp" android:topLeftRadius="0dp" android:topRightRadius="5dp" />

            <!-- <solid android:color="#6495ED" /> -->
            <padding android:left="10dp" android:right="10dp" />

            <stroke android:dashGap="0dp" android:width="2dp" android:color="@android:color/holo_orange_light" />

            <gradient android:angle="135" android:centerX="0" android:centerY="0" android:endColor="@android:color/black" android:startColor="@android:color/white" android:type="linear" android:useLevel="true" />
></shape></item>
    <!-- default -->

</selector>

其中包含了焦点、按下、选中时的状态，并且拥有各自的Shape属性

layout/activity_main.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/state"
        android:text="BUTTON" />


</LinearLayout>

在Button标签中的android:background 加载state.xml