Android custom RadioButton allows you to set the image size in the upper left and lower directions of text.

Android custom RadioButton allows you to set the image size in the upper left and lower directions of text.

I haven't updated my blog for a long time. When I wrote this technology, I felt a lot unfamiliar. So I felt deeply: if we do not engage in technology for a long time, we will be engaged in technology! Therefore, you should be careful when thinking about the attack.

Winter has passed. When I go out for a holiday to play, I can see the tender leaves on both sides and think of the poems of the new seal:

Yongliu

Jasper makes up a tree high,

Tens of thousands of lines of green silk.

I don't know who cut the fine leaves,

The spring breeze in February is like scissors.

I wonder if spring is coming and the legs will be far away.

 

All right, let's talk less about it and get down to the truth.

Code Effect

A friend raised a request two days ago to use RadioButton to switch the application page. As follows:

This idea is good, but there are also two problems: first, poor interface scalability; second, RadioButton cannot set the image size in xml, resulting in poor layout. Why? How to set the size of the image.

Baidu's common answer is to dynamically set the image size in the code. Then set it to the layout. The Code is as follows:

 

mRadioButton.setCompoundDrawables(left, top, right, bottom);

The parameter types are Drawable, which are left, top, right, and bottom. For the Drawable image to be displayed in the following four directions, see setCompoundDrawables (left, top, right, bottom) method: there is a description as follows:

 

Sets the Drawables (if any) to appear to the left of, above, to the right of, and below the text. use null if you do not want a Drawable there. the Drawables must already have hadDrawable.setBoundsCalled.

Before using the secondary method, you must use the Drawable. setBounds () method to set the border for the Drawable image, that is, the size to be displayed.

There is another way to achieve the same effect:

 

setCompoundDrawablesWithIntrinsicBounds(drawableLeft, drawableTop, drawableRight, drawableBottom);

Go to the source code to view the specific implementation of this method:

 

 

public void setCompoundDrawablesWithIntrinsicBounds(Drawable left, Drawable top,            Drawable right, Drawable bottom) {        if (left != null) {            left.setBounds(0, 0, left.getIntrinsicWidth(), left.getIntrinsicHeight());        }        if (right != null) {            right.setBounds(0, 0, right.getIntrinsicWidth(), right.getIntrinsicHeight());        }        if (top != null) {            top.setBounds(0, 0, top.getIntrinsicWidth(), top.getIntrinsicHeight());        }        if (bottom != null) {            bottom.setBounds(0, 0, bottom.getIntrinsicWidth(), bottom.getIntrinsicHeight());        }        setCompoundDrawables(left, top, right, bottom);    }

Previously, this method also called the setCompoundDrawables (left, top, right, bottom) method, and set the boundary range for the input image, that is, the image size. Let's look at the annotations for this method:

 

Sets the Drawables (if any) to appear to the left of, above, to the right of, and below the text. use null if you do not want a Drawable there. the Drawables 'bounds will be set to their intrinsic bounds.

It means to set the position where the drawable image is displayed on the top, bottom, and left of the text. If you do not want to set it, pass the null parameter. The border of a drawable image is its own fixed border range.

Okay, everything is clear. Can we change this boundary value parameter to change the image size? The answer is yes. The following is a time to witness a miracle.
First, we need to use the set image size attribute in xml, which is displayed in drawableSize. Then, the image attributes are given in four directions. Finally, the content of the attrs. xml file is as follows:

 

After specifying attributes, we need to get these attributes in the code to display what we need in the view.

 

The code for retrieving attributes is as follows:

 

Drawable drawableLeft = null, drawableTop = null, drawableRight = null, drawableBottom = null;TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.MyRadioButton);int n = a.getIndexCount();for (int i = 0; i < n; i++) {int attr = a.getIndex(i);Log.i("MyRadioButton", "attr:" + attr);switch (attr) {case R.styleable.MyRadioButton_drawableSize:mDrawableSize = a.getDimensionPixelSize(R.styleable.MyRadioButton_drawableSize, 50);Log.i("MyRadioButton", "mDrawableSize:" + mDrawableSize);break;case R.styleable.MyRadioButton_drawableTop:drawableTop = a.getDrawable(attr);break;case R.styleable.MyRadioButton_drawableBottom:drawableRight = a.getDrawable(attr);break;case R.styleable.MyRadioButton_drawableRight:drawableBottom = a.getDrawable(attr);break;case R.styleable.MyRadioButton_drawableLeft:drawableLeft = a.getDrawable(attr);break;default :break;}}a.recycle();

