androd自定义view实现圆显示进度和百分比的控件
2017-07-28 10:26
465 查看
下面是使用自定义view实现圆形的显示百分比的控件,控件显示如图所示
下面是自定义view的代码
控件中使用
class文件中使用,首先寻找控件,然后设置进度值和文字
这里面true代表可是设置文字,设置文字代码如下(即30%改成字)
这样设置,圆形进度仍为100%,内容显示100%还是完成根据个人需求
代码中使用到的颜色需要个人在colors文件中添加
下面是自定义view的代码
package com.android.sf.view; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; import android.text.TextUtils; import android.util.AttributeSet; import android.view.View; import com.android.sf.R; /** * 圆形百分比布局 */ public class CircleProgressView extends View { private static final String TAG = "CircleProgressBar"; private int mMaxProgress = 100; private int mProgress = 30; private boolean isFinish = false; private final int mCircleLineStrokeWidth = 8; private final int mTxtStrokeWidth = 2; // 画圆所在的距形区域 private final RectF mRectF; private final RectF mRectF2; private final Paint mPaint; private final Context mContext; private String mTxtHint1; private String mTxtHint2; private String text; private String text2; public CircleProgressView(Context context, AttributeSet attrs) { super(context, attrs); mContext = context; mRectF = new RectF(); mRectF2 = new RectF(); mPaint = new Paint(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int width = this.getWidth(); int height = this.getHeight(); if (width != height) { int min = Math.min(width, height); width = min; height = min; } // 设置画笔相关属性 mPaint.setAntiAlias(true); mPaint.setColor(mContext.getResources().getColor(R.color.paytextcolor7)); canvas.drawColor(Color.TRANSPARENT); mPaint.setStyle(Paint.Style.STROKE); // 位置 mRectF.left = mCircleLineStrokeWidth / 2 + 10; // 左上角x mRectF.top = mCircleLineStrokeWidth / 2 + 10; // 左上角y mRectF.right = width - mCircleLineStrokeWidth / 2 - 10; // 左下角x mRectF.bottom = height - mCircleLineStrokeWidth / 2 - 10; // 右下角y mRectF2.left = mCircleLineStrokeWidth / 2 ; // 左上角x mRectF2.top = mCircleLineStrokeWidth / 2 ; // 左上角y mRectF2.right = width - mCircleLineStrokeWidth / 2 ; // 左下角x mRectF2.bottom = height - mCircleLineStrokeWidth / 2 ; // 右下角y // 绘制圆圈,进度条背景 canvas.drawArc(mRectF2, -90, 360, false, mPaint); mPaint.setStrokeWidth(mCircleLineStrokeWidth); // mPaint.setColor(mContext.getResources().getColor(R.color.circlebg)); // canvas.drawArc(mRectF, -90, 360, false, mPaint); mPaint.setColor(mContext.getResources().getColor(R.color.appthemecolor)); canvas.drawArc(mRectF, -90, ((float) mProgress / mMaxProgress) * 360, false, mPaint); // 绘制进度文案显示 mPaint.setStrokeWidth(mTxtStrokeWidth/2); if (isFinish){ text = ""; }else { text = mProgress+""; } int textHeight = height / 3; mPaint.setTextSize(textHeight); int textWidth = (int) mPaint.measureText(text, 0, text.length()); mPaint.setStyle(Paint.Style.FILL); mPaint.setColor(mContext.getResources().getColor(R.color.textColorDark1)); canvas.drawText(text, width / 2 - textWidth / 2, height / 2 + textHeight / 2, mPaint); //绘制% mPaint.setStrokeWidth(mTxtStrokeWidth); if (isFinish){ text2 = ""; }else { text2 = "%"; } int text2Height = height / 8; mPaint.setTextSize(text2Height); mPaint.setStyle(Paint.Style.FILL); mPaint.setStrokeWidth(mTxtStrokeWidth); mPaint.setColor(mContext.getResources().getColor(R.color.paytextcolor1)); canvas.drawText(text2, width / 2 + textWidth / 2, height / 2 + textHeight / 2 , mPaint); if (!TextUtils.isEmpty(mTxtHint1)) { mPaint.setStrokeWidth(mTxtStrokeWidth); text = mTxtHint1; textHeight = height / 12; mPaint.setTextSize(textHeight); mPaint.setColor(mContext.getResources().getColor(R.color.paytextcolor3)); textWidth = (int) mPaint.measureText(text, 0, text.length()); mPaint.setStyle(Paint.Style.FILL); canvas.drawText(text, width / 2 - textWidth / 2, height / 4 + textHeight / 2, mPaint); } if (!TextUtils.isEmpty(mTxtHint2)) { mPaint.setStrokeWidth(mTxtStrokeWidth); text = mTxtHint2; textHeight = height / 4; mPaint.setTextSize(textHeight); textWidth = (int) mPaint.measureText(text, 0, text.length()); mPaint.setStyle(Paint.Style.FILL); mPaint.setColor(mContext.getResources().getColor(R.color.textColorDark1)); canvas.drawText(text, width / 2 - textWidth / 2, height / 2 + textHeight / 2, mPaint); } } public int getMaxProgress() { return mMaxProgress; } public void setMaxProgress(int maxProgress) { this.mMaxProgress = maxProgress; } public void setProgress(int progress) { this.mProgress = progress; this.invalidate(); } public void setProgress(int progress,boolean isFinish) { this.isFinish = isFinish; this.mProgress = progress; this.invalidate(); } public void setProgressNotInUiThread(int progress) { this.mProgress = progress; this.postInvalidate(); } public String getmTxtHint1() { return mTxtHint1; } public void setmTxtHint1(String mTxtHint1) { this.mTxtHint1 = mTxtHint1; } public String getmTxtHint2() { return mTxtHint2; } public void setmTxtHint2(String mTxtHint2) { this.mTxtHint2 = mTxtHint2; } }
控件中使用
<com.android.sf.view.CircleProgressView android:id="@+id/circleProgressbar" android:layout_width="250dp" android:layout_height="250dp"android:layout_centerInParent="true" />
class文件中使用,首先寻找控件,然后设置进度值和文字
circleProgressView.setProgress(100,true);
这里面true代表可是设置文字,设置文字代码如下(即30%改成字)
circleProgressView.setmTxtHint2("完成");
这样设置,圆形进度仍为100%,内容显示100%还是完成根据个人需求
代码中使用到的颜色需要个人在colors文件中添加
相关文章推荐
- .Net 中的webBrowser控件加载网页时实现进度显示
- 94.大于屏幕宽度的TableView上下拉刷新实现 大于屏幕宽度MJRefresh怎么实现刷新控件显示居中
- Android自定义ImageView实现圆形控件显示
- android自定义View实现图片上传进度显示(仿手机QQ上传效果)
- android 自定义View 实现饼图 统计图形 百分比饼图显示内容 扇形图统计
- android假设重写onDraw实现一个相似TextView能够显示表情和链接的控件(一)
- 实现TextView可最多两行显示、右边控件紧跟TextView效果自定义布局
- 【Android】自定义控件实现带百分比显示进度条,可自定义颜色
- 自定义View实现 android圆形统计图及百分比显示
- 获取WebView开始加载事件,并实现进度框的显示与隐藏
- android自定义View实现图片上传进度显示(仿手机QQ上传效果)
- Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)
- 关于asp.net2.0里的Multiview和View控件的显示与隐藏实现的问题
- 自定义View强势来袭,用自定义View实现歌词显示控件上篇之实现歌词文件解析
- 让文字实现在控件上的逐字显示(TextView为例)
- 安卓自定义View实现图片上传进度显示(仿QQ)
- android假设重写onDraw实现一个相似TextView能够显示表情和链接的控件(二)
- 基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
- 自定义View实现图片上传进度显示
- 半圆遮挡图片 实现百分比显示上传进度