Android Development's custom control usage detailed _android

Source: Internet
Author: User
Tags control label sqlite database stub

This example describes the custom control usage of Android development. Share to everyone for your reference, specific as follows:

Share with you today the use of the combined controls. Most of the time Android custom controls do not meet the requirements. There are many ways you can draw one yourself, you can override some of the steps by inheriting the underlying control, and of course you can combine the controls into a new control, which is also one of the most convenient ways. Let's get to the bottom of this. How to use the composite control is described in two instances.

The first implementation of a button with pictures and text, as shown in the picture:

The whole process can be divided into four steps. The first step is to define a layout that implements the inner layout of 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:paddi ngtop= "10.0dip" android:paddingbottom= "10.0dip"/> <textview android:id= "@+id/tv" android:layout_width= "W"
   Rap_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:paddi 
Ngbottom= "10.0dip" android:paddingright= "10.0dip" android:textsize= "18.0sp"/> </LinearLayout> 

This XML implements the layout of a left-right word, then writes a class that inherits LinearLayout, imports just the layout, and sets the desired method so that it can control the display of the custom control content in the code. The code is as follows:

Custombutton.java

Package 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;
public class CustomButton extends LinearLayout
{
 private ImageView IV;
 Private TextView TV;
 Public CustomButton {This (context
 , null);
 }
 Public CustomButton (context, AttributeSet attrs)
 {
 Super (context, attrs);
 Import layout
 layoutinflater.from. Inflate (R.layout.custom_button, this, true);
 IV = (ImageView) Findviewbyid (R.ID.IV);
 TV = (TextView) Findviewbyid (r.id.tv);
 }
 /**
 * Set Picture resource */public
 void setimageresource (int resid)
 {
 iv.setimageresource (resid);
 }
 /**
 * Settings Display text */public
 void Settextviewtext (String text)
 {
 tv.settext (text);
 }


The third step is to add the control to the layout that you need to use this custom control, just add it to the 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 full class name. In order to give the button a click effect, you need to give him a selector background, here is not said.

The final step is to set the contents of the control in the activity. Of course, it can be set in XML, but only one, when we need to use such a control two times, and the display content is not the same. Setting in activity is also very simple, we have already written the corresponding method in CustomButton this class, simple call can. 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 ("cancellation");
 Btncancel.setimageresource (r.drawable.cancel);
 Btnconfirm.setonclicklistener (New Onclicklistener ()
 {
  @Override public
  void OnClick (View v)
  {
  //Click here to implement the event
  }
 }
 }


This way, a combination button control with text and pictures is done. This is a very simple way to comb. The combination control can do a lot of things, mainly in the CustomButton class in the example above to write the method you want to use.

Then look at a combo control with the eidttext of the delete button. That is, after the user entered, the Delete button appears, click to cancel the user input.

The method is defined as the previous example. First, write a layout for the custom control:

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_content"
   android: layout_height= "Wrap_content"
   android:background= "#00000000"
   android:layout_alignright= "@+id/et"/>
</RelativeLayout>

Implement the button effect on the right of the input box, and notice that the button is hidden. Then write a Customeditview class that implements the delete user input feature. Here we use the Textwatch interface to listen for text changes in the input box. The use is also very simple, to achieve his three methods can be. Look at the code:

Customeditview.java

Package 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;
 public class Customeditview extends LinearLayout implements Edtinterface-ImageButton IB;
 EditText et;
 Public Customeditview {Super (context);
 Public Customeditview (context, AttributeSet attrs) {Super (context, attrs);
 Layoutinflater.from. 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)//For the input box to bind a listener//Add button click event Ib.setonclicklistener (New Onclicklistener () {@Overri
 De public void OnClick (View v) {hidebtn ();//Hide button Et.settext ("");/Set input box content is null}}); }
 // When the input box state changes, the corresponding method is called textwatcher tw = new Textwatcher () {@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 after text change
 TextChanged (Editable s) {if (s.length () = = 0) {hidebtn ();//Hide Button} else {showbtn ();//Display Button}}};
 @Override public void Hidebtn () {//Setting button is not visible if (Ib.isshown ()) ib.setvisibility (View.gone);
 @Override public void Showbtn () {//Set button visible if (!ib.isshown ()) {ib.setvisibility (view.visible);
 }} interface Edtinterface {public void hidebtn ();
public void showbtn ();

 }

In the Textwatch interface of the Aftertextchanged method to judge the text, if the length is 0, hide the button, otherwise, the display button.

In addition, implement ImageButton (that is, that fork) Click event, delete the contents of the input box, and hide the button.

The next two-step implementation is to add 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>

The final display effect is as shown in figure:

More interested readers of Android-related content can view the site: "Summary of Android Control usage", "Android View Summary", "Android operation SQLite Database Skills Summary", " Android operation JSON format data tips summary, "Android Database Operation skills Summary", "Android File Operation skills Summary", "Android programming development of the SD card operation Summary", "Android Development introduction and Advanced course" and " Android Resource Operating Skills summary

I hope this article will help you with the Android program.

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.