Custom View——How to design and implement a circularity progress bar

Requirements analysis and implementation planning

Introduction

Recently i have use douban fm app and i like the circularity progress bar in this app, so i think to write a same one.
There is the progressbar in douban fm:

functional analysis

Although the function is simple, but still needs careful analysis

1.There is a circul outside of the icon, You can set the width
2.Circular progress bar and background at the bottom,you can set the width, color, and so on
3.The inside has a rounded picture, can rotate

Analysis for implementation

1.The circle that you can set the width

This is easy,You can use canvas to draw directly in the ondraw Method,of course,we need careful on radiu and padding,the control itself is actually a rectangle,we need to select a shorter as the diameter,Also have to deal with internal padding

2.Circular progress bar and progress bar at the bottom, you can set the width, color, and so on

This can be achieved with canvas drawarc Method,showing the progressbar by draw different length of arch,but it is important to note,We need to calculate the radius of the arc, and start and end points.

3.The inside has a rounded picture, can be rotated

This demand can be divided into three parts, there are pictures, round, you can rotate

First a picture,Simple,canvas and drawbitmap can draw it(canvas is so strong)

Round,still use canvas to control bitmap to draw it, you can see the detail in code

finally can rotate,we can use canvas rotate method to implement it.

show

Here is a show of the final look
That is my own project here

code

below is the code and some comment

Our main work It was in a custom view’s onDraw method,so,We need to have a child class that inherits the view class,MyProgress, we’ll call him

we show the MyProgress’s onDraw method

1.a circule can set width

This is easy,You can use canvas to draw directly in the ondraw Method,of course,we need careful on radiu and padding

2.Circular progress bar and progress bar at the bottom, you can set the width, color, and so on

We need change the start and end point of the arch

3.The inside has a rounded picture, can be rotated

so that’s our ondraw method

full code

MyProgress.java

You can find the project on GitHubhere

summary

There are some problem worth to think

1.on clipping pictrue,need to note the canvas’s coodinate Is relative to the picture,Instead of the global coordinates
2.when draw,need reduce draw a pic multiple time,Such as cropping rounded picture ,one time is enough.
3.For the few key points coordinates of the Custom View,should use a clarity way to present.
4.You can if you start to do

u3coding
A software developer

Leave a Comment

Your email address will not be published. Required fields are marked *

*