Android 使用shape添加边框

最新推荐文章于 2024-08-18 03:50:33 发布

原创最新推荐文章于 2024-08-18 03:50:33 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

Android 专栏收录该内容

43 篇文章

订阅专栏

本文介绍如何通过XML Shape实现在RadioGroup内的RadioButton具备单选按钮效果，并解决了多个按钮间边框重叠的问题。

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

项目中用到了一个button单选的效果，就用了shape来实现，代码如下：

1.RadioGroup代码

            <RadioGroup
                android:id="@+id/rg_commune_top_tab"
                android:layout_width="match_parent"
                android:layout_height="35dp"
                android:layout_marginLeft="@dimen/activity_horizontal_margin"
                android:layout_marginRight="@dimen/activity_horizontal_margin"
                android:layout_marginTop="@dimen/activity_horizontal_margin"
                android:orientation="horizontal" >

                <RadioButton
                    android:id="@+id/rb_all"
                    style="@style/commune_detail_rb"
                    android:background="@drawable/selector_commune_detail_top_tab_left"
                    android:text="@string/label_all" />

                <RadioButton
                    android:id="@+id/rb_un_feedback"
                    style="@style/commune_detail_rb"
                    android:background="@drawable/selector_commune_detail_top_tab_middle"
                    android:checked="true"
                    android:text="@string/label_un_feedback" />

                <RadioButton
                    android:id="@+id/rb_feedback"
                    style="@style/commune_detail_rb"
                    android:background="@drawable/selector_commune_detail_top_tab_right"
                    android:text="@string/label_feedback" />
            </RadioGroup>

2.左边部分：

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

    <item android:drawable="@drawable/shape_commune_detail_top_tab_left_press" android:state_checked="true"/>
    <item android:drawable="@drawable/shape_commune_detail_top_tab_left_default" android:state_checked="false"/>

</selector>

default：

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

    <solid android:color="@color/white" />

    <corners
        android:bottomLeftRadius="5dp"
        android:topLeftRadius="5dp" />

    <padding
        android:bottom="1dp"
        android:top="1dp" />

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

</shape>

press：

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

    <solid android:color="@color/black" />

    <padding
        android:bottom="1dp"
        android:top="1dp" />

    <corners
        android:bottomLeftRadius="5dp"
        android:topLeftRadius="5dp" />

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

</shape>

中间部分：

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

    <item android:drawable="@drawable/shape_commune_detail_top_tab_middle_press" android:state_checked="true"/>
    <item android:drawable="@drawable/shape_commune_detail_top_tab_middle_default" android:state_checked="false"/>

</selector>

做的时候发现中间布局的左右两条线重合了，不好看，结果很久没解决，最后搜索到了一个解决方法：

default：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 
    <!-- 边框颜色值 -->
    <item>
        <shape>
            <solid android:color="@color/black"/>
        </shape>
    </item>
    <!-- 主体背景颜色值 -->
    <item
        android:bottom="1dp"
        android:top="1dp">
        <shape>
            <solid android:color="@color/white"/>
 
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp"/>
        </shape>
    </item>
 
</layer-list>

press：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 
    <!-- 边框颜色值 -->
    <item>
        <shape>
            <solid android:color="@color/black"/>
        </shape>
    </item>
    <!-- 主体背景颜色值 -->
    <item
        android:bottom="1dp"
        android:top="1dp">
        <shape>
            <solid android:color="@color/black"/>
 
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp"/>
        </shape>
    </item>
 
</layer-list>

右边部分：

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

    <item android:drawable="@drawable/shape_commune_detail_top_tab_right_press" android:state_checked="true"/>
    <item android:drawable="@drawable/shape_commune_detail_top_tab_right_default" android:state_checked="false"/>

</selector>

右边部分的default和press和左边的差不多。

效果如下：