2. 程式人生 > >Android高階xml佈局之輸入框EditText設計

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

阿新 • • 發佈：2019-09-16

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

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

 

現在先羅列一下技術點：
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對於安卓程式的重要性相信大家在開發的路程中會慢慢體會到。在這裡僅僅是給了一個簡單的例子，後面會更新很多很好的安卓技術部落格。我是安卓天，感謝大家支援。希望大家多多溝通交流。

程式碼連線：原始碼下載

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

相關推薦

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

今天給大家介紹一下如何實現一款簡約時尚的安卓登陸介面。大家先看一下效果圖 當用戶輸入時動態出現刪除按鈕   現

Android開發之輸入框EditText介紹

這篇文章主要為大家詳細介紹了Android佈局之輸入框EditText設計，具有一定的參考價值，感興趣的小夥伴們可以參考一下 現在先簡單介紹一下技術點： 1.如何使用圓角輸入框和按鈕背景 2.如何實現“手機號”、“密碼”後面的豎線 3.如何巢狀輸入框的佈局 4.

android studio中編輯的文字框EditText以及文字框輸入內容的獲取方法

 首先需要在佈局中加入如下內容，這樣一個文字框就有了 <EditText android:id="@+id/edit_text"//設定唯一的標識，呼叫時可通過id找到它 android:layout_width="match_pare

android判斷輸入框EditText是否為空

一，通過判斷輸入值長度是否為零 String serch_textip=mEdit1.getText().toString().trim();

Android 的輸入框(EditText)設定密碼可見/不可見切換的最簡單方法

原創部落格，轉載請註明出處，歡迎轉載。使用Java程式碼修改EditText的密碼切換輸入模式的時候，密碼顯示後，再修改為隱藏模式就不起作用了。下面這兩行程式碼是錯誤示範↓editText.setInputType(InputType.TYPE_TEXT_VARIATION_

Android文字輸入框EditText方法說明和屬性

1、EditText輸入的文字為密碼形式的設定 (1)通過.xml裡設定：  把該EditText設為：android:password="true" // 以”.”形式顯示文字 (2)在程式碼裡設定： 通過設定EditText的setTransformationMetho

android 輸入框EditText禁止輸入Emoji表情符

通過新增EditText的addTextChangedListener()監聽來過濾Emoji表情： onTextChanged()beforeTextChanged()使用方法在開發中可能多處會用到過濾Emoji表情符，為了方便使用自定義EditText來實現： im

Android 帶清除功能的輸入框控件EditTextWithDel

content rect() date textutils cbo class http ng- bottom 記錄下一個非常有用的小控件EditTextWithDel。就是在Android系統的輸入框右邊增加一個小圖標。點擊小圖標能夠清除輸入框裏面的內

MUI框架之輸入框Input

java 提醒 2016年 ear tel caption sim label word input輸入框的官方api文檔：http://dev.dcloud.net.cn/mui/ui/#input 一、輸入框類型 輸入框的類型是根據type來決定是普通輸入框還是密碼

jquery實用技巧之輸入框提示語句

ces 輸入數據 獲取 help lpad keyword 標簽 就是 tab 我們在編寫網頁的時候不可避免的會遇到輸入框，那麽怎麽設計輸入框才能更加優雅呢？不同的人會有不同的答案，下面分享一個比較不錯的設計。 效果圖 細節 這個效果主要是通過JQuery來實現，我的思

Android高階進階之自定義View

前言 在網上看到一張圖，花了些時間自己嘗試著寫了一個自定義View，裡面涉及到了自定義屬性、自定義View padding屬性的處理、畫筆（Paint）和畫布（Canvas）的使用、解析度適配問題、效能問題、屬性動畫等，覺得還是有些東西值的記錄一下的，效果圖如下： 自定義屬

android 解決鍵盤檔住輸入框

一個工具類解決所有問題 ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20181108162258788.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text

Android仿支付寶密碼輸入框(自定義數字鍵盤)

1.概述          Android自定義密碼輸入框，通過自定義輸入顯示框和自定義輸入鍵盤，實現仿支付寶數字鍵盤等。程式碼已託管到github，有需要的話可以去我的github下載。 可以自定義關閉圖示、文字內容、顏色、大小，彈框樣

Android高階控制元件之Listview

1、Listview：列表控制元件，使用的時候高度和寬度最好是match-parent，此外，程式碼中使用還需要結合介面卡。 2、ListView的使用及優化：（1） 使用ConvertView重用元件，即拖動時被遮住、看不見的控制元件，重用它，而非每次建立一個新的物件。當

佈局在輸入框懸浮

知識拓展 android:windowSoftInputMode：設定窗體軟鍵盤的互動模式。 1. stateUnspecified 當設定屬性為stateUnspecified的時候，系統是預設不彈出軟鍵盤的。可是當有獲得焦點的輸入框的介面有滾動的需求的時候，會自己主動彈出軟鍵

Android基礎(一)佈局3.編輯框元件

xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" a

Android高階進階之 TextInputLayout用法

TextInputLayout見名知義與文字輸入有關係，TextInputLayout控制元件通過內嵌EditText來實現輸入文字時，根據預先設定的屬性向使用者展示相應的提醒文字並附有酷炫的動畫效果。例如，當文字框裡的字元長度大於10的時候自動給使用者提示，無需編寫額外的程

android自定義View之自定義EditText（新增刪除功能）

           忙忙碌碌20天，新的專案終於接近尾聲了。今天公司召集幾個使用者體驗師和美工一起吐糟這20天做的這個新產品，對於產品提出了很多建議，這幾天就改介面了。在這個專案中大量的使用了EditText元件，並且添加了刪除功能。這裡面都是用RelativeLayou

Android 帶清除功能的輸入框控制元件ClearEditText,仿IOS的輸入框

今天給大家帶來一個很實用的小控制元件ClearEditText，就是在Android系統的輸入框右邊加入一個小圖示，點選小圖示可以清除輸入框裡面的內容，IOS上面直接設定某個屬性就可以實現這一功能，但是Android原生EditText不具備此功能，所以要想實現這一功能我們需

Android帶清除功能的輸入框控制元件ClearEditText

在網上看到一個很實用的小控制元件ClearEditText，現在分享給大家。 轉載自：http://blog.csdn.net/xiaanming/article/details/11066685/ 這個控制元件就是在Android系統的輸入框右邊加入一個小