大家好，今天帶了的是承接上一個部落格 的ui設計 今天是針對文字框的設計  讓文字框變得更加美觀  追求良好的使用者互動。

今天有兩個步驟：1.搞定 兩個介面的佈局 

2.讓文字框變得美觀，而且具有點選效果

先給大家展示效果圖：我們可以看到 兩個介面的主題是一致的 

     特點：1.EditText 的邊框是有顏色的

 2.是圓角

 3.我們可以看到 輸入手機號碼 和 輸入密碼 這兩個文字框的邊框顏色不同

(這是因為當我們點選文字框時聚焦在當前文字框的顏色會變深  而沒有聚焦的文字框顏色不變)

第一步 搞定佈局 上程式碼

1.登陸介面佈局程式碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/userlogin_logo" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <EditText
            android:id="@+id/signup_phone_num_Edta"
            android:layout_width="match_parent"
            android:layout_height="45dip"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/bg_edittext"
            android:hint="請輸入11位手機號"
            android:inputType="number"
            android:paddingLeft="10dip"
            android:singleLine="true"
            android:textColorHint="#AAAAAA" />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <EditText
                android:id="@+id/signup_pswd_Edta"
                android:layout_width="match_parent"
                android:layout_height="45dip"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:background="@drawable/bg_edittext"
                android:hint="請輸入密碼"
                android:inputType="textPassword"
                android:paddingLeft="10dip"
                android:singleLine="true"
                android:textColorHint="#AAAAAA" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/iv_hide"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_marginRight="15dp"
                    android:layout_marginTop="13dp"
                    android:padding="14dp"
                    android:src="@drawable/agt" />

                <ImageView
                    android:id="@+id/iv_show"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_marginRight="15dp"
                    android:layout_marginTop="13dp"
                    android:padding="14dp"
                    android:src="@drawable/agu"
                    android:visibility="gone" />
            </LinearLayout>
        </RelativeLayout>

        <Button
            android:id="@+id/signup_Btna"
            android:layout_width="match_parent"
            android:layout_height="45dip"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/shape_button"
            android:gravity="center"
            android:paddingLeft="10dip"
            android:text="登陸"
            android:textColor="#ffffff" />

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="5dp" >

            <CheckBox
                android:id="@+id/cb_passworda"
                android:layout_width="wrap_content"
                android:layout_height="25dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="25dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="40dp"
                android:gravity="center"
                android:text="記住密碼"
                android:textColor="#00868B" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="5dp" >

            <CheckBox
                android:id="@+id/cb_logina"
                android:layout_width="wrap_content"
                android:layout_height="25dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="25dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="40dp"
                android:gravity="center"
                android:text="自動登入"
                android:textColor="#00868B" />
        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="bottom" >

        <TextView
            android:id="@+id/goto_reg_texta"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="15dp"
            android:layout_marginLeft="25dp"
            android:background="@drawable/main_bt_pressed"
            android:text="賬戶註冊"
            android:textColor="#00868B" />
    </LinearLayout>

</LinearLayout>
 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
         >

        <ImageView
            android:id="@+id/backImgb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:scaleType="centerInside"
            android:src="@drawable/back_normal" />

        <TextView
            android:id="@+id/registerTextb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:gravity="center_vertical"
            android:text="註冊"
            android:textColor="#00868B"
            android:textSize="20sp" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="8"
        android:orientation="vertical" >

        <EditText
            android:id="@+id/phone_num_Edtb"
            android:layout_width="match_parent"
            android:layout_height="45dip"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/bg_edittext"
            android:hint="手機號"
            android:inputType="number"
            android:padding="10dip"
            android:singleLine="true"
            android:textColorHint="#AAAAAA" />

        <EditText
            android:id="@+id/pswd_Edtb"
            android:layout_width="match_parent"
            android:layout_height="45dip"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/bg_edittext"
            android:hint="6-10位密碼"
            android:inputType="textPassword"
            android:padding="10dip"
            android:singleLine="true"
            android:textColorHint="#AAAAAA" />

        <EditText
            android:id="@+id/confirm_pswd_Edtb"
            android:layout_width="match_parent"
            android:layout_height="45dip"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/bg_edittext"
            android:hint="確認密碼"
            android:inputType="textPassword"
            android:padding="10dip"
            android:singleLine="true"
            android:textColorHint="#AAAAAA" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <EditText
                android:id="@+id/verify_Edtb"
                android:layout_width="match_parent"
                android:layout_height="45dip"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="10dp"
                android:layout_weight="1"
                android:background="@drawable/bg_edittext"
                android:hint="驗證碼"
                android:inputType="number"
                android:padding="5dip"
                android:singleLine="true"
                android:textColorHint="#AAAAAA" />

            <Button
                android:id="@+id/verify_Btnb"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginRight="15dp"
                android:layout_marginTop="10dp"
                android:layout_weight="2"
                android:text="驗證碼"
                android:textColor="#00868B" />
        </LinearLayout>

        <Button
            android:id="@+id/reg_Btnb"
            android:layout_width="fill_parent"
            android:layout_height="45dip"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/shape_button"
            android:text="註冊"
            android:textColor="#fff" />
    </LinearLayout>

</LinearLayout>
 

1.(有過開發經驗的人都能看出 顯示效果的設計都在一個檔案裡那就是 bg_edittext.xml)

2.在bg_edittext.xml裡面又包含兩個檔案bg_edittext_normal(未聚焦狀態效果)和bg_edittext_focused(聚焦狀態效果)

   看程式碼

1.bg_edittext.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/bg_edittext_normal" android:state_window_focused="false"/>
    <item android:drawable="@drawable/bg_edittext_focused" android:state_focused="true"/>

</selector>
 

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

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

今天就到這裡了 有問題可留言 看到必回

不喜勿噴