Android開發之輸入框EditText介紹

  • 2020 年 2 月 14 日
  • 筆記

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

現在先簡單介紹一下技術點： 1.如何使用圓角輸入框和按鈕背景 2.如何實現「手機號」、「密碼」後面的豎線 3.如何嵌套輸入框的布局 4.如何監聽輸入框的輸入事件及刪除按鈕的動態顯示隱藏 1.如何使用圓角輸入框和按鈕背景 Android為開發者準備了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.如何嵌套輸入框的布局 Android給我們提供了多種布局，但是你用任何一種都沒辦法把介面設計好。必須嵌套，很多新手不敢去嵌套，大家一定要大膽的去嵌套去使用各種布局，一定會組合出炫酷的效果的。這裡布局很簡單僅僅是一層嵌套（整個頁面布局嵌套輸入框的布局）。

<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);     }  }

輸入框的應用當下來說也十分廣泛，在這裡僅僅是簡單介紹一下輸入框控制項，後面會陸續更新一些比較好的技術和個人見解，感謝大家支援！

VirMach 便宜 VPS

QNews

QNews