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);
 } 
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章