Android 使用shape添加边框

来源：互联网发布：淘宝页面链接怎么设置编辑：程序博客网时间：2024/06/05 00:39

项目中用到了一个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和左边的差不多。

效果如下：

0 0