Android美化EditText

標籤：android   使用者體驗   edittext   

目前各種app都講究使用者體驗，這裡介紹下對EditText控制項的樣式美化。

先上：

          

註：第一個控制項沒有沒有設定 background 的任何屬性，第二個控制項設定了 android:background="@drawable/bg_edittext_selector"

若希望取消 EditText 背景，直接設定 android:background="@null" 便可。

此處通過兩個xml檔案來設定未獲得焦點和已經獲得焦點的樣式，通過shape實現。

edittext_focused.xml

<?xml version="1.0" encoding="UTF-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="#FFFFFF" />        <corners android:radius="1dip"/>        <stroke        android:width="1dip"        android:color="#728ea3" /></shape>

edittext_normal.xml

<?xml version="1.0" encoding="UTF-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="#FFFFFF" />    <corners android:radius="1dip"/>    <stroke        android:width="1dip"        android:color="#BDC7D8" /></shape>

註：此處可以通過設定 corners   （角） 來設定邊框的弧度。想瞭解shape更多屬性可以自行查閱。

bg_edittext_selector.xml

<?xml version="1.0" encoding="UTF-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/edittext_normal" android:state_window_focused="false"/>    <item android:drawable="@drawable/edittext_focused" android:state_focused="true"/></selector>

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.aa.MainActivity" >    <EditText        android:id="@+id/normal"        android:layout_width="fill_parent"        android:layout_height="36dip"        android:layout_margin="36dip"        android:hint="請輸入使用者名稱"        android:padding="5dip"        android:singleLine="true"        android:textColorHint="#AAAAAA"        android:textSize="15dip" />    <EditText        android:layout_below="@+id/normal"        android:layout_width="fill_parent"        android:layout_height="36dip"        android:layout_margin="36dip"        android:background="@drawable/bg_edittext_selector"        android:hint="請輸入使用者名稱"        android:padding="5dip"        android:singleLine="true"        android:textColorHint="#AAAAAA"        android:textSize="15dip" /></RelativeLayout>

Android美化EditText