Android Shape自定義純色圓角按鈕
在Android開發中,為響應美化應用中控制元件的效果,使用Shape定義圖形效果,可以解決圖片過多的問題。
首先看一下效果圖:
整個頁面佈局為:
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#e6e6e6" android:orientation ="vertical" android:gravity="center_vertical" > <ImageView android:id="@+id/iv1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="20dp" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:layout_above="@id/account_editor" android:src="@drawable/head" /> <EditText android:id="@+id/account_editor" android:layout_width="fill_parent" android:layout_height="@dimen/edit_box_height" android:layout_below="@id/title_bar" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:layout_marginTop="@dimen/activity_vertical_margin" android:background="@drawable/input_box" android:ellipsize="end" android:gravity="center_vertical" android:hint="@string/mobile_hint" android:inputType="numberDecimal" android:maxLength="11" android:paddingLeft="@dimen/input_box_left_padding" android:paddingRight="40.0dip" android:singleLine="true" android:textColor="@color/grey_text" android:textSize="@dimen/font_normal" /> <TextView android:id="@+id/error" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@+id/account_editor" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:layout_marginTop="@dimen/notice_vertical_padding" android:ellipsize="end" android:singleLine="true" android:textColor="@color/red_text" android:textSize="@dimen/font_small" android:visibility="gone" /> <EditText android:id="@+id/psw_editor" android:layout_width="fill_parent" android:layout_height="@dimen/edit_box_height" android:layout_below="@+id/error" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:layout_marginTop="@dimen/activity_vertical_margin" android:background="@drawable/input_box" android:ellipsize="end" android:gravity="center_vertical" android:hint="@string/psw_hint" android:inputType="textPassword" android:maxLength="16" android:paddingLeft="@dimen/input_box_left_padding" android:singleLine="true" android:textColor="@color/grey_text" android:textSize="@dimen/font_normal" /> <Button android:id="@+id/login" style="@style/common_button_style" android:layout_below="@id/psw_editor" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:layout_marginTop="@dimen/activity_vertical_margin" android:text="@string/login" /> <RelativeLayout android:layout_width="wrap_content" android:layout_height="30.0dip" android:layout_below="@+id/login" android:layout_centerHorizontal="true" android:layout_marginTop="25.0dip" > <TextView android:id="@+id/register" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:clickable="true" android:text="@string/register" android:textColor="@color/black_text" android:textSize="@dimen/font_normal" /> <TextView android:id="@+id/forgot_psw" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_marginRight="@dimen/activity_horizontal_margin" android:clickable="true" android:text="@string/forgot_psw" android:textColor="@color/black_text" android:textSize="@dimen/font_normal" /> </RelativeLayout></RelativeLayout>
其中自定義Button的相關佈局程式碼為:<Button android:id="@+id/login" style="@style/common_button_style" android:layout_below="@id/psw_editor" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:layout_marginTop="@dimen/activity_vertical_margin" android:text="@string/login" />
首先我們看看這個自定義的樣式:<style name="common_button_style"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">@dimen/btn_next_height</item> <item name="android:background">@drawable/selector_red_corners_button</item> <item name="android:padding">6.0dip</item> <item name="android:textColor">@android:color/white</item> <item name="android:textSize">@dimen/font_large</item> <item name="android:layout_gravity">center_horizontal</item> </style>
其中重點關注的就是它的backgroud屬性了。selector_red_corners_button.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/shape_red_corners_button_pressed" /> <item android:state_pressed="false" android:drawable="@drawable/shape_red_corners_button" /></selector>
shape_red_corners_button_pressed.xml<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="20.0px" /> <solid android:color="@color/red_dark" /></shape>
shape_red_corners_button.xml<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="20.0px" /> <solid android:color="@color/red_light" /></shape>
其中圓角弧度的大小可以通過修改android:radius="20.0px"的大小來控制。相關的顏色:
<color name="red_dark">#ffb52121</color> <color name="red_light">#ffcd2222</color>
程式碼下載(注意:由於是自己工作時候的工程,就刪除了部分,但你值得擁有啊)http://download.csdn.net/detail/jdsjlzx/8365315
Shape的屬性:
- solid
描述:內部填充
屬性:android:color 填充顏色
- size
描述:大小
屬性:
android:width 寬
android:height 高
- gradient
描述:漸變色
屬性:
android:startColor漸變起始顏色
android:endColor漸變結束顏色
android:centerColor漸變中間顏色
android:angle 漸變的角度,angle=0時,漸變色是從左向右,然後逆時針方向轉;當angle=90時,漸變色從上往下。angle必然是45的倍數
android:type 漸變型別:linear(線性)、radial(放射性,以開始色為中心)、sweep(掃描線式漸變)
android:userLevel如果要使用LevelListDrawable物件,就要設定為true。設定true無漸變色,false有漸變色
android:grdientRadial漸變半徑,只有設定type為radial時,此值才生效
android:centerX 漸變中心X點座標的相對位置
android:centerY 漸變中心Y點座標的相對位置
- stroke
描述:描邊
屬性:
android:width 描邊寬度
android:color 描邊顏色
android:dashwidth描邊樣式為虛線時的寬度,值為0時為實線,值大於0時為虛線
android:dashGap 描邊為虛線時,虛線之間的間隔
- corners
描述:圓角
屬性:
android:radius 四個角半徑值
android:topLeftRadius左上角半徑值
android:topRightRadius右上角半徑值
android:bottomLeftRadius右下角半徑值
android:bottomRightRadius左下角半徑值
- padding
描述:內邊距
屬性:
android:left 左內邊距
android:right 右內邊距
android:top 上內邊距
android:bottom 下內邊距
例項程式碼
- <?xmlversion="1.0"encoding="utf-8"?>
- <shapexmlns:android="http://schemas.android.com/apk/res/android">
- <cornersandroid:radius="5dp"/>
- <size
- android:height="30dp"
- android:width="20dp"/>
- <gradient
- android:startColor="#9933cc"
- android:endColor="#aa66cc"
- android:angle="90"
- />
- <paddingandroid:left="5dp"
- android:right="5dp"
- android:top="5dp"
- android:bottom="5dp"/>
- </shape>
- <Button
- android:id="@+id/btn"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_below="@+id/tv_test"
- android:background="@drawable/btn_shape"
- android:text="按鈕"/>