Android 使用shape添加边框

本文介绍如何通过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和左边的差不多。

效果如下:



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值