Android UI Programming for custom controls preliminary--imagebutton

Overview:

I think when we use some apps, there should be no "bare controls". Unless it is software in some system, it is to maintain the consistency of style, make some trade-offs. I'm not here to accuse Android native controls of not looking good, honestly, I like some native controls for Android. Just some time for the consistency of style, you have to spend some effort on the art. This in the art, I really appreciate the product of a certain news. Let's start with 1.1 points to learn about custom controls in Android UI programming.

Analysis:

The custom control points like a stacked wood, and it is painted with color, and feature descriptions. Let's use an example to briefly discuss it.

Sample Analysis:Show:

This example selects ImageButton to do a simple parse. Let's take a look at running:

build a basic prototype:

For a prototype, the first thing to do is the choice of bricks. We chose a imageview and a textview, placed up and down, and then bound together with a constraint. The code snippet is as follows:

<?xml    Version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android" Android:layout_width= "Fill_parent" android:layout_height= "fill_parent" android:gravity= "Center_vertical" Android: orientation= "vertical" > <imageview android:id= "@+id/imageview1" android:layout_width= "wrap_content "Android:layout_height=" wrap_content "android:layout_gravity=" Center_horizontal "Android:paddingbott Om= "5dip" android:paddingtop= "5dip" android:src= "@drawable/right_icon"/> <textview android: Id= "@+id/textview1" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android: Layout_gravity= "Center_horizontal" android:layout_margintop= "5DP" android:text= "OK" android:textcolor = "#000000"/></LINEARLAYOUT> 

The above code only allows us to get an intermediate square and below text as shown above and a constraint that clings to the edges of the two.

Design and function additions:Exterior Design:

Now we are going to do color distribution and function description, which is implemented in Java code. The following key code:

/**     * Set Picture resource */public    void setimageresource (int resId) {        imageview.setimageresource (resId);    }    /**     * Set the displayed text */public    void Settextviewtext (String text) {        textview.settext (text);    }

features added:and for this we just let the "button" look a little better. So now we have to do another thing. For example, after clicking, there will be some specified, bound-dead actions that must be made to use this control. In fact, and the upper coat is a nature. The following key code:

@Override public    void Setonclicklistener (Onclicklistener l) {        auxiliaryfunction ();                Super.setonclicklistener (l);    }        protected void Auxiliaryfunction () {        log.i ("TAG", "Log message.");    

The additional features added above, we can check in the log log to see if there is a real completion.

Since it is a custom, of course, the ImageButton original build here is not a button. The following is the Truth code:

public class ImageButton extends LinearLayout {private ImageView ImageView;    Private TextView TextView;    Public ImageButton (Context context) {super (context);        } public ImageButton (context context, AttributeSet Attrs) {Super (context, attrs);        Layoutinflater Inflater = (layoutinflater) context.getsystemservice (Context.layout_inflater_service);        Inflater.inflate (R.layout.image_button, this);        ImageView = (ImageView) Findviewbyid (R.ID.IMAGEVIEW1);    TextView = (TextView) Findviewbyid (R.ID.TEXTVIEW1);    }/** * Set Picture resource */public void Setimageresource (int resId) {imageview.setimageresource (resId);    }/** * Sets the text displayed */public void Settextviewtext (String text) {textview.settext (text);                } @Override public void Setonclicklistener (Onclicklistener l) {auxiliaryfunction ();    Super.setonclicklistener (l); } protected void Auxiliaryfunction () {log.i ("TAG", "LoG message. ");}} 

Usage Analysis:

use in 1.xml code

Here's just one thing to note, we want to indicate the full path to the custom control, as follows:

<com.demo.customview.imagebutton.widgets.imagebutton        android:id= "@+id/btn_right"        android:layout_ Width= "150DP"        android:layout_height= "150DP"        android:background= "@drawable/custom_button"/>

2. Action Effect Configuration

For the button action, which is touch, press, and lift, the configuration of the three action effects needs to be created in the Drawable folder under the Res package (without this folder, create a new one). The following code:

<?xml version= "1.0" encoding= "Utf-8"? ><selector xmlns:android= "http://schemas.android.com/apk/res/ Android ">    <item android:drawable=" @drawable/button_unpress_background "android:state_focused=" true " Android:state_pressed= "false" ></item>    <item android:drawable= "@drawable/button_pressed_ Background "android:state_pressed=" true "></item>    <item android:drawable=" @drawable/button_ Unpress_background "android:state_focused=" false "android:state_pressed=" false "></item></selector >

use in 3.Java code

The use of Java code is the same as a button, as follows:

public class Mainactivity extends Activity {    private ImageButton mImageBtn1;    @Override    protected void onCreate (Bundle savedinstancestate) {        super.oncreate (savedinstancestate);        Setcontentview (r.layout.activity_main);        MIMAGEBTN1 = (ImageButton) This.findviewbyid (r.id.btn_right);        Mimagebtn1.settextviewtext ("OK");        Mimagebtn1.setimageresource (R.drawable.right_icon);        Mimagebtn1.setonclicklistener (New View.onclicklistener () {public            void OnClick (View v) {                Toast.maketext ( Getapplicationcontext (), "Click OK", 0). Show ();}}        );    }}

Source sharing:

For the above analysis, I think we should also have completed a very beautiful custom control. But it is also possible because I explained not clear enough, so that you did not achieve the desired effect, here also shared my source code. The following connections:

http://download.csdn.net/detail/u013761665/8408209

Android UI Programming for custom controls preliminary--imagebutton