Android Custom Controls

Today I will share with you the usage of the combined controls. In many cases, android custom controls cannot meet requirements. How can this problem be solved? Many methods can be drawn by yourself. Some links can be rewritten by inheriting the basic control. Of course, you can combine the control into a new control, which is also the most convenient method. Today, we will introduce how to use the composite control through two instances. First, implement a button with images and text. The entire process can be completed in four steps. Step 1: Define a layout to implement the layout inside the button. The Code is as follows: custom_button.xml <? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = http://schemas.android.com/apk/res/android "android: orientation =" horizontal "android: layout_width =" fill_parent "android: layout_height =" fill_parent "> <ImageView android: id = "@ + id/iv" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_vertical" android: paddingLeft = "10.0dip" android: paddingTop = "10.0dip" android: paddingBo Ttom = "10.0dip"/> <TextView android: id = "@ + id/TV" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: textColor = "# ffffff" android: layout_marginLeft = "8dip" android: layout_gravity = "center_vertical" android: paddingLeft = "5.0dip" android: paddingTop = "10.0dip" android: paddingBottom = "10.0dip" android: paddingRight = "10.0dip" android: textSize = "18366sp"/> </LinearLayout> the xml implementation is a left image. Right-click layout. Next, write a class to inherit LinearLayout, import the layout just now, and set the required method so that you can control the display of the custom control content in the code. The Code is as follows: CustomButton. javapackage com. szy. customview; import android. content. context; import android. util. attributeSet; import android. view. layoutInflater; import android. widget. imageView; import android. widget. linearLayout; import android. widget. textView;/*** @ author coolszy * @ date 2011-12-20 * @ blog http://blog.92coding.com/*/public class CustomButton extends LinearLayout {private ImageView iv; private T ExtView TV; public CustomButton (Context context) {this (context, null);} public CustomButton (Context context, AttributeSet attrs) {super (context, attrs ); // import LayoutInflater. from (context ). inflate (R. layout. custom_button, this, true); iv = (ImageView) findViewById (R. id. iv); TV = (TextView) findViewById (R. id. TV);}/*** set image resources */public void setImageResource (int resId) {iv. setImageResource (res Id);}/*** set the displayed text */public void setTextViewText (String text) {TV. step 3 of setText (text) ;}}: add the control to layout of the custom control. You only need to add the control to xml. The method is as follows: main. xml <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "fill_parent" android: layout_height = "fill_parent" android: orientation = "vertical"> <com. szy. customview. customButton android: id = "@ + id/bt_confirm" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: background = "@ drawable/button_bg"/> <com. szy. customview. customButton Android: id = "@ + id/bt_cancel" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: background = "@ drawable/button_bg"/> </LinearLayout> note that the control label uses the complete class name. To give the button a click effect, you need to give it a selector background. The last step is to set the content of the control in the activity. Of course, it can also be set in xml, but only one can be set. When we need to use this control twice and the display content is different, it will not work. Setting in the activity is also very simple. We have written the corresponding method in the CustomButton class and can simply call it. The Code is as follows: package com. szy. customview; import android. app. activity; import android. OS. bundle; import android. view. view; import android. view. view. onClickListener; public class MainActivity extends Activity {private CustomButton btnConfirm; private CustomButton btnCancel; @ Override public void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. main); btnConfirm = (CustomButton) findViewById (R. id. bt_confirm); btnCancel = (CustomButton) findViewById (R. id. bt_cancel); btnConfirm. setTextViewText ("OK"); btnConfirm. setImageResource (R. drawable. confirm); btnCancel. setTextViewText ("cancel"); btnCancel. setImageResource (R. drawable. cancel); btnConfirm. setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {// Click Event} Here, A combination of text and image buttons The control is complete. In this way, it is very simple to use. The composite control can do a lot of things, mainly by writing the method to be used in the CustomButton class similar to the preceding example. Let's take a look at an EidtText combination control with the delete button. The delete button is displayed after the user input. You can click it to cancel the user input. The definition method is the same as the previous example. First, write a custom control layout: custom_editview.xml <? 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"> <EditText android: id = "@ + id/et" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: singleLine = "true"/> <ImageButton android: id = "@ + id/ib" android: visibility = "gone" android: src = "@ drawable/cancel" android: layout_width = "wrap_co Ntent "android: layout_height =" wrap_content "android: background =" #00000000 "android: layout_alignRight = "@ + id/et"/> </RelativeLayout> to hide the button on the right of the input box. Write a CustomEditView class to delete user input. The TextWatch interface is used to listen for text changes in the input box. It's easy to use. Just implement the three methods. Check the code: CustomEditView. javapackage com. szy. customview; import android. content. context; import android. text. editable; import android. text. textWatcher; import android. util. attributeSet; import android. view. layoutInflater; import android. view. view; import android. widget. editText; import android. widget. imageButton; import android. widget. linearLayout;/*** @ author coolszy * @ date 2011-12-20 * @ blog http: // blog.92codi Ng.com/*/public class CustomEditView extends LinearLayout implements EdtInterface {ImageButton ib; EditText et; public CustomEditView (Context context) {super (context);} public CustomEditView (Context context, AttributeSet attrs) {super (context, attrs); LayoutInflater. from (context ). inflate (R. layout. custom_editview, this, true); init ();} private void init () {ib = (ImageButton) findViewById (R. id. Ib); et = (EditText) findViewById (R. id. et); et. addTextChangedListener (tw); // bind a listener listening for text changes to the input box. // Add the button and click the event ib. setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {hideBtn (); // hide the button et. setText (""); // set the content of the input box to null});} // when the input box status changes, the corresponding method TextWatcher tw = new TextWatcher () is called () {@ Override public void onTextChanged (CharSequence s, int start, int before, int count) {// T ODO Auto-generated method stub} @ Override public void beforeTextChanged (CharSequence s, int start, int count, int after) {// TODO Auto-generated method stub} // call @ Override public void afterTextChanged (Editable s) {if (s. length () = 0) {hideBtn (); // hide button} else {showBtn (); // display button }}; @ Override public void hideBtn () {// The setting button is invisible if (ib. isShown () ib. setVisibility (View. GONE) ;}@ Over Ride public void showBtn () {// The setting button is visible if (! Ib. isShown () {ib. setVisibility (View. VISIBLE) ;}} interface EdtInterface {public void hideBtn (); public void showBtn () ;}in the afterTextChanged method of the TextWatch interface, if the length is 0, hide the button. Otherwise, the button is displayed. In addition, implement the click event of ImageButton (that is, the cross), delete the content in the input box, and hide the button. The implementation in the next two steps is added to the actual layout: main. xml <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "fill_parent" android: layout_height = "fill_parent" android: orientation = "vertical"> <com. szy. customview. customEditView android: layout_width = "fill_parent" android: layout_height = "wrap_content"/> </LinearLayout>