1. 程式人生 > >Android Shape自定義純色圓角按鈕

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 下內邊距

例項程式碼

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <shapexmlns:android="http://schemas.android.com/apk/res/android">
  3.     <cornersandroid:radius="5dp"/>
  4.     <size
  5.         android:height="30dp"
  6.         android:width="20dp"/>
  7.     <gradient
  8.         android:startColor="#9933cc"
  9.         android:endColor="#aa66cc"
  10.         android:angle="90"
  11.         />
  12.     <paddingandroid:left="5dp"
  13.         android:right="5dp"
  14.         android:top="5dp"
  15.         android:bottom="5dp"/>
  16. </shape>
  1. <Button
  2.        android:id="@+id/btn"
  3.        android:layout_width="wrap_content"
  4.        android:layout_height="wrap_content"
  5.        android:layout_below="@+id/tv_test"
  6.        android:background="@drawable/btn_shape"
  7.        android:text="按鈕"/>