Chapter 2 attracting your attention-UI programming (6) and Chapter 2 ui

Chapter 2 attracting your attention-UI programming (6) and Chapter 2 ui
2.2 highlight your personality-custom UI Components

Many times, common Android controls cannot meet our needs. To attract more attention and achieve unconventional results, we can define various controls by ourselves. We can override some links by inheriting the basic controls. Of course, we can also combine multiple controls into a new control for use.

Let's take a look at the following example. In this example, we have implemented a button with images and text.

First, define a layout to implement the layout inside the button. The Code is as follows:

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" Android: orientation = "horizontal" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content"> <ImageView Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: id = "@ + id/iv" Android: paddingTop = "5dip" Android: paddingBottom = "5dip" Android: paddingLeft = "20dip" Android: layout_gravity = "center_vertical"/> <TextView Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: textColor = "#333" Android: id = "@ + id/TV" Android: layout_marginLeft = "8dip" Android: layout_gravity = "center_vertical"/> </LinearLayout>

 

This xml implements a layout of the right words in the left graph. Next, write a class MyLayout to inherit LinearLayout, import the layout just now, and set the required method, this allows you to control the display of the custom control content in the code. The Code is as follows:

// Import omitted Public class MyLayout extends LinearLayout {   Private ImageView iv; Private TextView TV;   Public MyLayout (Context context ){ This (context, null ); } Public MyLayout (Context context, AttributeSet attrs ){ Super (context, attrs ); // Import Layout LayoutInflater. from (context). inflate (R. layout. mylayout, this, true ); Iv = (ImageView) findViewById (R. id. iv ); TV = (TextView) findViewById (R. id. TV ); } /** * Set image resources */ Public void setImageResource (int resId ){ Iv. setImageResource (resId ); } /** * Set the displayed text. */ Public void setTextViewText (String text ){ TV. setText (text ); } }

 

Then, add the control to layout of the custom control. You only need to add the control to xml:

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" Android: orientation = "vertical" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent"> <Com. char2.MyLayout Android: id = "@ + id/my_button" Android: layout_height = "wrap_content" Android: layout_width = "wrap_content" Android: background = "@ drawable/button_gray"/> </LinearLayout>

 

Finally, we set the content of the control in activity. Some code is as follows:

MyLayout myLayout = (MyLayout) findViewById (R. id. my_button ); MyLayout. setImageResource (R. drawable. close ); MyLayout. setTextViewText ("close ");

 

The results are as follows:

Figure 2-18 combination of multiple controls

 

In this way, a button control with a combination of text and images is complete. In this way, it is very simple to use. Next, let's take a look at an example. A custom control displays the words with borders. Let's create a class that inherits TextView and then override its onDraw method. Some code is as follows:

Private Canvas canvas = new Canvas ();   Public MyTextView (Context context, AttributeSet attrs ){ Super (context, attrs ); } @ Override Protected void onDraw (Canvas canvas ){ Super. onDraw (canvas ); This. canvas = canvas; Rect rec = canvas. getClipBounds (); Paint paint = new Paint (); Paint. setColor (Color. WHITE ); Paint. setStyle (Paint. Style. STROKE ); Paint. setStrokeWidth (2 ); Canvas. drawRect (rec, paint ); }

 

Then, add the control to layout of the custom control:

<? Xml version = "1.0" encoding = "UTF-8"?> <RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent"> <Com. char2.MyTextView Android: layout_centerInParent = "true" Android: id = "@ + id/my_button" Android: layout_height = "wrap_content" Android: layout_width = "wrap_content" Android: text = "Custom Controls" Android: textSize = "24sp"/> </RelativeLayout>

 

The results are as follows:

Figure 2-19 override the onDraw method of the control

 

You can see that the word with a border has been implemented.