Now, we have obtained the set image and the drawableSize of the image to be displayed. Next, rewrite the setCompoundDrawablesWithIntrinsicBounds method. Set the required image size to the image.

 

 

public void setCompoundDrawablesWithIntrinsicBounds(Drawable left,Drawable top, Drawable right, Drawable bottom) {if (left != null) {left.setBounds(0, 0, mDrawableSize, mDrawableSize);}if (right != null) {right.setBounds(0, 0, mDrawableSize, mDrawableSize);}if (top != null) {top.setBounds(0, 0, mDrawableSize, mDrawableSize);}if (bottom != null) {bottom.setBounds(0, 0, mDrawableSize, mDrawableSize);}setCompoundDrawables(left, top, right, bottom);}

After setting the image, do not forget to call the setCompoundDrawables (left, top, right, bottom) method. We need to display the image in the view. If you are interested in this method, you can check the source code.

 

At this point, the Code section has been compiled.

Next, add the required image resources and xml layout settings.

The xml layout is as follows:

 

 
     
  
   
<FrameLayout android: id = "@ + id/tab_content" android: layout_width = "fill_parent" android: layout_height = "0dp" android: layout_weight = "1.0" android: background = "# FFFFFF"/>
                           
                
                 
       
        
         
        
       
      
     
    
       
  
 

Specifically, the first two RadioButton are customized. In addition, the system is used for comparison. Do not forget the clickable attributes of the namespace and custom RadioButton when using custom attributes. Android: clickable = "true ".

 

The complete source code of the custom RadioButton is as follows:

 

Package com. example. test; import android. r. integer; import android. r. raw; import android. content. context; import android. content. res. resources; import android. content. res. typedArray; import android. graphics. drawable. drawable; import android. util. attributeSet; import android. util. log; import android. widget. radioButton; public class MyRadioButton extends RadioButton {private int mDrawableSize; // pub size set in the xml file Lic MyRadioButton (Context context) {this (context, null, 0);} public MyRadioButton (Context context, AttributeSet attrs) {this (context, attrs, 0 );} public MyRadioButton (Context context, AttributeSet attrs, int defStyle) {super (context, attrs, defStyle); // TODO Auto-generated constructor stubDrawable vertex = null, drawableTop = null, drawableRight = null, drawableBottom = null; TypedArray a = con Text. obtainStyledAttributes (attrs, R. styleable. myRadioButton); int n =. getIndexCount (); for (int I = 0; I <n; I ++) {int attr =. getIndex (I); Log. I ("MyRadioButton", "attr:" + attr); switch (attr) {case R. styleable. myRadioButton_drawableSize: mDrawableSize =. getDimensionPixelSize (R. styleable. myRadioButton_drawableSize, 50); Log. I ("MyRadioButton", "mDrawableSize:" + mDrawableSize); break; case R. styleab Le. myRadioButton_drawableTop: drawableTop =. getDrawable (attr); break; case R. styleable. myRadioButton_drawableBottom: drawableRight =. getDrawable (attr); break; case R. styleable. myRadioButton_drawableRight: drawableBottom =. getDrawable (attr); break; case R. styleable. myRadioButton_drawableLeft: drawableLeft =. getDrawable (attr); break; default: break;}. recycle (); setCompoundDrawablesWithIntrinsicBounds (d RawableLeft, drawableTop, drawableRight, drawableBottom);} public void Merge (Drawable left, Drawable top, Drawable right, Drawable bottom) {if (left! = Null) {left. setBounds (0, 0, mDrawableSize, mDrawableSize);} if (right! = Null) {right. setBounds (0, 0, mDrawableSize, mDrawableSize);} if (top! = Null) {top. setBounds (0, 0, mDrawableSize, mDrawableSize);} if (bottom! = Null) {bottom. setBounds (0, 0, mDrawableSize, mDrawableSize);} setCompoundDrawables (left, top, right, bottom );}}

The code is very simple, so no comments are written. All the explanations are in the text.

 

So far, RadioButton, Which is customized to change the size of a Drawable image, has been completed. After this operation, we can define anything we want. You can't do it.

Source code

Reprinted please indicate the source