Android UI programming-custom controls-ImageButton

Android UI programming-custom controls-ImageButton
Overview:

I think we should not see some "Bare controls" when using some apps. Unless it is software in some systems, it is to maintain style consistency and make some trade-offs. I am not here accusing you of poor reading of Android native controls. To be honest, I like some native Android controls very much. Sometimes, for style consistency, you have to spend some effort on art. At this point, I really appreciate a certain news product. Next let's start learning about the custom controls in Android UI programming.

 

Analysis:

The custom control points are like stacked wood and painted with color and function instructions. Let's use an example to briefly discuss it one by one.

 

Example Analysis: display:

In this example, ImageButton is selected for simple analysis. Next let's take a look at running:

 

Basic prototype:

For prototype, the first thing to do is to select blocks. We chose an ImageView and a TextView, which are placed up and down, and then bound together with a constraint. The code snippet is as follows:

 

The code above can only give us a square image shown above and the text below and a constraint that is closely bound to the edge of the two.

 

 

Exterior design and function addition: exterior design:

Now we need to conduct color allocation and function description, which is implemented in Java code. The following key code:

 

/*** Set image resources */public void setImageResource (int resId) {imageView. setImageResource (resId);}/*** set the displayed text */public void setTextViewText (String text) {textView. setText (text );}

 

 

Function addition: for this, we just make the "Button" look better. So now we have to do another thing. For example, after clicking the button, you must have some specified, bound, and bound operations that must be performed by using this control. In fact, it is similar to the coat above. 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 can be checked in the Log to see if they have been completed.

 

Since it is custom, of course the original ImageButton build here won't be 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 image resource */public void setImageResource (int resId) {imageView. setImageResource (resId);}/*** set the displayed text */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:

 

1. Use in xml Code

Note that the complete path of the custom control should be specified as follows:

 

 

 

2. Action effect Configuration

For the Button action, that is, touch, press, and lift, the configuration of the effect of these three actions must be created in the drawable folder under the res package (a new one is created without this folder ). The following code:

 

 

 

3. Use in Java code

The use of Java code is no different from that of Button, as shown below:

 

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 ();}});}}