Android开发Hack1-圆角镂空按钮的样式定义

准备写一个关于Android开发小Hack 系列文章，希望能帮到一些开发者同学。

第一篇：Android开发Hack1-圆角镂空按钮的样式定义

通过xml文件实现自定义圆角镂空按钮，以及点击效果

[html] view plaincopy





<Button android:layout_width="78dp" android:layout_height="32dp"

android:id="@+id/corner_btn"

android:textSize="15sp"

android:textColor="@color/score_point"

android:text="button1"

android:layout_marginRight="17dp"

android:layout_marginLeft="17dp"

android:layout_gravity="center_vertical"

android:background="@drawable/circle_corner_button_selector"

/>

在drawable中创建按钮背景selector器

circle_corner_button_selector.xml

[html] view plaincopy





<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/circle_corner_button_pressed" android:state_pressed="true"/>

<item android:drawable="@drawable/circle_corner_button"/>

</selector>

分别定义不同选择操作下的效果

首先：circle_corner_button.xml文件

[html] view plaincopy





<?xml version="1.0" encoding="utf-8"?>

<!-- 带圆角 白色背景 黄色色边框 长方体 -->

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>

<shape>

<solid android:color="#FFFFFF" />

<corners android:topLeftRadius="5dp" android:topRightRadius="5dp"

android:bottomRightRadius="5dp" android:bottomLeftRadius="5dp" />

<stroke android:width="1dp" android:color="#F58939" />

<padding

android:left="5dp"

android:top="5dp"

android:right="5dp"

android:bottom="5dp"

/>

</shape>

</item>

</layer-list>

和circle_corner_button_pressed.xml文件

[html] view plaincopy





<?xml version="1.0" encoding="utf-8"?>

<!-- 带圆角 白色背景 灰色边框 长方体 -->

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>

<shape>

<solid android:color="#FFFFFF"/>

<corners android:topLeftRadius="5dp" android:topRightRadius="5dp"

android:bottomRightRadius="5dp" android:bottomLeftRadius="5dp"/>

<stroke android:width="1dp" android:color="#dbdbdb"/>

<padding

android:left="5dp"

android:top="5dp"

android:right="5dp"

android:bottom="5dp"

/>

</shape>

</item>

</layer-list>

最后的按钮效果应该是这样的：

正常情况下：



点击后的样式：