如何在Android中从下到上填充ProgressBar

时间:2017-04-04 12:02:38

标签: java android android-layout android-custom-view android-progressbar

我正在制作温度计进度条。我想从下到上填充该栏(检查下图:从圆圈到上面)我想要动画(填充)ProgressBar

请有人帮助我!!

这是我的代码:

CustomProgressBar.java

public class CustomProgressBar extends View {
    private Paint progressPaint;
    private Paint fillPaint;
    private final int BAR_HEIGHT = 4; // = radius of small half circle at left of cus tom bar
    private final int SMALL_CIRLCE_RADIUS = BAR_HEIGHT; //5dp
    private final int CIRCLE_RADIUS = 12; // 15dp
    private final int STROKE_WIDTH = 1;
    private int heightWithoutPadding; // without Padding
    private int widthWithoutPaddding;  // without Padding
    private float barWidth; // in pixel
    private float pxBarHeight;
    private float pxBarLenght;
    private float pxCirleRadius;
    private int progress;
    private float textSize;

    public CustomProgressBar(Context context) {
        super(context);
        init(context, null);
    }

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

    public CustomProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        float deviceDensity = getResources().getDisplayMetrics().density;
        pxBarHeight = BAR_HEIGHT * deviceDensity;
        pxCirleRadius = CIRCLE_RADIUS * deviceDensity;
        textSize = 9 * deviceDensity;

        progressPaint = new Paint();
        progressPaint.setStrokeWidth(2);
        progressPaint.setColor(getResources().getColor(R.color.colorPrimary));

        fillPaint = new Paint();
        fillPaint.setStyle(Paint.Style.FILL);
        fillPaint.setColor(getResources().getColor(R.color.pb_fill_color));


    }

    @Override
    protected void onDraw(Canvas canvas) {


        heightWithoutPadding = getHeight() - getPaddingBottom();
        widthWithoutPaddding = getWidth() - getPaddingRight();
        barWidth = widthWithoutPaddding - pxBarHeight - pxCirleRadius - (float) (Math.sqrt(Math.pow(pxCirleRadius, 2) - Math.pow(pxBarHeight, 2)));


        // Draw the half at the end
        // if the progess > 0 , fill the small half cicle at the left
        if (progress > 0) {
            progressPaint.setStyle(Paint.Style.FILL);
            progressPaint.setColor(getResources().getColor(R.color.pb_fill_color));
        }
        RectF segment = new RectF();
        Path path = new Path();
        segment.set(getPaddingLeft(), getHeight() / 2 - pxBarHeight, getPaddingLeft() + 2 * pxBarHeight, getHeight() / 2 + pxBarHeight);
        path.addArc(segment, 90, 180);
        canvas.drawPath(path, progressPaint);

        // Draw the two line == the main of bar
        Paint linePaint = new Paint();
        linePaint.setStyle(Paint.Style.FILL);
        linePaint.setColor(getResources().getColor(R.color.colorPrimary));
        linePaint.setStrokeWidth(2);
        float endlineX = (float) (widthWithoutPaddding - pxCirleRadius - 2 * Math.sqrt(2) / 3 * pxCirleRadius);
        float startlineX = getPaddingLeft() + pxBarHeight; // == + small circle radius
        float abouveLineY = getHeight() / 2 - pxBarHeight;
        float belowLineY = getHeight() / 2 + pxBarHeight;
        pxBarLenght = endlineX - startlineX;
        canvas.drawLine(startlineX, abouveLineY, endlineX, abouveLineY, linePaint);
        canvas.drawLine(startlineX, belowLineY, endlineX, belowLineY, linePaint);

//         Draw the big circle at right

        segment.set(widthWithoutPaddding - 2 * pxCirleRadius, getHeight() / 2 - pxCirleRadius, widthWithoutPaddding, getHeight() / 2 + pxCirleRadius);
        path.rewind();
        float angle = (float) Math.toDegrees(Math.atan(1 / (2 * Math.sqrt(2)))); // Why ? because I said that
        path.addArc(segment, 180 + angle, 360 - 2 * angle);
        progressPaint.setStyle(Paint.Style.STROKE);
        progressPaint.setColor(getResources().getColor(R.color.colorPrimary));
        canvas.drawPath(path, progressPaint);

        // Draw the color fill progress on bar
        float totalLength = getWidth() - getPaddingRight() - getPaddingLeft();
        int firstThresol = (int) (100 * pxBarHeight / totalLength);
        int secondThresol = (int) (100 * (pxBarHeight + pxBarLenght) / totalLength);
        int thirdThresol = (int) (100 * (totalLength - pxCirleRadius) / totalLength);
        float lengthofProgress = totalLength * progress / 100;
        if (progress > firstThresol) {
            if (progress <= secondThresol) {
                // fill the bar with color
                canvas.drawRect(startlineX, abouveLineY, getPaddingLeft() + lengthofProgress, belowLineY, fillPaint);
            } else {
                // fill all the bar with color and also the cirle at right
                canvas.drawRect(startlineX, abouveLineY, getPaddingLeft() + pxBarHeight + pxBarLenght, belowLineY, fillPaint); // fill the bar
                path.rewind();
                float angle2 = 0;
                if (progress <= thirdThresol) {
                    angle2 = (float) Math.toDegrees(Math.acos((totalLength - lengthofProgress - pxCirleRadius) / pxCirleRadius));
                    path.addArc(segment, 180 - angle2, 2 * angle2);
                } else {
                    angle2 = (float) Math.toDegrees(Math.acos((lengthofProgress - totalLength + pxCirleRadius) / pxCirleRadius));
                    path.addArc(segment, angle2, 360 - 2 * angle2);
                }
                canvas.drawPath(path, fillPaint);
            }
        }

        // Draw the text display progress
        TextPaint textPaint = new TextPaint();
        textPaint.setTextSize(textSize);
        textPaint.setColor(getResources().getColor(R.color.text_color));
        textPaint.setTextAlign(Paint.Align.CENTER);
        float textHeight = textPaint.descent() - textPaint.ascent();
        float textOffset = (textHeight / 2) - textPaint.descent();
        canvas.drawText(progress + "%", segment.centerX(), segment.centerY() + textOffset, textPaint);

    }

    public void setProgress(int progress) {
        this.progress = progress;
        invalidate();
    }
}

提前致谢!!!

我的输出

enter image description here

0 个答案:

没有答案