您的位置:首页 > 移动开发 > Android开发

Android 使用shape添加边框

2015-06-16 14:55 405 查看
项目中用到了一个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和左边的差不多。
效果如下:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: