Custom Controls for Android UI programming-CustomEditText and android custom ui

Custom Controls for Android UI programming-CustomEditText and android custom ui
Overview:

Based on the previous blogAndroid UI programming-custom controls (I)-ImageButtonWe also have a preliminary understanding of custom controls. Now we can try to customize EditText. You can share the following two methods of custom UI programming. In the previous blog, I have some detailed descriptions of custom controls. In this blog, if you still have some questions, for more information, see the previous blog "Android UI programming-custom controls (I)-ImageButton.

Example: The input box with the delete button is displayed:

 

Basic prototype construction:

You can see two things from the above: EditText on the left and the picture on the right (a Button here ). When the input in EditText is empty, the clear button on the right is not displayed. Once the content is entered in EditText, the clear button on the right is displayed.

Design and function addition: 1. Design

After we have selected the skeleton, the rest is to wear clothes. Now let's see how to dress it. The following is the sample code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal" >    <EditText        android:id="@+id/input_edittext"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_centerVertical="true"        android:layout_marginLeft="10dp"        android:layout_marginTop="5dp"        android:layout_marginBottom="5dp"        android:background="@null"        android:layout_toLeftOf="@+id/clear_button"        android:ems="10" >    </EditText>    <Button        android:id="@+id/clear_button"        android:layout_width="30dp"        android:layout_height="30dp"        android:layout_centerVertical="true"        android:background="@drawable/clear_button"        android:layout_marginRight="10dp"        android:layout_alignParentRight="true"        android:visibility="invisible" /></RelativeLayout>

2. Add features

Function addition is implemented in Java code, Because Java code can dynamically adjust the function, but cannot write the dynamic adjustment function in xml code. Java code implements the following functions:

Function of listening text box:

public void addTextChangedListener() {        mInput.addTextChangedListener(new TextWatcher() {                        @Override            public void onTextChanged(CharSequence s, int start, int before, int count) {                int len = mInput.getText().toString().length();                if (len > 0) {                    mClear.setVisibility(View.VISIBLE);                } else {                    mClear.setVisibility(View.INVISIBLE);                }            }                        @Override            public void beforeTextChanged(CharSequence s, int start, int count,                    int after) {            }                        @Override            public void afterTextChanged(Editable s) {            }        });    }

Clear Text:

private void setClearEvent() {        mClear.setOnClickListener(new OnClickListener() {                        @Override            public void onClick(View v) {                mInput.setText("");            }        });    }

Usage Analysis: 1. Use in xml Code

The Code is as follows:

<com.demo.customview.clearedittext.widgets.ClearEditText        android:id="@+id/activity_main_clear_edittext"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp" />

2. Use in Java code

ClearEditText clearEditText = (ClearEditText) findViewById (R. id. activity_main_clear_edittext); clearEditText. setHint ("input text for testing"); clearEditText. addTextChangedListener ();

Example: insert an expression in EditText:

Custom class implementation:

I won't go into a long article here. Because the content is very single. The Java implementation code is as follows:

Public class SmiliesEditText extends EditText {public SmiliesEditText (Context context) {super (context);} public SmiliesEditText (Context context, AttributeSet attrs) {super (Context, attrs );} @ Override protected void onDraw (Canvas canvas) {super. onDraw (canvas) ;}@ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super. onMeasure (widthMeasureSpec, heightMeasureSpec);} public void insertIcon (int id) {// continuous string of SpannableString. The length is immutable and some objects can be appended. If it is variable, SpannableStringBuilder is used, refer to the sdk documentation SpannableString ss = new SpannableString (getText (). toString () + "[smile]"); // obtain the resource Drawable d = getResources () for the image to be displayed (). getDrawable (id); // set the height d. setBounds (0, 0, d. getIntrinsicWidth (), d. getIntrinsicHeight (); // The bottom of the span should align with the baseline of the surrounding text. ImageSpan span = new ImageSpan (d, ImageSpan. ALIGN_BASELINE); // append the image ss. setSpan (span, getText (). length (), getText (). length () + "[smile]". length (), Spannable. SPAN_INCLUSIVE_EXCLUSIVE); setText (ss );}}

Usage Analysis: 1. Use in xml Code

<Com. demo. customview. clearedittext. widgets. smiliesEditText android: id = "@ + id/example" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: layout_below = "@ + id/activity_main_clear_edittext" android: singleLine = "true" android: text = "Hello smile" android: hint = "you can enter an expression." android: textSize = "14sp" android: layout_marginTop = "20dp"/>

2. Use in Java code

SmiliesEditText et=(SmiliesEditText)findViewById(R.id.activity_main_similies_edittext);        et.insertIcon(R.drawable.smile);        System.out.println(et.getText().toString());

Source code download:

Http://download.csdn.net/detail/u013761665/8410583