1. 程式人生 > >Android開發之輸入框EditText介紹

Android開發之輸入框EditText介紹

這篇文章主要為大家詳細介紹了Android佈局之輸入框EditText設計,具有一定的參考價值,感興趣的小夥伴們可以參考一下

現在先簡單介紹一下技術點:
1.如何使用圓角輸入框和按鈕背景
2.如何實現“手機號”、“密碼”後面的豎線
3.如何巢狀輸入框的佈局
4.如何監聽輸入框的輸入事件及刪除按鈕的動態顯示隱藏
1.如何使用圓角輸入框和按鈕背景
安卓為開發者準備了shape這個xml標籤,用於自定義一些形狀。
那麼我就來定義一個白色的輸入框背景。程式碼如下:

<!-- 形狀 -->
<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就可以了
android:background="@drawable/shape_wihte_frame"

2.如何實現“手機號”、“密碼”後面的豎線
這個其實很簡單,只需書寫一個豎線即可,寬度為1dp或者1px(或你認為更合適的數值)。

<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.如何巢狀輸入框的佈局
安卓給我們提供了多種佈局,但是你用任何一種都沒辦法把介面設計好。必須巢狀,很多新手不敢去巢狀,大家一定要大膽的去巢狀去使用各種佈局,一定會組合出炫酷的效果的。這裡佈局很簡單僅僅是一層巢狀(整個頁面佈局巢狀輸入框的佈局)。

<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就隱藏刪除按鍵,點選刪除按鈕就清空輸入框。在這裡我寫出了一個工具類方便大家呼叫。高內聚低耦合是我們共同的追求。

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 
     }

   @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("");

   }
  });

 }

}

主程式程式碼

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);
findViewById(R.id.del_phonenumber);
  m2 = (ImageView) findViewById(R.id.del_password);
  // 新增清楚監聽器大氣
  EditTextClearTools.addclerListener(e1, m1);
  EditTextClearTools.addclerListener(e2, m2);

 }
}

輸入框的應用當下來說也十分廣泛,在這裡僅僅是簡單介紹一下輸入框控制元件,後面會陸續更新一些比較好的技術和個人見解,我是江西吳彥祖,感謝大家支援!