The custom TextView property of the Android UI design series implements an underlined text box (4) _android

Source: Internet
Author: User
Tags border color

In the Android development process, if the Android system's own attributes do not meet our daily development needs, then we need to add additional attributes to the system controls. If a requirement is to implement an underlined text display (underline), it's not hard to do without a custom attribute (at least I think there are many ways to implement it), and today we'll explain how to use custom attributes to implement the underlined text box. Ok Android Custom properties are not very complex, can also be summed up as three steps away.
Old rules, or first put out the engineering directory:

One, add property file
Create a new Attrs.xml file in the Values folder and create a new property file in the file with the following code:

<?xml version= "1.0" encoding= "Utf-8"?> 
<resources> 
 
 <!--custom properties start--> 
 < Declare-styleable name= "Bordertextview" > 
  <attr name= "Layout_borders" format= "boolean" ></attr> 
  <attr name= "Layout_borderleft" format= "boolean" ></attr> 
  <attr name= "Layout_bordertop" Format= "boolean" ></attr> 
  <attr name= "Layout_borderright" format= "boolean" ></attr> 
  <attr name= "Layout_borderbottom" format= "boolean" ></attr> 
 </declare-styleable> 
 <! --Custom attribute end--> 
 
</resources> 

What you need to note is that the root node page of the custom properties file is <resources> Create the property values you want within the root node, and the node for the custom attribute starts with the <declare-styleable>. It represents a set of attributes that can contain many properties, where Name= "Bordertextview" is the property set name. Then in <declare-styleable> define the attributes we need with <attr> as nodes, attr the meaning name of the property indicates the name of the current property, and format represents the type of the property value. For example, our currently defined property type is a Boolean type, that is, the currently defined property value can only be Boolean, and the format can be expressed in a variety of types, the most common such as: String,boolean,integer,dimension, Reference and so on, no longer in detail, if anyone has questions, you can ask the mother, she knows more than I, hehe
Two, use a custom attribute
The attributes are defined in the Attrs.xml file and can be used in the layout file, followed by a look at how to use the custom attribute in the layout file, the code is as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= "http://schemas.android.com/apk/res/" Android "xmlns:greendroid=" http://schemas.android.com/apk/res/com.llew.e "android:orientation=" Vertical "Android: Layout_width= "Fill_parent" android:background= "#ffffff" android:layout_height= "fill_parent" > <TextView andr Oid:layout_width= "Fill_parent" android:layout_height= "wrap_content" android:layout_margin= "10dip" android:text= "@ String/hello "android:textcolor=" #000000 "/> <com.llew.e.view.wedgit.bordertextview android:layout_width=" Wrap_content "android:layout_height=" wrap_content "android:text=" left with border "android:layout_margin=" 10dip "Greendr Oid:layout_borderleft= "true" android:textsize= "20sp" android:textcolor= "#aabbcc" > </com.llew.e.view.wedgit. bordertextview> <com.llew.e.view.wedgit.bordertextview android:layout_width= "Wrap_content" Android:layout_ height= "Wrap_content" android:text= "Top with Border" android:layout_margin= "10dip" greendroid:layout_bordertop= "true" android:textsize= "20sp" Android: 
  Textcolor= "#bbccaa" > </com.llew.e.view.wedgit.BorderTextView> <com.llew.e.view.wedgit.bordertextview Android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:text= "right side with border" android:layout_m Argin= "10dip" greendroid:layout_borderright= "true" android:textsize= "20sp" android:textcolor= "#ccaabb" > < /com.llew.e.view.wedgit.bordertextview> <com.llew.e.view.wedgit.bordertextview android:layout_width= "Wrap_ Content "android:layout_height=" wrap_content "android:text=" bottom with Border "android:layout_margin= 10dip" greendroid:l Ayout_borderbottom= "true" android:textsize= "20sp" android:textcolor= "#abcabc" > </com.llew.e.view.wedgit.bor dertextview> <com.llew.e.view.wedgit.bordertextview android:layout_width= "Wrap_content" android:layout_he ight= "Wrap_content" AndroId:text= "Around with border" android:layout_margin= "10dip" greendroid:layout_borders= "true" android:textsize= "20SP" Androi  D:textcolor= "#cbacba" > </com.llew.e.view.wedgit.BorderTextView> </LinearLayout>

