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

更新時間：2021年06月23日 15:19:46 作者：AndroidMsky

這篇文章主要為大家詳細介紹了Android高級xml布局之輸入框EditText設計，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

今天給大家介紹一下如何實現(xiàn)一款簡約時尚的安卓登陸界面。大家先看一下效果圖

當用戶輸入時動態(tài)出現(xiàn)刪除按鈕

現(xiàn)在先羅列一下技術點：

1.如何使用圓角輸入框和按鈕背景
2.如何實現(xiàn)“手機號”、“密碼”后面的豎線
3.如何嵌套輸入框的布局
4.如何監(jiān)聽輸入框的輸入事件及刪除按鈕的動態(tài)顯示隱藏

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

安卓為開發(fā)者準備了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.如何實現(xiàn)“手機號”、“密碼”后面的豎線

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

 <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.如何監(jiān)聽輸入框的輸入事件及刪除按鈕的動態(tài)顯示隱藏

思想很簡單，就是監(jiān)聽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 Auto-generated method stub

 }

 @Override
 public void afterTextChanged(Editable s) {
 // TODO Auto-generated method stub
 // 監(jiān)聽如果輸入串長度大于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);
 m2 = (ImageView) findViewById(R.id.del_password);
 // 添加清楚監(jiān)聽器大氣
 EditTextClearTools.addclerListener(e1, m1);
 EditTextClearTools.addclerListener(e2, m2);

 }

}

xml對于安卓程序的重要性相信大家在開發(fā)的路程中會慢慢體會到。在這里僅僅是給了一個簡單的例子，后面會更新很多很好的安卓技術博客。我是安卓天，感謝大家支持。希望大家多多溝通交流。

代碼連接：源碼下載

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: