Android implements the built-in horizontal line EditText

Source: Internet
Author: User

(1) How does one implement EditText with a horizontal bar (like the notepad editing interface )? (2) Preliminary Ideas 1. modify the EditText background (the system background is a box-shaped image, which is transparent inside. replace it with an image with a horizontal bar. through redrawing EditText (custom components, draw lines by yourself) 3. using ListView (ListView itself will display a horizontal line) (3) In-depth analysis 1. when multiple lines of text are displayed in EditText, the background is automatically stretched. To ensure that the border is not distorted, you need to use a 9patch image as the background. This may be possible. there is no doubt that custom EditText can be used to display the horizontal line (you can create your own EditText without a gun ...), however, it is difficult to customize components (many things need to be rewritten). It is better to use other methods. 3. it may be better to use ListView to display multiple lines of Text (split the Text into a long String and store it in Array as the ListView Adapter), but it is obviously inappropriate to edit the Text (4) preliminary Practice 1. multiple tests show that the background image with EditText changed can display the horizontal bar, but it is limited to SingLi. Ne text, because when multiple lines of text are input, the background image will be stretched down (the horizontal line is gone ...). Therefore, the test result is: only single-line texts with underlines can be displayed with a custom background image. solution 1 fails! However, in this process, we learned the usefulness of the 9patch image, which is a small gain. 2. the onDraw method of EditText is rewritten to draw the required horizontal line. The core issue is how to determine the position of the horizontal line (essentially, to obtain a set of starting points and a set of corresponding ending points ), this method is described in detail below 3. the disadvantages of ListView have been mentioned above, but after trying solution 1, we can easily find that solution 1 and solution 3 are exactly complementary (the EditText obtained in solution 1 is used as the Item of ListView ), in this case, the selector should be customized for EditText, and the focus setting will not emit light. The test result is: one row EditText is used to display text by line, and ListView is used to draw lines. The solution is a combination of three feasible rows. (5) use custom EditText to display [custom myEditText class] package com. ayqy. app_test; import android. content. context; import android. graphics. canvas; import android. graphics. color; import android. graphics. paint; import android. widget. editText; public class myEditText extends EditText {private int lineColor; // horizontal line color private float lineWidth; // horizontal line width public myEditText (Context context) {super (context ); // set the default Color and horizontal line width lineColor = Color. BLUE; // default BLUE lineWidth = 2f; // The width is 2} public myEditText (Context context, int color, float width) {super (context ); // set the color and horizontal line width this. lineColor = color; this. lineWidth = width ;}@ Override protected void onDraw (Canvas canvas) {// TODO Auto-generated method stub super. onDraw (canvas); // create Paint brush Paint mPaint = new Paint (); mPaint. setStrokeWidth (lineWidth); mPaint. setStyle (Paint. style. FILL); mPaint. setColor (lineColor); // obtain the int w = this. getWidth (); // get the control width int h = this. getHeight (); // get the control height int padB = this. getPaddingBottom (); // get the white int padL = this. getPaddingLeft (); // get the left White int padR = this. getPaddingRight (); // get the white float size on the Right = this. getTextSize () * 7/6; // obtain the horizontal bar spacing (the default value of TextSize is 18)/* set the size value is a core issue, the size value must adapt to different font sizes (different fonts have different line spacing) * After multiple attempts, it is found that the font size is 7/6 times the size of the font as the horizontal bar spacing. **/int lines = (int) (h/size ); // obtain the number of rows // draw a line from the bottom up for (int I = 0; I <lines; I ++) canvas. drawLine (padL // startX, this. getHeight ()-padB-size * I // startY, this. getWidth ()-padR // endX, this. getHeight ()-padB-size * I // endY, mPaint);} public int getLineColor () {return lineColor;} public void setLineColor (int color) {this. lineColor = color;} public float getLineWidth () {return lineWidth;} public void setLineWidth (float width) {this. lineWidth = width;} [layout file] <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: id = "@ + id/root" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "vertical" tools: context = ". mainActivity "> </LinearLayout> [test class] package com. ayqy. app_test; import android. app. activity; import android. OS. bundle; import android. view. menu; import android. widget. linearLayout; public class MainActivity extends Activity {LinearLayout root; // declare the root layout @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); root = (LinearLayout) findViewById (R. id. root); // get the root layout // create the custom EditText control object myEditText txt = new myEditText (this); // set the multiline text txt. setText ("this is a very long test content "); // used to test whether the font of different sizes can be used. // txt. setTextSize (48); // txt. setTextSize (24); root. addView (txt); // Add control} @ Override public boolean onCreateOptionsMenu (Menu menu) {// Inflate the menu; this adds items to the action bar if it is present. getMenuInflater (). inflate (R. menu. main, menu); return true ;}}

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: info-contact@alibabacloud.com 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.