Using a custom control is also very simple is the package name + custom control name, in order to use our custom properties, you must add xmlns:greendroid= to the root node of the layout file http:// SCHEMAS.ANDROID.COM/APK/RES/COM.LLEW.E " , where xmlns:greendroid represents the namespace name, Greendroid is just a name. We use the prefix of the custom attribute, we can take the value arbitrarily (as long as it is not Android), COM.LLEW.E is the corresponding value of the package in manifest, using custom attributes like in the code: greendroid:layout_borderleft= "true", (*^__^*) Xi hee ..., is it easy?
Three, after the custom property values do the appropriate action
after you finish customizing the properties file, we'll add custom properties to the control, and the custom control I think the simplest implementation is to use inheritance, On the basis of inheritance to achieve the functionality we want, so in order to implement the text component with a border, I directly inherited the TextView component, based on its expansion, the code is as follows:

public class Bordertextview extends TextView {/** * with a border around "true: with Border around" "false: four weeks Without Borders" * * Boolean borders = 
 False 
 /** * Left with border "true: Left with Border" "false: Left without Border" * * Boolean borderleft = false; 
 /** * Top with Border "true: Top with Border" "false: Bottom without Border" * * Boolean bordertop = false; 
 /** * Right with Border "true: Right with Border" "false: Right without Border" * * Boolean borderright = false; 
 /** * Bottom with Border "true: Bottom with Border" "false: Bottom without Border" * * Boolean borderbottom = false; 
 
 /** * Border color/String TextColor = "#ff000000"; 
 Public Bordertextview {This (context, NULL); Public Bordertextview (context, AttributeSet attrs) {This (context, Attrs, Android.) 
 R.attr.textviewstyle); 
  Public Bordertextview (context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle); 
  Gets the custom attribute set TypedArray TypedArray = Context.obtainstyledattributes (Attrs, R.styleable.bordertextview); Whether to set all borders, default to False borders = Typedarray.getbooLean (r.styleable.bordertextview_layout_borders, false); 
  Whether to set the left border, default to False borderleft = Typedarray.getboolean (R.styleable.bordertextview_layout_borderleft, false); 
  Whether to set top border, default to False bordertop = Typedarray.getboolean (R.styleable.bordertextview_layout_bordertop, false); 
  Whether to set the right border, default to False borderright = Typedarray.getboolean (R.styleable.bordertextview_layout_borderright, false); Whether to set the bottom border, default to False borderbottom = Typedarray.getboolean (R.styleable.bordertextview_layout_borderbottom, Fals 
  e); Gets the text color value that is used to draw the border, and to match the text color textcolor = Attrs.getattributevalue ("Http://schemas.android.com/apk/res/android", "Te 
  Xtcolor "); 
 Typedarray.recycle (); 
  @Override public void Draw (Canvas Canvas) {Super.draw (Canvas); 
  Create a brush Paint Paint = new Paint (); 
  Gets the brush color int color = Paint.getcolor (); 
  Sets the brush color Paint.setcolor (Color.parsecolor (TextColor)); If borders is true, there is a border in the upper-right corner if (borders) {CanvaS.drawline (0, 0, 0, this.getheight ()-1, paint); 
   Canvas.drawline (0, 0, this.getwidth ()-1, 0, paint); 
   Canvas.drawline (This.getwidth ()-1, 0, This.getwidth ()-1, This.getheight ()-1, paint); 
  Canvas.drawline (0, This.getheight ()-1, This.getwidth ()-1, This.getheight ()-1, paint); 
   else {if (borderleft) {//Draw left Border line canvas.drawline (0, 0, 0, this.getheight ()-1, paint); 
   if (bordertop) {//Draw the top border line canvas.drawline (0, 0, this.getwidth ()-1, 0, paint); if (borderright) {//Draw right Border line Canvas.drawline (This.getwidth ()-1, 0, This.getwidth ()-1, This.geth 
   Eight ()-1, paint); if (borderbottom) {//Draw the bottom border line canvas.drawline (0, This.getheight ()-1, This.getwidth ()-1, this.ge 
   Theight ()-1, paint); 
 }//Set brush color to paint.setcolor (color);  } 
}

Actually add a border to Bordertextview is also very simple, the principle is that its draw method to draw out the border, we all know that each view control on the screen can be summed up to three major steps, first call the view control of the Onmesure method, Second, call the view control's OnLayout method and call the view control's OnDraw method again, so we just need to draw a border in the draw method, the steps to draw the border are simple, the code comment is detailed, and no longer explains
Finally run the program to see the effect of the picture bar, hehe

All right, today's custom properties implement a TextView control with borders, thank you for reading.

SOURCE Download: Android UI Implementation underlined text box

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

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.