介紹
今天上班的時(shí)候有個(gè)哥們問我怎么去實(shí)現(xiàn)一個(gè)按鈕式的進(jìn)度條，先來看看他需要實(shí)現(xiàn)的效果圖。
和普通的圓形進(jìn)度條類似，只是中間的地方有兩個(gè)狀態(tài)表示，未開始，暫停狀態(tài)。而且他說圓形進(jìn)度的功能已經(jīng)實(shí)現(xiàn)了。那么我們只需要對(duì)中間的兩個(gè)狀態(tài)做處理就行了。
先來看看實(shí)現(xiàn)的效果圖:
上面說了我們只需要處理中間狀態(tài)的變化就可以了，對(duì)于進(jìn)度的處理直接使用了弘洋文章中實(shí)現(xiàn):
http://blog.csdn.net/lmj623565791/article/details/43371299
下面開始具體實(shí)現(xiàn)。
具體實(shí)現(xiàn)
自定義的實(shí)現(xiàn)還是按照官方提供的步驟來，對(duì)于自定義View的步驟之前我也寫過一篇文章，感興趣的朋友可以看一下:Android自定義View的官方套路。
為了完整講解，下面還是會(huì)提到圓形進(jìn)度條的自定義，知道進(jìn)度的實(shí)現(xiàn)可以直接跳過部分步驟。
1、創(chuàng)建View
觀察要實(shí)現(xiàn)的外圈進(jìn)度條，有兩個(gè)進(jìn)度:一個(gè)用來表示默認(rèn)的圓形，另一個(gè)表示進(jìn)度的顏色。所以這里涉及到兩個(gè)進(jìn)度條顏色寬高的定義。要繪制圓肯定需要半徑了。
創(chuàng)建view有三小步
(1)、定義屬性
<declare-styleable name="ButtonCircleProgressBar"><!--無進(jìn)度時(shí)的顏色--><attr name="progress_unreached_color" format="color" /><!--進(jìn)度顏色--><attr name="progress_reached_color" format="color" /><!--進(jìn)度條的高--><attr name="progress_reached_bar_height" format="dimension" /><!--無進(jìn)度時(shí)的邊框高--><attr name="progress_unreached_bar_height" format="dimension" /><!--圓的半徑--><attr name="radius" format="dimension" /></declare-styleable>
(1)、定義屬性變量以及構(gòu)造方法中獲取屬性
private static final int DEFAULT_TEXT_COLOR = 0XFFFC00D1;private static final int DEFAULT_COLOR_UNREACHED_COLOR = 0xFFd3d6da;private static final int DEFAULT_HEIGHT_REACHED_PROGRESS_BAR = 2;private static final int DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR = 2;/*** The status of this view currently;*/private Status mStatus = Status.End;/*** painter of all drawing things*/protected Paint mPaint = new Paint();/*** height of reached progress bar*/protected int mReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_REACHED_PROGRESS_BAR);/*** color of reached bar*/protected int mReachedBarColor = DEFAULT_TEXT_COLOR;/*** color of unreached bar*/protected int mUnReachedBarColor = DEFAULT_COLOR_UNREACHED_COLOR;/*** height of unreached progress bar*/protected int mUnReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR);/*** the length of triangle*/private int triangleLength;/*** use path to draw triangle*/private Path mPath;/*** mRadius of view*/private int mRadius = dp2px(30);public ButtonCircleProgressBar(Context context) {this(context,null);}public ButtonCircleProgressBar(Context context, AttributeSet attrs) {this(context, attrs,0);}public ButtonCircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);// init values from custom attributesfinal TypedArray attributes = getContext().obtainStyledAttributes(attrs, R.styleable.ButtonCircleProgressBar);mReachedBarColor = attributes.getColor(R.styleable.ButtonCircleProgressBar_progress_reached_color,Color.BLUE);mUnReachedBarColor = attributes.getColor(R.styleable.ButtonCircleProgressBar_progress_unreached_color,DEFAULT_COLOR_UNREACHED_COLOR);mReachedProgressBarHeight = (int) attributes.getDimension(R.styleable.ButtonCircleProgressBar_progress_reached_bar_height,mReachedProgressBarHeight);mUnReachedProgressBarHeight = (int) attributes.getDimension(R.styleable.ButtonCircleProgressBar_progress_unreached_bar_height,mUnReachedProgressBarHeight);mRadius = (int) attributes.getDimension(R.styleable.ButtonCircleProgressBar_radius, mRadius);triangleLength = mRadius;attributes.recycle();mPaint.setStyle(Paint.Style.STROKE);mPaint.setAntiAlias(true);mPaint.setDither(true);mPaint.setStrokeCap(Paint.Cap.ROUND);mPath = new Path();//need path to draw triangle}public Status getStatus() {return mStatus;}public void setStatus(Status status) {mStatus = status;invalidate();}public enum Status{End,Starting}獲取基礎(chǔ)的一些屬性，這里mStatus用來表示當(dāng)前View的狀態(tài):End代碼結(jié)束，Starting正在進(jìn)行。我們用這兩個(gè)狀態(tài)來判定怎么去draw去合適的效果。提供了setStatus為Staus設(shè)置狀態(tài)。
mPath用來進(jìn)行繪制未開始時(shí)候的三角形。
2、處理View的布局
這一步主要是onMeasure方法中測(cè)量出合適的寬高。
@Overrideprotected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int heightMode = MeasureSpec.getMode(heightMeasureSpec);int widthMode = MeasureSpec.getMode(widthMeasureSpec);int paintWidth = Math.max(mReachedProgressBarHeight,mUnReachedProgressBarHeight);if (heightMode != MeasureSpec.EXACTLY) {int exceptHeight = (int) (getPaddingTop() + getPaddingBottom()+ mRadius * 2 + paintWidth);heightMeasureSpec = MeasureSpec.makeMeasureSpec(exceptHeight,MeasureSpec.EXACTLY);}if (widthMode != MeasureSpec.EXACTLY) {int exceptWidth = (int) (getPaddingLeft() + getPaddingRight()+ mRadius * 2 + paintWidth);widthMeasureSpec = MeasureSpec.makeMeasureSpec(exceptWidth,MeasureSpec.EXACTLY);}super.onMeasure(widthMeasureSpec, heightMeasureSpec);}只需要處理寬高沒有精確指定的情況，通過padding加上整個(gè)圓以及Paint的寬度計(jì)算出具體的值。
接下來就是第三步，繪制效果。
3、繪制View
為了更加清晰一點(diǎn)，這里先說繪制圓的進(jìn)度，再說圓中間的狀態(tài)。
(1)、繪制圓
@Overrideprotected synchronized void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.save();canvas.translate(getPaddingLeft(), getPaddingTop());mPaint.setStyle(Paint.Style.STROKE);// draw unreaded barmPaint.setColor(mUnReachedBarColor);mPaint.setStrokeWidth(mUnReachedProgressBarHeight);canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);// draw reached barmPaint.setColor(mReachedBarColor);mPaint.setStrokeWidth(mReachedProgressBarHeight);float sweepAngle = getProgress() * 1.0f / getMax() * 360;canvas.drawArc(new RectF(0, 0, mRadius * 2, mRadius * 2), 0,sweepAngle, false, mPaint);通過 canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);繪制默認(rèn)狀態(tài)下的圓。之后改變畫筆的顏色，根據(jù)進(jìn)度繪制圓弧。
(2)、繪制中間的狀態(tài)。
第一種是未開始的情況，中間是一個(gè)三角形。我們使用Path來繪制三角形，主要通過 moveTo(float x, float y)來設(shè)置第一個(gè)點(diǎn)，然后通過lineTo(float x, float y)來連接一個(gè)三角形。再設(shè)置Paint為填充。
第一個(gè)點(diǎn)這里設(shè)置為三角形的左上角的頂點(diǎn)。
那么第一個(gè)點(diǎn)怎么算？
我們這里繪制一個(gè)等邊三角形，設(shè)置邊長(zhǎng)等于半徑。
第一個(gè)點(diǎn)的x坐標(biāo)就應(yīng)該是圓的直徑減去三角形的高之后除以2，即:
float leftX = (float) ((2*mRadius-Math.sqrt(3.0)/2*triangleLength)/2);
y坐標(biāo)就為:mRadius-(triangleLength/2)
第二個(gè)點(diǎn)這里選三角形的左下角，x坐標(biāo)不變,y值為半徑加上邊長(zhǎng)的一半:mRadius+(triangleLength/2)
第三個(gè)點(diǎn)選右邊的點(diǎn)，x點(diǎn)的坐標(biāo)顯然就是第一個(gè)點(diǎn)的x坐標(biāo)加上三角形的高
即:(float) (leftX+Math.sqrt(3.0)/2*triangleLength)，y點(diǎn)坐標(biāo)就是半徑mRadius。
最后再回到第一個(gè)點(diǎn)就連接成三角形了。
mPath設(shè)置的完整代碼如下
public class ButtonCircleProgressBar extends ProgressBar {.........mPath = new Path();//need path to draw triangletriangleLength = mRadius;float leftX = (float) ((2*mRadius-Math.sqrt(3.0)/2*triangleLength)/2);float realX = (float) (leftX+leftX*0.2);mPath.moveTo(realX,mRadius-(triangleLength/2));mPath.lineTo(realX,mRadius+(triangleLength/2));mPath.lineTo((float) (realX+Math.sqrt(3.0)/2*triangleLength),mRadius);mPath.lineTo(realX,mRadius-(triangleLength/2));}這里用了realX設(shè)置成了leftX的兩倍，是因?yàn)槲腋杏X三角形設(shè)置在中間的效果不太好，所以讓他在原有基礎(chǔ)上增加0.2倍的距離。
有了mPath變量之后就可以在onDraw中繪制未開始狀態(tài)的三角形了，看代碼
@Overrideprotected synchronized void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.save();canvas.translate(getPaddingLeft(), getPaddingTop());....if (mStatus==Status.End){//未開始狀態(tài)，畫筆填充mPaint.setStyle(Paint.Style.FILL);canvas.drawPath(mPath,mPaint);//直接drawPath}else{mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeWidth(dp2px(5));canvas.drawLine(mRadius*2/3,mRadius*2/3,mRadius*2/3,2*mRadius*2/3,mPaint);canvas.drawLine(2*mRadius-(mRadius*2/3),mRadius*2/3,2*mRadius-(mRadius*2/3),2*mRadius*2/3,mPaint);}canvas.restore();}進(jìn)行中的狀態(tài)就是畫兩條線，第一條線x直接設(shè)為半徑的2/3倍，起始y點(diǎn)為2/3倍，結(jié)束為開始y點(diǎn)的2/3倍
對(duì)與另外一條線，x點(diǎn)直徑減去mRadius*2/3，y點(diǎn)坐標(biāo)的變化和上一條線一樣。
這樣就完成了onDraw方法。
4、處理用戶交互
由于對(duì)于下載更新進(jìn)度的情況來說，該控件只做狀態(tài)顯示，所以這一步不需要了，要使用的話自己設(shè)置點(diǎn)擊事件就可以了。
使用
<?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"xmlns:app="http://schemas.android.com/apk/res-auto"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context="com.qiangyu.test.buttoncircleprogress.MainActivity"><com.qiangyu.test.buttoncircleprogress.view.ButtonCircleProgressBarandroid:id="@+id/progressBar"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="50dip"android:padding="5dp"android:progress="30" /></RelativeLayout>
Activity里設(shè)置點(diǎn)擊事件修改狀態(tài)，具體根據(jù)自己邏輯處理。
public class MainActivity extends AppCompatActivity {private ButtonCircleProgressBar mProgressBar;private static final int MSG_PROGRESS_UPDATE = 0x110;private int progress;private Handler mHandler = new Handler() {public void handleMessage(android.os.Message msg) {progress = mProgressBar.getProgress();mProgressBar.setProgress(++progress);if (progress >= 100) {mHandler.removeMessages(MSG_PROGRESS_UPDATE);progress = 0;mProgressBar.setStatus(ButtonCircleProgressBar.Status.End);mProgressBar.setProgress(0);}else{mHandler.sendEmptyMessageDelayed(MSG_PROGRESS_UPDATE, 100);}};};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mProgressBar = (ButtonCircleProgressBar) findViewById(R.id.progressBar);mProgressBar.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {if (mProgressBar.getStatus()== ButtonCircleProgressBar.Status.Starting){mProgressBar.setStatus(ButtonCircleProgressBar.Status.End);mHandler.removeMessages(MSG_PROGRESS_UPDATE);}else{mHandler.sendEmptyMessage(MSG_PROGRESS_UPDATE);mProgressBar.setStatus(ButtonCircleProgressBar.Status.Starting);}}});}}好了，到這里一個(gè)圓形進(jìn)度條式按鈕就實(shí)現(xiàn)了.希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
