Android UI-advanced custom widget

I haven't written a blog for a long time. I am too busy, but I cannot summarize it again. Come on, there are a lot of things to summarize, And the blog record the UI.

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:

<? 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: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: Id = "@ + ID/IV" Android: src = "@ drawable/confirm" Android: paddingtop = "5dip" Android: paddingbottom = "5dip" Android: paddingleft = "40dip" Android: layout_gravity = "center_vertical"/> <textview Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: text = "OK" Android: textcolor = "#000000" 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 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) {This (context, null);} public imagebt (context, 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. settext (text );}}

Step 3: add the control to layout of the custom control. You only need to add the control to XML. The method is as follows:

<RelativeLayout          android:orientation="horizontal"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:layout_gravity="bottom"         >         <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:layout_width="wrap_content"             android:layout_alignParentBottom="true"             android:background="@drawable/btbg"             android:clickable="true"             android:focusable="true"            />         </RelativeLayout>

Note that the complete class name can be used for the control label. 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.setimageresource (R. drawable. confirm); ib2.settextviewtext ("cancel"); ib2.setimageresource (R. drawable. cancel); ib1.setonclicklistener (New onclicklistener () {@ override public void onclick (view v) {// click event here }});}}

In this way, a button control with a combination of 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:

<?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/menu_delete"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:background="#00000000"    android:layout_alignRight="@+id/et" /></RelativeLayout>

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 {imagebutton Ib; edittex T et; Public editcancel (context) {super (context);} public editcancel (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. set Onclicklistener (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 addition, implement the click event of imagebutton (that is, the cross), delete the content in the input box, and hide the button.

The text is judged in the aftertextchanged method of the textwatch interface. If the length is 0, the button is hidden. Otherwise, the button is displayed.

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. Last display

It is helpful for UI development to learn how to use composite controls flexibly. If you have any questions, please leave a message ~