Introduction to EditText, an input box for Android development

This article mainly introduces the design of EditText, the input box of Android layout in detail. It has some reference value. Interested partners can refer to it.

Now let's briefly introduce the technical points:
1. How to use rounded input box and button background
2. How to realize the vertical line behind "mobile phone number" and "password"
3. How to nest the layout of input boxes
4. How to listen for input events of input boxes and hide the dynamic display of delete buttons
1. How to use rounded input box and button background
Android has prepared shapes, an xml tag for developers, to customize some shapes.
So I'll define a white input box background. The code is as follows:

<!-- shape -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle" >

 <solid android:color="#ffffff" />
 <!-- Frame -->
 <stroke
  android:width="1dip"
  android:color="#ffffff" />
 <!-- Inner fill color -->
 <padding
  android:bottom="10dp"
  android:left="10dp"
  android:right="10dp"
  android:top="10dp" />
 <!-- fillet -->
 <corners android:radius="6dp" />
</shape>
Set it to any View background s
android:background="@drawable/shape_wihte_frame"

2. How to realize the vertical line behind "mobile phone number" and "password"
This is actually very simple, just write a vertical line, the width is 1dp or 1px (or you think the more appropriate value).

<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. How to nest the layout of input boxes
Android offers us a variety of layouts, but you can't design the interface with any one. Must nest, many novices dare not nest, we must be bold to nest to use a variety of layout, will certainly combine a cool effect. The layout here is very simple, just a layer of nesting (the layout of the entire page layout nests the input box).

<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="Cell-phone number"
    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="Please enter your cell phone number."
    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. How to listen for input events of input boxes and hide the dynamic display of delete buttons
The idea is simple: listen for the input events of EditText, then display the delete button behind if the input length is longer than 0, hide the delete button if = 0, and empty the input box by clicking the delete button. Here I write a tool class for you to call. High cohesion and low coupling are our common pursuit.

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
    // Listener displays the clear button if the length of the input string is greater than 0.
    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
    // Clear the input box
    e1.setText("");

   }
  });

 }

}

Main program code

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);
  // Add Clear Monitor Atmosphere
  EditTextClearTools.addclerListener(e1, m1);
  EditTextClearTools.addclerListener(e2, m2);

 }
}

At present, the application of input box is also very extensive. Here is just a brief introduction to the control of input box. Later, some better technology and personal opinions will be updated one after another. Thank you for your support!

Tags: Android Mobile xml

Posted on Sun, 25 Aug 2019 21:48:09 -0700 by robot43298