Override button to implement picture Drawabletop and text Center together

In many cases, we need such a button.

Of course, it can be achieved by setting up a linearlayout to put a imageview and TextView. This is not the way to say it.
Another way to implement this is through the following tags:
Android:drawableleft,
Android:drawableright,
Android:drawabletop,
Android:drawablebottom;
But through the above label to achieve, the picture will be placed on the edge, such as, so there is no way to center with the text.

Here we can center the picture with the text by rewriting the button's OnDraw (Canvas canvas) method.

public class Drawablehorizontalbutton extends Button {public Drawablehorizontalbutton (context context, AttributeSet Attrs) {Super (context, attrs);} @Overrideprotected void OnDraw (canvas canvas) {canvas = Gettopcanvas (canvas); Super.ondraw (canvas);} Private Canvas Gettopcanvas (canvas canvas) {drawable[] drawables = Getcompounddrawables (); if (drawables = = null) {return c Anvas;} Drawable drawable = drawables[0];//Left drawableif (drawable = null) {drawable = drawables[2];//to the right drawable}//float text Size = Getpaint (). GetTextSize (); Using this will cause the text to be vertically drained down the float textSize = Getpaint (). Measuretext (GetText (). toString ()); int drawwidth = Drawable.getintrinsicwidth (); int drawpadding = getcompounddrawablepadding (); float contentwidth = textSize + drawWidth + Drawpadding;int leftpadding = (int) (GetWidth ()-contentwidth); setpadding (0, 0, leftpadding, 0); Directly to the left float dx = (getwidth ()-contentwidth)/2;canvas.translate (DX, 0);//Move the return canvas to the right;}}

Layout file:

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "    android:layout_width=" match_parent "    android:layout_height=" match_parent "    android:o rientation= "vertical" >    <com.example.view.drawablehorizontalbutton        android:id= "@+id/button"        Android:layout_width= "Match_parent"        android:layout_height= "300DP"        android:drawableleft= "@drawable/ic_ Android_small "        android:includefontpadding=" false "        android:text=" @string/hello_world "        android: Textsize= "20sp"/>        <com.example.view.drawablehorizontalbutton        android:layout_width= "Match_ Parent "        android:layout_height=" 300DP "        android:drawableright=" @drawable/ic_android_small "        Android:includefontpadding= "false"        android:text= "@string/hello_world"        android:textsize= "20sp"/> </LinearLayout>

Run the above code to see:

Well, that's how it's already centered. Let's talk about the implementation principle here. is by setpadding (int left, int top, int right, int bottom) method to move the text to the edge with the picture, and then use the canvas.translate (float dx, float dy) Move the picture and text together in the middle of the control. achieve a center effect;

In the same vein we can center on the implementation of the upper and lower types:

The code is as follows:

public class Drawableverticalbutton extends Button {public Drawableverticalbutton ( Context context, AttributeSet Attrs) {Super (context, attrs);} @Overrideprotected void OnDraw (canvas canvas) {canvas = Gettopcanvas (canvas); Super.ondraw (canvas);} Private Canvas Gettopcanvas (canvas canvas) {drawable[] drawables = Getcompounddrawables (); if (drawables = = null) {return c Anvas;} drawable drawable = drawables[1];//above Drawableif (drawable = = null) {drawable = drawables[3];//below Drawable}float TextSize = Getpaint (). GetTextSize (); int drawheight = Drawable.getintrinsicheight (); int drawpadding = Getcompounddrawablepadding (); float contentheight = textSize + drawheight + drawpadding;int toppadding = (int) (GetHeight ( )-Contentheight); setpadding (0, toppadding, 0, 0); float dy = (contentheight-getheight ())/2;canvas.translate (0, DY); LOG.I ("Drawabletopbutton", "Setpadding" (0, "+toppadding+", 0,0 "); LOG.I ("Drawabletopbutton", "Translate (0," +dy+ ")"); return canvas;}} 

Layout file:

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "    android:layout_width=" match_parent "    android:layout_height=" match_parent "    android:o rientation= "vertical" >    <com.example.view.drawableverticalbutton        android:id= "@+id/button"        Android:layout_width= "Match_parent"        android:layout_height= "300DP"        android:drawablebottom= "@drawable/ic _android_small "        android:includefontpadding=" false "        android:text=" @string/hello_world "        android: Textsize= "20sp"/>        <com.example.view.drawableverticalbutton        android:layout_width= "Match_parent"        android:layout_height= "300DP"        android:drawabletop= "@drawable/ic_android_small"        android: Includefontpadding= "false"        android:text= "@string/hello_world"        android:textsize= "20SP"/></ Linearlayout>

Run or Direct preview can be seen as follows:

Both up and down and the direction of the implementation of the principle are the same, is to move the text to the edge, and then the text and pictures moved to the middle, so the code is the same up and down direction. The way around is the same. So it is to write separately. In most cases, we use the upper and lower directions.

When it comes to overriding draw or overriding OnDraw on custom controls, Android officially recommends rewriting the words using the OnDraw interface.
"When implementing a view, does not override the This method; Instead, you should implement OnDraw "

From CSDN Blog: http://blog.csdn.net/dreamintheworld/article/details/45243663

Override button to implement picture Drawabletop and text Center together