Android to create ImageView with transparent arcs

These days, because of project requirements, you need to overlay a transparent arc on the ImageView, and display the corresponding text in the direction of the arc, as shown in the following:

To get this demand, the first thing to think about is to customize a imageview to achieve this function, that is, to draw arcs and text in OnDraw (). At the same time because to ensure that the position of the arc can be arbitrarily placed, the color of the arc, transparency and text size, color, etc. are controllable, so added some custom properties. The implementation code is very simple, as follows:

1. Custom ImageView:

  1 package Com.chunk.customviewsdemo.views.ArcImageView;  2 3 Import Android.content.Context;  4 Import Android.content.res.TypedArray;  5 Import Android.graphics.Canvas;  6 Import Android.graphics.Paint;  7 Import Android.graphics.Path;  8 Import Android.graphics.RectF; 9 Import Android.util.AttributeSet; Ten import Android.widget.ImageView; Import COM.CHUNK.CUSTOMVIEWSDEMO.R; /** description:a Custom ImageView with circular arc and text * Author:xiaoyu * DATE:2016/5/10 13:5 5 * * Public class Arcimageview extends ImageView {/** * The default text size. * * * PR Ivate Final float default_text_size = 20; /** * The default scale value which decides the width of the arc. */+ private final float Default_scale = 0.5f; /** * The default transparency of arc. */-Private final int default_arc_alpha = 100; /** * The default width of arc. * +/-Private Final int default_arc_width = 160; /** PNS * The default angle that the arc starts with. * * * The private final int default_start_angle = 180; /** * The default angle that arc. * * * Private final int default_sweep_angle = 90; /** * The default distance along the path to add to the text ' s starting position. */+ private final int default_h_offset = 100; /** * The default distance above (-) or below (+) the path to position the text. * * Private final int default_v_offset = 20; Mcontext private Context; /** * The text displayed on ImageView along arc. "* * * * private String mdrawstr; /** * The font size of text. * * * Private float mtextsize = default_text_size; /** * The scale value which decides the width of the arc. * * * + private float mscale = Default_scale; /** * The transparency of Arc. * * */-Marcalpha int = Default_arc_alpha; /** * The width of the arc. * * * the private int marcwidth = Default_arc_width; /**, the start angle of angle. * * * private int mstartangle = Default_start_angle; /** * The swept angle of angle. * * * the private int msweepangle = Default_sweep_angle; Bayi/** * The default distance along the path to add to the text ' s starting position. * * * * * private float mhoffset = Default_h_offset; /** * The default distance above (-) or below (+) the path to position the text. * * * * private float mvoffset = Default_v_offset; /** * The style of arc, all styles includes Left_top, Left_bottom, Right_top, Right_bottom, CENTER. * Of course, you can add your own style according to your demands. * * * * * private int mdrawstyle; 94/** * The color of arc. * * * * Private int marccolor; 98/** * The color of text.100 */101 private int mtextcolor;102 103 public arcimageview (Context C Ontext) {104 super (context); This.mcontext = context;106}107 108 public arcimageview (context C Ontext, AttributeSet attrs) {109 Super (context, attrs); this.mcontext = context;111 Obtainattri         Butes (attrs);}113 Arcimageview (context context, AttributeSet attrs, int defstyleattr) {115 Super (context, attrs, defstyleattr); this.mcontext = context;117 obtainattributes (attrs); 118}119 1     /**121 * Set The text that is drawn on arc.122 * @param drawstr the text content.123 */124 public void Setdrawstr (String drawstr) {this.mdrawstr = drawstr;126//refresh this view127 inv Alidate ();}129/**131 * Set the transparency of arc.132 * @param marcalpha the value of Transpar ency.133      */134 public void Setarcalpha (int. marcalpha) {135 This.marcalpha = marcalpha;136//refresh This view137 invalidate (); 138}139 @Override141 protected void OnDraw (canvas canvas) {142 Super . OnDraw (canvas); 143//draw arc144 Paint arcpaint = new Paint (); 145 arcpaint.setstrokewidth (Marcwid th); 146 Arcpaint.setstyle (Paint.Style.STROKE); 147 Arcpaint.setcolor (Marccolor); 148 Arcpaint.setalp         Ha (marcalpha); 149 int width = getwidth (); int height = getheight (); 151 float radius;152 if (width > height) {153 radius = Mscale * height;154} else {155 radius = Mscale * WI dth;156}157 RECTF oval = new RECTF (); 158 159 int center_x = width;160 int center_y = Heig ht;161 162 switch (mdrawstyle) {163 case 0:164 center_x = 0;165 Center              _y = 0;166   Mstartangle = 90;167 Msweepangle = -90;168 break;169 case 1:170 center_x = 0;171 Center_y = height;172 Mstartangle = 270;173 Msweepan GLE = 90;174 break;175 case 2:176 center_x = width;177 center_             y = 0;178 Mstartangle = 180;179 Msweepangle = -90;180 break;181 Case 3:182 center_x = width;183 center_y = height;184 Mstartangle = 180;  185 Msweepangle = 90;186 break;187 case 4:188 center_x = width /2;189 center_y = height/2;190 Mstartangle = 270;191 Msweepangle = 90; 192 break;193}194 Float left = center_x-radius;195 float top = Center_y-radiu s;196 float Right = center_x + radius;197 Float bottom = center_y + radius;198 Oval.set (left, top, right, bottom); 199  Canvas.drawarc (oval, Mstartangle, Msweepangle, False, arcpaint); + 201//draw text202 Paint textpaint = new Paint (); 203 textpaint.settextsize (mtextsize); 204 Textpaint.setstyle (Paint.Style.FILL); 205 T Extpaint.setcolor (mtextcolor); 206 Path Path = new Path () 207 Path.addarc (Oval, Mstartangle, msweepangle); 2 Canvas.drawtextonpath (mdrawstr, Path, Mhoffset, Mvoffset, textpaint); 209}210 211/**212 * obtain Custom attributes, been defined in attrs.xml.213 * @param attrs A collection of attributes.214 */215 pri vate void Obtainattributes (AttributeSet attrs) {216 TypedArray ta = mcontext.obtainstyledattributes (attrs, R.style Able. Arcimageview); 217 mdrawstr = Ta.getstring (r.styleable.arcimageview_drawstr); 218 Mtextsize = Ta.getDimensio N (R.STYLEABLE.ARCIMAgeview_textsize, default_text_size); 219 Marcalpha = Ta.getinteger (R.styleable.arcimageview_arcalpha, DEFAULT_ARC_  ALPHA); marcwidth = Ta.getinteger (R.styleable.arcimageview_arcwidth, default_arc_width); 221 MStartAngle = Ta.getinteger (R.styleable.arcimageview_startangle, default_start_angle); 222 Msweepangle = Ta.getInteger (R.style Able. Arcimageview_startangle, Default_sweep_angle); 223 Mhoffset = Ta.getinteger (R.styleable.arcimageview_hoffset, DEFAU Lt_h_offset); 224 Mvoffset = Ta.getinteger (R.styleable.arcimageview_voffset, default_v_offset); 225 MArcColo R = Ta.getcolor (R.styleable.arcimageview_arccolor, 0XCCCCCC); 226 Mtextcolor = Ta.getcolor (r.styleable.arcimageview _textcolor, 0XFFFFFF); 227 Mdrawstyle = Ta.getint (r.styleable.arcimageview_drawstyle, 0); 228 ta.recycle (); 2 29}230}

2. Custom attributes in Attrs.xml under the Values folder:

 1 <?xml version= "1.0" encoding= "Utf-8"?> 2 <resources> 3 <declare-styleable name= "Arcimageview" > 4         <attr name= "Drawstr" format= "string"/> 5 <attr name= "TextSize" format= "Dimension"/> 6 <attr name= "Arcalpha" format= "integer"/> 7 <attr name= "Arcwidth" format= "integer"/> 8 < attr name= "startangle" format= "integer"/> 9 <attr name= "SweepAngle" format= "integer"/>10 <at TR name= "scale" format= "float"/>11 <attr name= "Hoffset" format= "float"/>12 <attr name= "voffs Et "format=" float "/>13 <attr name=" DrawStyle "format=" enum ">14 <enum name=" Left_top "Valu E= "0"/>15 <enum name= "Left_bottom" value= "1"/>16 <enum name= "Right_top" value= "2"/&         gt;17 <enum name= "Right_bottom" value= "3"/>18 <enum name= "CENTER" value= "4"/>19     </attr>20    <attr name= "Arccolor" format= "color"/>21 <attr name= "textcolor" format= "Color"/>22 </decl Are-styleable>23 </resources>

3. In Mainactivity call Arcimageview, the implementation code is as follows:

 1 package Com.chunk.customviewsdemo; 2 3 Import Android.os.Bundle; 4 Import android.support.v7.app.AppCompatActivity; 5 Import Android.view.View; 6 Import Android.widget.Button; 7 8 Import Com.chunk.customviewsdemo.views.ArcImageView.ArcImageView; 9 public class Mainactivity extends appcompatactivity implements View.onclicklistener {One private Arcimageview aiv_     one;12 private Arcimageview aiv_two;13 private Arcimageview aiv_three;14 private Arcimageview aiv_four;15 Private Button btn_another_one;16 private int mgroup = 1;17 @Override19 protected void onCreate (Bundle save         Dinstancestate) {super.oncreate (savedinstancestate); Setcontentview (r.layout.activity_main); 22 Aiv_one = (Arcimageview) Findviewbyid (r.id.aiv_one); Aiv_one.setarcalpha = (aiv_two EW) Findviewbyid (r.id.aiv_two), Aiv_two.setarcalpha (Arcimageview), Aiv_three = Findviewbyid (R.id   . aiv_three); 27      Aiv_three.setarcalpha (Aiv_four) = (Arcimageview) Findviewbyid (r.id.aiv_four); Aiv_four.seta Rcalpha (Btn_another_one) = (Button) Findviewbyid (r.id.btn_another_one); btn_another_one.setonclic             Klistener (this),}33 @Override35 public void OnClick (View v) {V.getid ()) {37                     Case r.id.btn_another_one:38 if (mgroup = = 1) {aiv_one.setdrawstr ("Apple"); 40                     Aiv_one.setbackgroundresource (r.drawable.apple); Aiv_two.setdrawstr ("Grapefruit"); 42                     Aiv_two.setbackgroundresource (r.drawable.pineapple); Aiv_three.setdrawstr ("banana"); 44                     Aiv_three.setbackgroundresource (R.drawable.banana); Aiv_four.setdrawstr ("pineapple"); 46                 Aiv_four.setbackgroundresource (r.drawable.pineapple); mgroup = 2;48              } else {49       Aiv_one.setdrawstr ("Steak"); Aiv_one.setbackgroundresource (R.drawable.steak); 51                     Aiv_two.setdrawstr ("Seafood"); Aiv_two.setbackgroundresource (R.drawable.seafood); 53                     AIV_THREE.SETDRAWSTR ("cheese"); Aiv_three.setbackgroundresource (R.drawable.cheese); 55                     AIV_FOUR.SETDRAWSTR ("BBQ"); Aiv_four.setbackgroundresource (r.drawable.barbecue); 57 Mgroup = 1;58}59 break;60}61}62}

