Android高級xml佈局之輸入框EditText設計

今天給你們介紹一下如何實現一款簡約時尚的安卓登錄界面。你們先看一下效果圖

當用戶輸入時動態出現刪除按鈕

 

如今先羅列一下技術點：
1.如何使用圓角輸入框和按鈕背景
2.如何實現「手機號」、「密碼」後面的豎線
3.如何嵌套輸入框的佈局
4.如何監聽輸入框的輸入事件及刪除按鈕的動態顯示隱藏

1.如何使用圓角輸入框和按鈕背景

安卓爲開發者準備了shape這個xml標籤，用於自定義一些形狀。
那麼我就來定義一個白色的輸入框背景。代碼以下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!-- 形狀 --> <shape xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="rectangle" >    <solid android:color="#ffffff" />  <!-- 邊框 -->  <stroke   android:width="1dip"   android:color="#ffffff" />  <!-- 內填充顏色 -->  <padding   android:bottom="10dp"   android:left="10dp"   android:right="10dp"   android:top="10dp" />  <!-- 圓角 -->  <corners android:radius="6dp" />   </shape>

將其設置成任何View的background就能夠了

?

1	android:background="@drawable/shape_wihte_frame"

2.如何實現「手機號」、「密碼」後面的豎線

這個其實很簡單，只需書寫一個豎線便可，寬度爲1dp或者1px（或你認爲更合適的數值）。 

?

1 2 3 4 5 6 7 8 9 10

<View    android:id="@+id/view1"    android:layout_width="1dip"    android:layout_height="fill_parent"    android:layout_centerVertical="true"    android:layout_gravity="center_horizontal"    android:layout_marginLeft="2dp"    android:layout_marginRight="2dp"    android:layout_toRightOf="@+id/textView1"    android:background="#EEEFFF" />

3.如何嵌套輸入框的佈局

安卓給咱們提供了多種佈局，可是你用任何一種都沒辦法把界面設計好。必須嵌套，不少新手不敢去嵌套，你們必定要大膽的去嵌套去使用各類佈局，必定會組合出炫酷的效果的。這裏佈局很簡單僅僅是一層嵌套（整個頁面佈局嵌套輸入框的佈局）。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

<RelativeLayout   android:layout_width="fill_parent"   android:layout_height="fill_parent"   android:layout_alignParentTop="true"   android:layout_centerHorizontal="true"   android:background="@drawable/shape_wihte_frame" >     <TextView    android:id="@+id/textView1"    android:layout_width="40dp"    android:layout_height="wrap_content"    android:layout_alignParentLeft="true"    android:layout_centerVertical="true"    android:lines="1"    android:padding="1dp"    android:text="手機號"    android:textSize="11sp" />     <View    android:id="@+id/view1"    android:layout_width="1dip"    android:layout_height="fill_parent"    android:layout_centerVertical="true"    android:layout_gravity="center_horizontal"    android:layout_marginLeft="2dp"    android:layout_marginRight="2dp"    android:layout_toRightOf="@+id/textView1"    android:background="#EEEFFF" />     <EditText    android:id="@+id/phonenumber"    android:layout_width="wrap_content"    android:layout_height="40dp"    android:layout_centerVertical="true"    android:layout_marginLeft="2dp"    android:layout_toRightOf="@+id/view1"    android:background="@drawable/transparent"    android:ems="19"    android:hint="請輸入手機號"    android:inputType="phone"    android:padding="1dp"    android:textSize="12sp" >      <requestFocus />   </EditText>     <ImageView    android:id="@+id/del_phonenumber"    android:layout_width="20dp"    android:layout_height="20dp"    android:layout_alignParentRight="true"    android:layout_centerVertical="true"    android:layout_marginRight="3dp"    android:src="@drawable/text_del"    android:visibility="invisible" />  </RelativeLayout>

4.如何監聽輸入框的輸入事件及刪除按鈕的動態顯示隱藏

思想很簡單，就是監聽EditText的輸入事件，以後若是輸入長度大於0就顯示後面的刪除按鈕，若是=0就隱藏刪除按鍵，點擊刪除按鈕就清空輸入框。在這裏我寫出了一個工具類方便你們調用。高內聚低耦合是咱們共同的追求。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

public class EditTextClearTools {  public static void addclerListener(final EditText e1, final ImageView m1) {     e1.addTextChangedListener(new TextWatcher() {      @Override    public void onTextChanged(CharSequence s, int start, int before,      int count) {     // TODO Auto-generated method stub      }      @Override    public void beforeTextChanged(CharSequence s, int start, int count,      int after) {     // TODO Auto-generated method stub      }      @Override    public void afterTextChanged(Editable s) {     // TODO Auto-generated method stub     // 監聽若是輸入串長度大於0那麼就顯示clear按鈕。     String s1 = s + "";     if (s.length() > 0) {      m1.setVisibility(View.VISIBLE);     } else {      m1.setVisibility(View.INVISIBLE);     }      }   });     m1.setOnClickListener(new OnClickListener() {      @Override    public void onClick(View v) {     // TODO Auto-generated method stub     // 清空輸入框     e1.setText("");      }   });    }   }

主程序代碼

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

public class MainActivity extends Activity {  EditText e1, e2;  ImageView m1, m2;    @Override  protected void onCreate(Bundle savedInstanceState) {   super.onCreate(savedInstanceState);   requestWindowFeature(Window.FEATURE_NO_TITLE);   setContentView(R.layout.activity_user_login);   init();  }    private void init() {   // TODO Auto-generated method stub   e1 = (EditText) findViewById(R.id.phonenumber);   e2 = (EditText) findViewById(R.id.password);   m1 = (ImageView) findViewById(R.id.del_phonenumber);   m2 = (ImageView) findViewById(R.id.del_password);   // 添加清楚監聽器大氣   EditTextClearTools.addclerListener(e1, m1);   EditTextClearTools.addclerListener(e2, m2);    }   }

xml對於安卓程序的重要性相信你們在開發的路程中會慢慢體會到。在這裏僅僅是給了一個簡單的例子，後面會更新不少很好的安卓技術博客。我是安卓天，感謝你們支持。但願你們多多溝通交流。

代碼鏈接：源碼下載

以上就是本文的所有內容，但願對你們的學習有所幫助，也但願你們多多支持腳本之家。