Customize the volume control of the View

Recently has been learning Custom view, I am hongyang a small powder, Hongyang eldest brother is also a model of my generation Ah, but, oneself too dish, can only step by step to climb, the following this is to learn Hongyang boss of one of the articles, coupled with their own understanding, practice: First Look:

The first is the custom properties:

<resources>    <declare-styleable name="Audiocontrolview">        <!--The color of the small block above--        <attr name="Upcirclecolor" format="Color"></attr>        <!--The color of the small block below--        <attr name="Downcirclecolor" format="Color"></attr>        <!--The spacing of small pieces--        <attr name="splitsize" format="integer"></attr>        <!--The number of small pieces--        <attr name="Blockcount" format="integer"></attr>        <!--The width of the small block--        <attr name="circlewidth" format="Dimension"> </attr>        <!--in the middle of the picture--        <attr name="centerpic" format="Reference"></attr>    </declare-styleable></Resources>

Second, the property value in the layout file:

 <com.yinwei.definemyself.view.AudioControlView        android:layout_width="300dp"        android:layout_height="300dp"        app:blockCount="40"        app:centerPic="@drawable/test"        app:circleWidth="13dp"        app:downCircleColor="@android:color/holo_red_light"        app:splitSize="7"        app:upCircleColor="@android:color/darker_gray" />

The specific implementation code:

 Public  class audiocontrolview extends View {    Private intMupcirclecolor, Mdowncirclecolor, Mblockcount, Msplitsize, mcirclewidth;PrivateBitmap Mcenterimage;PrivatePaint paint;PrivateRECTF RECTF;Private intMwidth, Mheight, Mradius, Mcenter;Private intMcurrentcount =7; Public Audiocontrolview(context context, AttributeSet attrs) { This(Context, Attrs,0); } Public Audiocontrolview(Context context) { This(Context,NULL); } Public Audiocontrolview(context context, AttributeSet attrs,intDEFSTYLEATTR) {Super(Context, attrs, defstyleattr); TypedArray a = Context.obtainstyledattributes (Attrs, R.styleable.audiocontrolview, Defstyleattr,0);        Mupcirclecolor = A.getcolor (R.styleable.audiocontrolview_upcirclecolor, Color.White);        Mdowncirclecolor = A.getcolor (R.styleable.audiocontrolview_downcirclecolor, Color.Black); Mblockcount = A.getint (R.styleable.audiocontrolview_blockcount,Ten); Msplitsize = A.getint (R.styleable.audiocontrolview_splitsize,3); Mcirclewidth = A.getdimensionpixelsize (R.styleable.audiocontrolview_circlewidth, (int) Typedvalue.applydimension (TYPEDVALUE.COMPLEX_UNIT_PX, -, Getresources (). Getdisplaymetrics ()); Mcenterimage = Bitmapfactory.decoderesource (Getresources (), A.getresourceid (r.styleable.audiocontrolview_ Centerpic,0));        A.recycle (); Paint =NewPaint ();        Paint.setcolor (Mupcirclecolor); Paint.setantialias (true);        Paint.setstyle (Paint.Style.STROKE); Paint.setstrokewidth (7); RECTF =NewRECTF (); }@Override    protected void onmeasure(intWidthmeasurespec,intHEIGHTMEASURESPEC) {intHeightmode = Measurespec.getmode (Heightmeasurespec);intWidthmode = Measurespec.getmode (Widthmeasurespec);intMeasureheight = Measurespec.getsize (Heightmeasurespec);intMeasurewidth = Measurespec.getsize (Widthmeasurespec);if(Heightmode = = measurespec.exactly) {mheight = Measureheight;//If the exact width is high, the view is the width of the measurement, regardless of whether the picture is larger than the width we set}Else{mheight = Mcenterimage.getheight () + getpaddingbottom () + getpaddingtop () + mcirclewidth; }if(Widthmode = = measurespec.exactly)        {mwidth = Measurewidth; }Else{mwidth = Mcenterimage.getwidth () + getpaddingright () + getpaddingleft () + mcirclewidth;    } setmeasureddimension (Mwidth, mheight); }@Override    protected void OnDraw(Canvas canvas) {mcenter = Math.min (mwidth, mheight)/2; Mradius = mcenter-mcirclewidth/2; Rectf.top = mheight/2-Mradius; Rectf.left = mwidth/2-Mradius; Rectf.right = mwidth/2+ Mradius; Rectf.bottom = mheight/2+ Mradius;floatBlockSize = ( the*1.0F-mblockcount * msplitsize)/mblockcount;//length of each arc        //Draw small arc block         for(inti =0; i < Mblockcount; i++) {Canvas.drawarc (RECTF, I * (BlockSize + msplitsize), BlockSize,false, paint);//false or true whether to connect the center of the circle, the general drawing fan is true} paint.setcolor (Mdowncirclecolor);//Canvas.drawarc (); four parameters: 1: Rectangle drawn within what range 2: The starting radian of the drawing 3: the degree of the drawn Radian Block 4: Brush         for(inti =0; i < Mcurrentcount; i++) {Canvas.drawarc (RECTF, I * (BlockSize + msplitsize), BlockSize,false, paint); }//Painting pictures        intInnerradius = mradius-mcirclewidth/2;//Remove the RADIUS size of the inscribed circle part of the drawingRect rect =NewRect ();intInnerrectheght = (int) Math.sqrt (2) * Innerradius *1/2;//inscribed circle rectangle in the side length        //Calculate the rectangle of the picture that needs to be drawn at the radius of the inscribed circleRect.left = mwidth/2-Innerrectheght; Rect.top = mheight/2-Innerrectheght; Rect.right = mwidth/2+ innerrectheght; Rect.bottom = mheight/2+ innerrectheght;//If the height and width of the picture is less than the height of the drawn rectangle, place the picture at the center point        if(Mcenterimage.getheight () < innerrectheght && Mcenterimage.getwidth () < Innerrectheght) {intRectwidth = Math.max (Mcenterimage.getheight (), Mcenterimage.getwidth ()); Rect.top = mheight/2-Rectwidth/2; Rect.left = mwidth/2-Rectwidth/2; Rect.right = mwidth/2+ Rectwidth/2; Rect.bottom = mheight/2+ Rectwidth/2; } canvas.drawbitmap (Mcenterimage,NULL, rect, paint); }}

Hey, the others do not say, the more detailed comments, in order to escape the poverty line and strive! ~

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Customize the volume control of the View