Android development skills: Entering text and emoticons like QQ

Source: Internet
Author: User

Like TextView, EditText can also be mixed with text. The difference is that TextView is only used to display the text-and-text mixing effect, while EditText can be both displayed and mixed-input text and images. Let's first review the QQ chat input box shown in section 1 5.2, you can enter both text and emoticons in the input box. In fact, this effect can be achieved with only a few lines of code in the Android SDK. To make readers more impulsive, let's take a look at the coming results, as shown in 5.16.

Figure 5.16 Enter text and images in the EditText Control
To implement this program, first prepare the materials to be used, that is, the image files to be input in the EditText control. In this example, nine PNG image files (face1.pngto face9.png) are stored in the res \ drawable directory.
Next, put an EditText and a Button that can only display three lines (multiple lines can be entered) on the screen. The code for the layout file is as follows: Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<LinearLayout xmlns: android = ""
Android: orientation = "vertical" android: layout_width = "fill_parent"
Android: layout_height = "fill_parent">
<EditText android: id = "@ + id/edittext" android: layout_width = "fill_parent"
Android: layout_height = "wrap_content" android: lines = "3" android: gravity = "left | top"/>
<Button android: layout_width = "wrap_content"
Android: layout_height = "wrap_content" android: text = "randomly inserted expressions"
Android: onClick = "onClick_RandomFace" android: layout_marginTop = "10dp"/>

In the <EditText> label of the above Code, set the property value of android: gravity to left | top. To display the input text from the upper left corner. If this attribute is not set, the entered text is displayed from the center on the left (because android: line = "3" is set ", therefore, EditText can display three rows at the same time, so this problem exists. If only one row is displayed, this problem does not exist ).

<Button> the tag's android: onclick value specifies the single-click event (onclick_randomface(, where the ID of any image resource in face1.pngto face9.png is randomly identified. The most common method is to put the nine image resource IDs in the array, and then randomly generate an array index to obtain the corresponding image resource ID. However, this method is not used in this example. Instead, the image resource ID is obtained directly from the R. drawable class through reflection technology. The advantage of this method is that, when there are many image resources, you can obtain any image resource ID without having to define them in the array.

In section 5.2.2, the label is used to insert an image. This method can be used even if an image is inserted in the EditText control. However, in this example, another simpler method is to use the android. text. style. ImageSpan class to insert images directly. Let's take a look at the specific implementation code.Copy codeThe Code is as follows: public void onClick_RandomFace (View view)
// Randomly generate an integer ranging from 1 to 9
Int randomId = 1 + new Random (). nextInt (9 );
// Obtain the Field object of the corresponding resource ID (static variable) from the R. drawable Class Based on the randomly generated integers 1 to 9
Field field = R. drawable. class. getDeclaredField ("face" + randomId );
// Obtain the value of the resource ID, that is, the value of the static variable.
Int resourceId = Integer. parseInt (field. get (null). toString ());
// Obtain the Bitmap object of the resource Image Based on the Resource ID
Bitmap bitmap = BitmapFactory. decodeResource (getResources (), resourceId );
// Create an ImageSpan object based on the Bitmap object
ImageSpan imageSpan = new ImageSpan (this, bitmap );
// Create a SpannableString object to insert an image encapsulated with the ImageSpan object
SpannableString spannableString = new SpannableString ("face ");
// Replace face with an ImageSpan object
SpannableString. setSpan (imageSpan, 0, 4, Spannable. SPAN_EXCLUSIVE_EXCLUSIVE );
// Append the randomly obtained image to the end of the EditText control.
Edittext. append (spannableString );
Catch (Exception e)

Note the following points when writing the above Code::
1. Because the resource IDs in R. drawable are all public static variables, you can directly use the Field. get method to obtain the values of these variables. If it is a private or protected variable, you need field. setAccessible (true) to set the access permission of the variable value to read and write these variables.
2. When the Field. get method is used to obtain the variable value, if it is a static variable. Set the parameter value of Field. get to null. If it is not a static variable, you must specify the object of the class where the variable is located as the parameter value for the Field. get method.
3. Because the EditText class cannot directly insert Span objects, you must first use the SpannableString object to encapsulate the Span object (such as the ImageSpan object in this example), and then insert the SpannableString object into the EditText control.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.