解决自定义进度条在开发中常见的问题

frindy 发布于 2014/08/28 09:43
阅读 296
收藏 0

@罗升阳 你好,想跟你请教个问题:

怎样在这个弧形进度条中间加一个文本数字,当进度条改变时,数字跟着改变,谢谢

进度条

package com.example.progressbar;

import android.content.Context;
import android.graphics.BlurMaskFilter;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.RectF;
import android.graphics.BlurMaskFilter.Blur;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;




public class ArcProgressBar extends View {

private Paint bgPaint;
private Paint fgPaint;
private float startAngle = 180.0f;
private float sweepAngle = 180.0f;
private float bgThickness = 10;//北京弧形条的厚度,即bgPaint的粗度
private float fgThickness = 8;

private float angleUnit = 180.0f / 256.0f;
private RectF rect;

float left=20.0f;//Rect 左X坐标
float right=220.0f;//Rect 右X坐标
float top=20f;
float bottom=220f;



public Point centerPoint = null;//弧形的圆心点
public float radius = 0;//弧形的半径
public double degree;//当前的进度所对应的角度


public ArcProgressBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}


public ArcProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}


public ArcProgressBar(Context context) {
super(context);
init();
}


private void init() {
//背景Paint
bgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
bgPaint.setStyle(Style.STROKE);
bgPaint.setStrokeWidth(bgThickness);
bgPaint.setColor(Color.parseColor("#ff9d9e9d"));
BlurMaskFilter blurMaskFilter = new BlurMaskFilter(1, Blur.INNER);
bgPaint.setMaskFilter(blurMaskFilter);


//前景Paint
fgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
fgPaint.setStyle(Style.STROKE);
fgPaint.setStrokeWidth(fgThickness);
fgPaint.setColor(Color.parseColor("#ff00ff00"));
BlurMaskFilter blurMaskFilter2 = new BlurMaskFilter(1, Blur.OUTER);
fgPaint.setMaskFilter(blurMaskFilter2);

//在此矩形中画弧形进度条
rect = new RectF(left, top, right, bottom);

radius = (right - left) / 2;
centerPoint = new Point((int) (left + radius), (int) (top + radius));

}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width=MeasureSpec.getSize(widthMeasureSpec);
int height=MeasureSpec.getSize(heightMeasureSpec);
if(height>250){
height=250;
}
setMeasuredDimension(width, height);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
System.out.println("onSizeChanged");

}


@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);


/*
* startAngle  开始角度
* sweepAngle  跨越角度
* false  不画中心和弧线的连线
*/
canvas.drawArc(rect, startAngle, sweepAngle, false, bgPaint);
drawFg(canvas);


}


int j = 0;
int i = 0;//


/**
* 画Foreground
* @param canvas
*/
private void drawFg(Canvas canvas) {
// System.out.println("x:"+x);
// System.out.println("j:"+j);
for(i=0;i<j;i++){
fgPaint.setColor(Color.rgb(i, 256 - i, 0));
canvas.drawArc(rect, 180 + angleUnit * i, angleUnit, false, fgPaint);
}
// invalidate();


}


float coordinateUnit=256/(right-left);

float x=0;
float y;


@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
x = event.getX();
y = event.getY();

if(!(x>=left&&x<=right&&y>=top&&y<=(top+radius))){
return true;
}

degree = Math.toDegrees(Math.atan((y - centerPoint.y)
/ (x - centerPoint.x)));
if(degree>=0){
j=(int)(degree/angleUnit);
}else{
j=(int)((180+degree)/angleUnit);
}
invalidate();

break;

case MotionEvent.ACTION_MOVE:
x=event.getX();
y = event.getY();
if(!(x>=left&&x<=right&&y>=top&&y<=(top+radius))){
return true;
}

degree = Math.toDegrees(Math.atan((y - centerPoint.y)
/ (x - centerPoint.x)));

if(degree>=0){
j=(int)(degree/angleUnit);
}else{
j=(int)((180+degree)/angleUnit);
}
invalidate();
break;
}

return true;
}


public int getSecondaryProgress() {
// TODO Auto-generated method stub
return 0;
}


public int getProgress() {
// TODO Auto-generated method stub
return 0;
}

}

布局文件:

<RelativeLayout xmlns: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"
    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=".MainActivity" >


      <com.example.progressbar.ArcProgressBar
        android:id="@+id/arcProgressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:visibility="visible"
        android:progress="50" 
        android:max="100"
        android:secondaryProgress="100">
     </com.example.progressbar.ArcProgressBar>


       <TextView android:id="@+id/TextView1" android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:text="" />
    <TextView android:id="@+id/TextView2" android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:text="" />
     
</RelativeLayout>




加载中
返回顶部
顶部