Home 2 -- Dynamic custom circular progress bar, home 2 -- circular progress bar

Home 2 -- Dynamic custom circular progress bar, home 2 -- circular progress bar

A. draw rings, arcs, and text

// 1. draw the ring // origin coordinate float circleX = width/2; float circleY = width/2; // radius float radius = width/2-roundWidth/2; // set the paint attribute. setColor (roundColor); paint. setStrokeWidth (roundWidth); paint. setStyle (Paint. style. STROKE); canvas. drawCircle (circleX, circleY, radius, paint); // 2. draw an arc RectF oval = new RectF (roundWidth/2, roundWidth/2, width-roundWidth/2, width-roundWidth/2); paint. setColor (roundProgressColor); canvas. drawArc (oval, 0, progress * 360/max, false, paint); // 3. paint text. setTextSize (textSize); paint. setColor (textColor); paint. setStrokeWidth (0); String text = progress * 100/max + "%"; Rect bounds = new Rect (); paint. getTextBounds (text, 0, text. length (), bounds); canvas. drawText (text, width/2-bounds. width ()/2, width/2 + bounds. height ()/2, paint );

　
B. Specific steps for Custom Attributes

Procedure:
1. Define attributes: Create attrs. xml under the values directory

<declare-styleable name="RoundProgress"> <attr name="roundColor" format="color"></attr> <attr name="roundProgressColor" format="color"></attr> <attr name="textColor" format="color"></attr> <attr name="roundWidth" format="dimension"></attr> <attr name="textSize" format="dimension"></attr></declare-styleable>

2. Reference The namespace of the current application in the layout File

xmlns:atguigu="http://schemas.android.com/apk/res-auto"

3. Use custom attributes in custom view labels

<com.atguigu.p2p.util.RoundProgress    android:id="@+id/rp_home_progress"    android:layout_width="120dp"    android:layout_height="120dp"    android:layout_gravity="center_horizontal"    android:layout_marginTop="20dp"    atguigu:roundColor="@android:color/darker_gray                  
    atguigu:roundProgressColor="@android:color/holo_red_dark"    atguigu:textColor="@color/text_progress"    atguigu:roundWidth="10dp"    atguigu:textSize="20sp"    />    

4. In the constructor of the custom View class, retrieve the custom attribute values in the layout.

// 1. get the array TypedArray typedArray = context for all custom attributes. obtainStyledAttributes (attrs, R. styleable. roundProgress); // 2. obtains the value of a custom attribute. If no value is specified, the default value roundColor = typedArray is used. getColor (R. styleable. roundProgress_roundColor, Color. RED); roundProgressColor = typedArray. getColor (R. styleable. roundProgress_roundProgressColor, Color. GREEN); textColor = typedArray. getColor (R. styleable. roundProgress_textColor, Color. GREEN); roundWidth = typedArray. getDimension (R. styleable. roundProgress_roundWidth, UIUtils. dp2px (10); textSize = typedArray. getDimension (R. styleable. roundProgress_textSize, UIUtils. dp2px (20); // 3. release resource data typedArray. recycle ();

C. Make the ring progress "dynamic"

1. Customize the getter and setter methods of the Progress attribute provided in the RoundProgress class
2. In onSuccess () of HomeFragment:

 

Github: https://github.com/ganchuanpu/P2PInvest