Android自定义view实现半圆环效果
本文实例为大家分享了Android自定义view实现半圆环的具体代码，供大家参考，具体内容如下
1.自定义属性
<declare-styleable name="SemicircleView"> <attr name="radius" format="dimension" /> <attr name="strokeWidth" format="dimension" /> <attr name="bgArcColor" format="color" /> <attr name="usedArcColor" format="color" /> <attr name="usedTextSize" format="dimension" /> <attr name="usedPercentTextSize" format="dimension" /> <attr name="percentTextSize" format="dimension" /> </declare-styleable>
2.自定义View
package com.anhuitelecom.share.activity.view;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.View;
import com.anhuitelecom.share.activity.R;
/**
*
* @ClassName: SemicircleView
* @Description: 自定义view 实现半圆弧
* @author chenzheng
* @date 2017-2-21 下午2:44:16
*/
public class SemicircleView extends View{
//线圆弧画笔
private Paint mLineArcPaint;
//背景圆弧画笔
private Paint mBackgroudArcPaint;
//已使用圆弧画笔
private Paint mUsedArcPaint;
//已使用以及流量文字画笔
private Paint mUsedTxtPaint;
//已使用百分比文字画笔
private Paint mUsedPercentTxtPaint;
//百分号画笔
private Paint mPercentTxtPaint;
//最外层圆弧线颜色
private int mLineArcColor;
//背景圆环颜色
private int mBackgroundArcColor;
//已使用圆弧颜色
private int mUsedArcColor;
//圆弧半径
private float mArcRadius;
//外线大半径
private float mLineRadius;
//圆弧宽度
private float mArcStrokeWidth;
// 圆心x坐标
private int mXCenter;
// 圆心y坐标
private int mYCenter;
//已使用百分比
private float mProgress=0;
//动画展示弧度
private float mShowProgress;
private Context mContext;
//已使用和总流量
private String mUserdAndAll;
private float mUsedTextSize;
private float mUsedPercentTextSize;
private float mPercentTextSize;
private float mUsedPercentTxtHeight;
//private CircleThread
private Handler circleHandler = new Handler(){
public void handleMessage(Message msg) {
super.handleMessage(msg);
if(msg.what == 1){
float temp = (Float)msg.obj;
setShowProgress(temp);
}
};
};
public SemicircleView(Context context) {
this(context, null);
}
public SemicircleView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SemicircleView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
mContext = context;
// 获取自定义的属性
initAttrs(context, attrs);
initVariable();
}
private void initAttrs(Context context, AttributeSet attrs) {
TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.SemicircleView, 0, 0);
mLineRadius = typeArray.getDimension(R.styleable.SemicircleView_radius, 120);
mArcStrokeWidth = typeArray.getDimension(R.styleable.SemicircleView_strokeWidth, 12);
mBackgroundArcColor = typeArray.getColor(R.styleable.SemicircleView_bgArcColor, 0xFFFFFFFF);
mUsedArcColor = typeArray.getColor(R.styleable.SemicircleView_usedArcColor, 0xFFFF3D3B);
mUsedTextSize = typeArray.getDimension(R.styleable.SemicircleView_usedTextSize, 14);
mUsedPercentTextSize = typeArray.getDimension(R.styleable.SemicircleView_usedPercentTextSize, 52);
mPercentTextSize = typeArray.getDimension(R.styleable.SemicircleView_percentTextSize, 16);
typeArray.recycle();
}
private void initVariable() {
//初始化一些值
mLineRadius = mLineRadius + mArcStrokeWidth / 2;
mArcRadius = mLineRadius-1.8f*mArcStrokeWidth;
mLineArcColor = 0x33FFFFFF;
mUserdAndAll = "0M/0M";
//外层线圆弧画笔设置
mLineArcPaint = new Paint();
mLineArcPaint.setAntiAlias(true);
mLineArcPaint.setColor(mLineArcColor);
mLineArcPaint.setStyle(Paint.Style.STROKE);
mLineArcPaint.setStrokeWidth(1);
mLineArcPaint.setStrokeCap(Paint.Cap.ROUND);//开启显示边缘为圆形
//背景圆弧画笔设置
mBackgroudArcPaint = new Paint();
mBackgroudArcPaint.setAntiAlias(true);
mBackgroudArcPaint.setColor(mBackgroundArcColor);
mBackgroudArcPaint.setStyle(Paint.Style.STROKE);
mBackgroudArcPaint.setStrokeWidth(mArcStrokeWidth);
mBackgroudArcPaint.setStrokeCap(Paint.Cap.ROUND);//开启显示边缘为圆形
//已使用多少圆环画笔设置
mUsedArcPaint = new Paint();
mUsedArcPaint.setAntiAlias(true);
mUsedArcPaint.setColor(mUsedArcColor);
mUsedArcPaint.setStyle(Paint.Style.STROKE);
mUsedArcPaint.setStrokeWidth(mArcStrokeWidth);
mUsedArcPaint.setStrokeCap(Paint.Cap.ROUND);//开启显示边缘为圆形
mUsedTxtPaint = new Paint();
mUsedTxtPaint.setAntiAlias(true);
mUsedTxtPaint.setStyle(Paint.Style.FILL);
mUsedTxtPaint.setColor(0x80FFFFFF);
mUsedTxtPaint.setTextSize(mUsedTextSize);
//百分比数字画笔
mUsedPercentTxtPaint = new Paint();
mUsedPercentTxtPaint.setAntiAlias(true);
mUsedPercentTxtPaint.setStyle(Paint.Style.FILL);
mUsedPercentTxtPaint.setColor(0xFFFFFFFF);
mUsedPercentTxtPaint.setTextSize(mUsedPercentTextSize);
//百分号画笔
mPercentTxtPaint = new Paint();
mPercentTxtPaint.setAntiAlias(true);
mPercentTxtPaint.setStyle(Paint.Style.FILL);
mPercentTxtPaint.setColor(0xFFFFFFFF);
mPercentTxtPaint.setTextSize(mPercentTextSize);
//获取字体高度
FontMetrics fm = mUsedPercentTxtPaint.getFontMetrics();
mUsedPercentTxtHeight = (int) Math.ceil(fm.descent - fm.ascent);
}
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
mXCenter = getWidth() / 2;
mYCenter = getHeight() / 2;
RectF lineOval = new RectF();
lineOval.left = (mXCenter - mLineRadius);
lineOval.top = (mYCenter - mLineRadius);
lineOval.right = mLineRadius * 2 + (mXCenter - mLineRadius);
lineOval.bottom = mLineRadius * 2 + (mYCenter - mLineRadius);
RectF oval = new RectF();
oval.left = (mXCenter - mArcRadius);
oval.top = (mYCenter - mArcRadius);
oval.right = mArcRadius * 2 + (mXCenter - mArcRadius);
oval.bottom = mArcRadius * 2 + (mYCenter - mArcRadius);
//绘制最外面圆弧线
canvas.drawArc(lineOval, -225, 270, false, mLineArcPaint);
//绘制背景圆弧
canvas.drawArc(oval, -225, 270, false, mBackgroudArcPaint);
//绘制已使用圆弧
float mShowDegree = mShowProgress/100*270;
canvas.drawArc(oval, -225, mShowDegree, false, mUsedArcPaint);
//已使用文字
Rect usedRect = new Rect();
String usedStr = "已使用";
mUsedTxtPaint.getTextBounds(usedStr, 0, usedStr.length(), usedRect);
int usedX = mXCenter - usedRect.width() / 2;
canvas.drawText(usedStr, usedX, mYCenter-mArcRadius*0.6f, mUsedTxtPaint);
//已使用和总流量
Rect ua_rect = new Rect();
mUsedTxtPaint.getTextBounds(mUserdAndAll, 0, mUserdAndAll.length(), ua_rect);
int uaX = mXCenter - ua_rect.width() / 2;
canvas.drawText(mUserdAndAll, uaX, mYCenter+mArcRadius*0.6f, mUsedTxtPaint);
//百分比数字
String progressStr = (int)mShowProgress+"";
String percentStr = "%";
float usedPercentWidth = mUsedPercentTxtPaint.measureText(progressStr, 0, progressStr.length());
float percentWidth = mPercentTxtPaint.measureText(percentStr, 0, percentStr.length());
float upX = mXCenter-(usedPercentWidth + percentWidth)/2;
canvas.drawText(progressStr, upX, mYCenter+mUsedPercentTxtHeight/3, mUsedPercentTxtPaint);
float pX = upX + usedPercentWidth;
canvas.drawText(percentStr, pX, mYCenter+mUsedPercentTxtHeight/3, mPercentTxtPaint);
}
private void setShowProgress(float progress){
this.mShowProgress = progress;
postInvalidate();
}
public void setProgress(float progress) {
mProgress = progress;
new Thread(new CircleThread()).start();
}
public void setUsedArcColor(int usedArcColor) {
this.mUsedArcColor = usedArcColor;
if(mUsedArcPaint!=null){
mUsedArcPaint.setColor(mUsedArcColor);
}
}
public void setUsedAndAll(String usedAndAll) {
this.mUserdAndAll = usedAndAll;
}
public static int dp2px(Context context, float dipValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dipValue * scale + 0.5f);
}
public static int sp2px(Context context, float spValue) {
final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
return (int) (spValue * fontScale + 0.5f);
}
public static int px2sp(Context context, float pxValue) {
final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
return (int) (pxValue / fontScale + 0.5f);
}
private class CircleThread implements Runnable{
int m=0;
float i=0;
@Override
public void run() {
// TODO Auto-generated method stub
while(!Thread.currentThread().isInterrupted()){
try {
Thread.sleep(30);
m++;
Message msg = new Message();
msg.what = 1;
if(i < mProgress){
i += m;
msg.obj = i;
circleHandler.sendMessage(msg);
}else{
i = mProgress;
msg.obj = i;
circleHandler.sendMessage(msg);
return;
}
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
}
3.外部调用
<com.view.SemicircleView android:id="@+id/semicircleView" android:layout_width="215dp" android:layout_height="215dp" android:layout_gravity="center_horizontal" android:layout_marginTop="30dp" halfArc:bgArcColor="#ffffff" halfArc:percentTextSize="16sp" halfArc:radius="100dp" halfArc:strokeWidth="11dp" halfArc:usedArcColor="#FF3D3B" halfArc:usedPercentTextSize="52sp" halfArc:usedTextSize="14sp" />
semicircleView.setUsedAndAll("170M/200M");
semicircleView.setProgress(81);
4.实现效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Android实现长按圆环动画View效果的思路代码
一.需求来源 最近想到一个需求,类似悦跑圈或者Keep的结束按钮动画 二.思路代码 该动画按钮的主要作用就是防止用户误操作,具体实现思路如下: 1.监听用户的触摸事件OnTouchListener,在ACTION_DOWN的时候,记录下xy坐标和触摸时间,同时start自定义View动画:在ACTION_MOVE的过程中,判断坐标差值的偏移量是否在一个可接受的范围内,是的话就保留当前动画,不是的话就清除按钮上绘制的path:在ACTION_UP的时候,再次记录下触摸时间,比较两个时间是否达到了长
-
Android自定义View实现圆环交替效果
下面请先看效果图: 看上去是不很炫的样子,它的实现上也不是很复杂,重点在与onDraw()方法的绘制. 首先是我们的attrs文件: <?xml version="1.0" encoding="utf-8"?> <resources> <attr name="firstColor" format="color"/> <attr name="secondColor"
-
Android中自定义View实现圆环等待及相关的音量调节效果
圆环交替.等待效果 效果就这样,分析了一下,大概有这几个属性,两个颜色,一个速度,一个圆环的宽度. 自定View的几个步骤: 1.自定义View的属性 2.在View的构造方法中获得我们自定义的属性 3.重写onMesure 4.重写onDraw 1.自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <attr name="firstColor" f
-
Android自定义View之酷炫数字圆环
先看下最终的效果 一.开始实现 新建一个DoughnutView继承View public class DoughnutView extends View { } 先重写onMeasure方法. /** * 当布局为wrap_content时设置默认长宽 * * @param widthMeasureSpec * @param heightMeasureSpec */ @Override protected void onMeasure(int widthMeasureSpec, int hei
-
Android自定义view实现圆环效果实例代码
先上效果图,如果大家感觉不错,请参考实现代码. 重要的是如何实现自定义的view效果 (1)创建类,继承view,重写onDraw和onMesure方法 public class CirclePercentBar extends View{ private Context mContext; private int mArcColor; private int mArcWidth; private int mCenterTextColor; private int mCent
-
Android自定义View实现圆环带数字百分比进度条
分享一个自己制作的Android自定义View.是一个圆环形状的反映真实进度的进度条,百分比的进度文字跟随已完成进度的圆弧转动.以下是效果图: 这个自定义View可以根据需要设定圆环的宽度和百分比文字的大小. 先说一下思路:这个View一共分为三部分:第一部分也就是灰色的圆环部分,代表未完成的进度:第二部分是蓝色的圆弧部分,代表已经完成的进度:第三部分是红色的百分比的数字百分比文本,显示当前确切的完成进度. 下面是View的编写思路: ①:定义三个画笔,分别画灰色圆环,蓝色圆弧,红色文字: ②:
-
Android自定义view绘制圆环占比动画
一.实现效果图 二.核心代码 1.自定义MyProgressView.java package com.czhappy.effectdemo.view; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas;
-
Android开发笔记之:在ImageView上绘制圆环的实现方法
绘制圆环其实很简单,有大概以下三种思路. 这里先说网上提到的一种方法.思路是先绘制内圆,然后绘制圆环(圆环的宽度就是paint设置的paint.setStrokeWidth的宽度),最后绘制外圆.请看核心源码: 复制代码 代码如下: <SPAN xmlns="http://www.w3.org/1999/xhtml">package yan.guoqi.rectphoto;import android.content.Context;import android.graph
-
Android自定义View实现圆环进度条
本文实例为大家分享了Android自定义View实现圆环进度条的具体代码,供大家参考,具体内容如下 效果展示 动画效果 View实现 1.底层圆环是灰色背景 2.上层圆环是红色背景 3.使用动画画一条弧线 View /** * 圆环进度条 */ public class RoundProgressBar extends View { //绘制矩形区域 private RectF rectF; //起始角度 private float startAngle; //扫过角度 private floa
-
android自定义View实现圆环颜色选择器
最近工作需要,自定了一个颜色选择器,效果图如下: 颜色种类是固定的,圆环上有个指示器,指示选中的颜色,这个定义起来应该是很简单了,直接上代码. public class MyColorPicker extends View { private int mThumbHeight; private int mThumbWidth; private String[] colors ; private int sections; //每个小块的度数 private int sectionAngle; p