The 4.MainActivity layout file is as follows:

  1 <linearlayout 2 xmlns:android= "http://schemas.android.com/apk/res/android" 3 xmlns:custom= "Http://schemas . Android.com/apk/res-auto "4 android:layout_width=" match_parent "5 android:layout_height=" match_parent "6 A  ndroid:layout_margintop= "100DP" 7 android:layout_marginbottom= "100DP" 8 android:orientation= "vertical" > 9 Ten <button android:id= "@+id/btn_another_one" android:layout_width= "Wrap_content" ndroid:layout_height= "Wrap_content" android:text= "Change a group"/> <linearlayout Out_width= "Match_parent" android:layout_height= "0DP" android:layout_weight= "1" android:or ientation= "Horizontal" > <relativelayout android:layout_width= "0DP" and roid:layout_weight= "1" android:layout_height= "match_parent" > <com.chunk.customvie Wsdemo.views.ArcImageVieW.arcimageview android:id= "@+id/aiv_one" android:layout_width= "Match_parent" 30                 Android:layout_height= "Match_parent" to android:background= "@drawable/steak" 32                 Custom:drawstyle= "Right_bottom" custom:drawstr= "steak" custom:arcalpha= "100" 35 Custom:arccolor= "@color/gray" custom:textcolor= "@color/black" Notoginseng custom:text Size= "20sp"/> </RelativeLayout> <relativelayout android:layout_width             = "0DP" android:layout_weight= "1" android:layout_height= "match_parent" > 44 45                 <com.chunk.customviewsdemo.views.arcimageview.arcimageview android:id= "@+id/aiv_two" 47 Android:layout_width= "Match_parent" android:layout_height= "Match_parent" Andro Id:background= "@drawable/seafood "custom:drawstyle=" Left_bottom "Wuyi custom:drawstr=" Seafood "cust                 Om:arcalpha= "custom:arccolor=" @color/gray "custom:textcolor=" @color/black "55     Custom:textsize= "20sp"/> </RelativeLayout> </LinearLayout> 59 60 <linearlayout android:layout_width= "match_parent" android:layout_height= "0DP" Android : layout_weight= "1" android:orientation= "horizontal" > <relativelayout Andro   Id:layout_width= "0DP" android:layout_weight= "1" android:layout_height= "match_parent" > 70 <com.chunk.customviewsdemo.views.arcimageview.arcimageview android:id= "@+id/aiv_thr                 EE "android:layout_width=" match_parent "android:layout_height=" Match_parent "75 Android:background= "@drawable/cheese" custom:drawstyle= "right_top" custom:drawstr= "Cheese" 78 Custom:arcalpha= "custom:arccolor=" @color/gray "custom:textcolor=" @col Or/black "Bayi custom:textsize=" 20sp "/> </RelativeLayout> <relativela Yout android:layout_width= "0DP" android:layout_weight= "1" Android:layout_heig                 ht= "Match_parent" > <com.chunk.customviewsdemo.views.arcimageview.arcimageview 90 Android:id= "@+id/aiv_four" android:layout_width= "Match_parent" Android:layout_heigh  t= "Match_parent" android:background= "@drawable/barbecue" 94 custom:drawstyle= "Left_top" Custom:drawstr= "BBQ" custom:arcalpha= "custom:arccolor=" @colo              R/gray "98   Custom:textcolor= "@color/black" custom:textsize= "20SP"/>100 101 </relativelayout>1 </linearlayout>103 </LinearLayout>

Note that a single line of code is required to introduce a custom property in the layout file: xmlns:custom= "Http://schemas.android.com/apk/res-auto".

Well, the demand is fixed, the rest is to move to the actual project. The implementation results are as follows:

Summing up, the custom view is generally by rewriting OnDraw, Onmeasure (), OnLayout () and other methods to do the measurement, drawing, drawing will generally use the canvas, paint, bitmap and other classes, The process of surveying and drawing is actually the abstraction and realization of the drawing work in the real life, we use the object-oriented thought to describe the tools of the artboard, the drawing paper, the paintbrush and the painting with a line of code.

Because the implementation process is relatively simple, I do not paste the source code, if you are not very familiar with the 2D drawing, you can go to search the relevant information or consult related books!

Android to create ImageView with transparent arcs