Android Custom Controls

Loading editor... Android custom control @ noTice501 today I will share with you the use of the combined control. 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:

This xml implements a layout of the right words in the left graph. Next, write a class to inherit the 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: package com. notice. ib; import android. content. context; import android. util. attributeSet; import android. view. layoutInflater; import android. widget. imageView; import android. widget. linearLayout; import android. widget. textView; public class ImageBt extends LinearLayout {private ImageView iv; private TextView TV; public ImageBt (Context context) {this (context, null);} public ImageBt (Context co Ntext, AttributeSet attrs) {super (context, attrs); // import the LayoutInflater layout. from (context ). inflate (R. layout. custombt, 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. step 3: setText (text) ;}} Add this control to the out file. You only need to add this control to the xml file. The method is as follows: <com. notice. ib. imageBt android: id = "@ + id/bt_confirm" android: layout_height = "wrap_content" android: layout_width = "wrap_content" android: layout_alignParentBottom = "true" android: background = "@ drawable/btbg" android: clickable = "true" android: focusable = "true"/> <com. notice. ib. imageBt android: id = "@ + id/bt_cancel" android: layout_toRightOf = "@ id/bt_confirm" android: layout_height = "wrap_content" android: lay Out_width = "wrap_content" android: layout_alignParentBottom = "true" android: background = "@ drawable/btbg" android: clickable = "true" android: focusable = "true"/> note that the control label can use 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 ImageBt class and can simply call it. The Code is as follows: public class MainActivity extends Activity {private ImageBt ib1; private ImageBt ib2;/** Called when the activity is first created. * // @ Override public void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. login); ib1 = (ImageBt) findViewById (R. id. bt_confirm); ib2 = (ImageBt) findViewById (R. id. bt_cancel); ib1.setTextViewText ("OK"); ib1.setIma GeResource (R. drawable. confirm); ib2.setTextViewText ("cancel"); ib2.setImageResource (R. drawable. cancel); ib1.setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {// Click Event} Here, A button control with text and images 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 ImageBt class similar to the previous 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:

To achieve the button Effect on the right of the input box, be sure to hide the button. Write an EditCancel 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: package com. notice. ce; 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; public class EditCancel extends LinearLayout implements EdtInterface {ImageBut Ton ib; EditText et; public EditCancel (Context context) {super (context);} public EditCancel (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 for text changes to the input box // Add button click 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) {// TODO 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) ;}@ Override 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 and will not be written out again, which is the same as that in the previous example. Finally, the display effect can be flexibly used to use the composite controls, which will be of great help to UI development. If you have any questions, please leave a message ~ Classification: GUI design, technical document label: This article is based on the signature 2.5 mainland China License Agreement, you are welcome to reprint, deduct or use for commercial purposes, but must keep the signature of this article. By noTice501 link: http://www.cnblogs.com/noTice520/archive/2011/08/07/2130359.html