怎么在Android中通过自定义view实现圆环效果
怎么在Android中通过自定义view实现圆环效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联公司专注于网站建设|企业网站维护|优化|托管以及网络推广,积累了大量的网站设计与制作经验,为许多企业提供了网站定制设计服务,案例作品覆盖成都自上料搅拌车等行业。能根据企业所处的行业与销售的产品,结合品牌形象的塑造,量身策划品质网站。
(1)创建类,继承view,重写onDraw和onMesure方法
public class CirclePercentBar extends View{ private Context mContext; private int mArcColor; private int mArcWidth; private int mCenterTextColor; private int mCenterTextSize; private int mCircleRadius; private Paint arcPaint; private Paint arcCirclePaint; private Paint centerTextPaint; private RectF arcRectF; private Rect textBoundRect; private float mCurData=0; private int arcStartColor; private int arcEndColor; private Paint startCirclePaint; public CirclePercentBar(Context context) { this(context, null); } public CirclePercentBar(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CirclePercentBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); mContext=context; TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.CirclePercentBar,defStyleAttr,0); mArcColor = typedArray.getColor(R.styleable.CirclePercentBar_arcColor,0xff0000); mArcWidth = typedArray.getDimensionPixelSize(R.styleable.CirclePercentBar_arcWidth, DisplayUtil.dp2px(context, 20)); mCenterTextColor = typedArray.getColor(R.styleable.CirclePercentBar_centerTextColor, 0x0000ff); mCenterTextSize = typedArray.getDimensionPixelSize(R.styleable.CirclePercentBar_centerTextSize, DisplayUtil.dp2px(context, 20)); mCircleRadius = typedArray.getDimensionPixelSize(R.styleable.CirclePercentBar_circleRadius, DisplayUtil.dp2px(context, 100)); arcStartColor = typedArray.getColor(R.styleable.CirclePercentBar_arcStartColor, ContextCompat.getColor(mContext, R.color.green)); arcEndColor = typedArray.getColor(R.styleable.CirclePercentBar_arcEndColor, ContextCompat.getColor(mContext, R.color.yellow)); typedArray.recycle(); initPaint(); } private void initPaint() { startCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG); startCirclePaint.setStyle(Paint.Style.FILL); //startCirclePaint.setStrokeWidth(mArcWidth); startCirclePaint.setColor(arcStartColor); arcCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG); arcCirclePaint.setStyle(Paint.Style.STROKE); arcCirclePaint.setStrokeWidth(mArcWidth); arcCirclePaint.setColor(ContextCompat.getColor(mContext,R.color.colorAccent)); arcCirclePaint.setStrokeCap(Paint.Cap.ROUND); arcPaint = new Paint(Paint.ANTI_ALIAS_FLAG); arcPaint.setStyle(Paint.Style.STROKE); arcPaint.setStrokeWidth(mArcWidth); arcPaint.setColor(mArcColor); arcPaint.setStrokeCap(Paint.Cap.ROUND); centerTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG); centerTextPaint.setStyle(Paint.Style.STROKE); centerTextPaint.setColor(mCenterTextColor); centerTextPaint.setTextSize(mCenterTextSize); //圓弧的外接矩形 arcRectF = new RectF(); //文字的边界矩形 textBoundRect = new Rect(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); setMeasuredDimension(measureDimension(widthMeasureSpec),measureDimension(heightMeasureSpec)); } private int measureDimension(int measureSpec) { int result; int specMode=MeasureSpec.getMode(measureSpec); int specSize=MeasureSpec.getSize(measureSpec); if(specMode==MeasureSpec.EXACTLY){ result=specSize; }else{ result=mCircleRadius*2; if(specMode==MeasureSpec.AT_MOST){ result=Math.min(result,specSize); } } return result; } @Override protected void onDraw(Canvas canvas) { canvas.rotate(-90, getWidth()/ 2, getHeight()/ 2); arcRectF.set(getWidth()/2-mCircleRadius+mArcWidth/2,getHeight()/2-mCircleRadius+mArcWidth/2 ,getWidth()/2+mCircleRadius-mArcWidth/2,getHeight()/2+mCircleRadius-mArcWidth/2); canvas.drawArc(arcRectF, 0,360,false,arcCirclePaint); arcPaint.setShader(new SweepGradient(getWidth()/2,getHeight()/2,arcStartColor,arcEndColor)); canvas.drawArc(arcRectF, 0,360* mCurData /100,false,arcPaint); canvas.rotate(90, getWidth()/ 2, getHeight()/ 2); canvas.drawCircle(getWidth()/2,getHeight()/2-mCircleRadius+mArcWidth/2,mArcWidth/2,startCirclePaint); String data= String.valueOf(mCurData) +"%"; centerTextPaint.getTextBounds(data,0,data.length(),textBoundRect); canvas.drawText(data,getWidth()/2-textBoundRect.width()/2,getHeight()/2+textBoundRect.height()/2,centerTextPaint); } public void setPercentData(float data, TimeInterpolator interpolator){ ValueAnimator valueAnimator=ValueAnimator.ofFloat(mCurData,data); valueAnimator.setDuration((long) (Math.abs(mCurData-data)*30)); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { float value= (float) valueAnimator.getAnimatedValue(); mCurData=(float)(Math.round(value*10))/10; invalidate(); } }); valueAnimator.setInterpolator(interpolator); valueAnimator.start(); } }
(2)其中需要用到的类
public class DisplayUtil { public static int px2dp(Context context,float pxValue){ final float scale=context.getResources().getDisplayMetrics().density; return (int)(pxValue/scale+0.5f); } public static int dp2px(Context context,float dpValue){ final float scale=context.getResources().getDisplayMetrics().density; return (int)(dpValue*scale+0.5f); } }
(3)attrs.xml
(4)在activity_main里面写布局
(6)编程实现效果:
public class MainActivity extends AppCompatActivity { CirclePercentBar circlePercentBar; Button startBtn; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); circlePercentBar= (CirclePercentBar) findViewById(R.id.circle_bar); circlePercentBar.setPercentData(55.2f,new DecelerateInterpolator()); startBtn= (Button) findViewById(R.id.start_btn); startBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { circlePercentBar.setPercentData((float) (100*Math.random()),new DecelerateInterpolator()); } }); } }
Android是什么
Android是一种基于Linux内核的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由美国Google公司和开放手机联盟领导及开发。
关于怎么在Android中通过自定义view实现圆环效果问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。
文章题目:怎么在Android中通过自定义view实现圆环效果
URL标题:http://pwwzsj.com/article/ihsidi.html