準備寫一個關於Android開發小Hack 系列文章,希望能幫到一些開發者同學。
第一篇:Android開發Hack1-圓角鏤空按鈕的樣式定義
通過xml文件實現自定義圓角鏤空按鈕,以及點擊效果
- <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
- <?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文件
- <?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文件
- <?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>
最後的按鈕效果應該是這樣的:
正常情況下:
點擊後的樣式: