标签:
ProgressWheel是github上一个开源的项目,为开发者提供一个扁平化的ProgressBar,并可以对其进行深度定制。效果如下:
package com.example.view; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Paint.Style; import android.graphics.RectF; import android.graphics.Shader; import android.os.Handler; import android.os.Message; import android.util.AttributeSet; import android.view.View; import com.example.progresswheeldemo.R; /** * An indicator of progress, similar to Android's ProgressBar. Can be used in * 'spin mode' or 'increment mode' * * @author Todd Davies * <p/> * Licensed under the Creative Commons Attribution 3.0 license see: * http://creativecommons.org/licenses/by/3.0/ */ public class ProgressWheel extends View { // Sizes (with defaults) private int layout_height = 0; private int layout_width = 0; private int fullRadius = 100; private int circleRadius = 80; private int barLength = 60; private int barWidth = 20; private int rimWidth = 20; private int textSize = 20; private float contourSize = 0; // Padding (with defaults) private int paddingTop = 5; private int paddingBottom = 5; private int paddingLeft = 5; private int paddingRight = 5; // Colors (with defaults) private int barColor = 0xAA000000; private int contourColor = 0xAA000000; private int circleColor = 0x00000000; private int rimColor = 0xAADDDDDD; private int textColor = 0xFF000000; // Paints private Paint barPaint = new Paint(); private Paint circlePaint = new Paint(); private Paint rimPaint = new Paint(); private Paint textPaint = new Paint(); private Paint contourPaint = new Paint(); // Rectangles @SuppressWarnings("unused") private RectF rectBounds = new RectF(); private RectF circleBounds = new RectF(); private RectF circleOuterContour = new RectF(); private RectF circleInnerContour = new RectF(); // Animation // The amount of pixels to move the bar by on each draw private int spinSpeed = 2; // The number of milliseconds to wait inbetween each draw private int delayMillis = 0; private Handler spinHandler = new Handler() { /** * This is the code that will increment the progress variable and so * spin the wheel */ @Override public void handleMessage(Message msg) { invalidate(); if (isSpinning) { progress += spinSpeed; if (progress > 360) { progress = 0; } spinHandler.sendEmptyMessageDelayed(0, delayMillis); } // super.handleMessage(msg); } }; int progress = 0; boolean isSpinning = false; // Other private String text = ""; private String[] splitText = {}; /** * The constructor for the ProgressWheel * * @param context * @param attrs */ public ProgressWheel(Context context, AttributeSet attrs) { super(context, attrs); parseAttributes(context.obtainStyledAttributes(attrs, R.styleable.ProgressWheel)); } // ---------------------------------- // Setting up stuff // ---------------------------------- /* * When this is called, make the view square. From: * http://www.jayway.com/2012 * /12/12/creating-custom-android-views-part-4-measuring * -and-how-to-force-a-view-to-be-square/ */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // The first thing that happen is that we call the superclass // implementation of onMeasure. The reason for that is that measuring // can be quite a complex process and calling the super method is a // convenient way to get most of this complexity handled. super.onMeasure(widthMeasureSpec, heightMeasureSpec); // We can鈥檛 use getWidth() or getHight() here. During the measuring // pass the view has not gotten its final size yet (this happens first // at the start of the layout pass) so we have to use getMeasuredWidth() // and getMeasuredHeight(). int size = 0; int width = getMeasuredWidth(); int height = getMeasuredHeight(); int widthWithoutPadding = width - getPaddingLeft() - getPaddingRight(); int heigthWithoutPadding = height - getPaddingTop() - getPaddingBottom(); // Finally we have some simple logic that calculates the size of the // view // and calls setMeasuredDimension() to set that size. // Before we compare the width and height of the view, we remove the // padding, // and when we set the dimension we add it back again. Now the actual // content // of the view will be square, but, depending on the padding, the total // dimensions // of the view might not be. if (widthWithoutPadding > heigthWithoutPadding) { size = heigthWithoutPadding; } else { size = widthWithoutPadding; } // If you override onMeasure() you have to call setMeasuredDimension(). // This is how you report back the measured size. If you don鈥檛 call // setMeasuredDimension() the parent will throw an exception and your // application will crash. // We are calling the onMeasure() method of the superclass so we don鈥檛 // actually need to call setMeasuredDimension() since that takes care // of that. However, the purpose with overriding onMeasure() was to // change the default behaviour and to do that we need to call // setMeasuredDimension() with our own values. setMeasuredDimension(size + getPaddingLeft() + getPaddingRight(), size + getPaddingTop() + getPaddingBottom()); } /** * Use onSizeChanged instead of onAttachedToWindow to get the dimensions of * the view, because this method is called after measuring the dimensions of * MATCH_PARENT & WRAP_CONTENT. Use this dimensions to setup the bounds and * paints. */ @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); // Share the dimensions layout_width = w; layout_height = h; setupBounds(); setupPaints(); invalidate(); } /** * Set the properties of the paints we're using to draw the progress wheel */ private void setupPaints() { barPaint.setColor(barColor); barPaint.setAntiAlias(true); barPaint.setStyle(Style.STROKE); barPaint.setStrokeWidth(barWidth); rimPaint.setColor(rimColor); rimPaint.setAntiAlias(true); rimPaint.setStyle(Style.STROKE); rimPaint.setStrokeWidth(rimWidth); circlePaint.setColor(circleColor); circlePaint.setAntiAlias(true); circlePaint.setStyle(Style.FILL); textPaint.setColor(textColor); textPaint.setStyle(Style.FILL); textPaint.setAntiAlias(true); textPaint.setTextSize(textSize); contourPaint.setColor(contourColor); contourPaint.setAntiAlias(true); contourPaint.setStyle(Style.STROKE); contourPaint.setStrokeWidth(contourSize); } /** * Set the bounds of the component */ private void setupBounds() { // Width should equal to Height, find the min value to steup the circle int minValue = Math.min(layout_width, layout_height); // Calc the Offset if needed int xOffset = layout_width - minValue; int yOffset = layout_height - minValue; // Add the offset paddingTop = this.getPaddingTop() + (yOffset / 2); paddingBottom = this.getPaddingBottom() + (yOffset / 2); paddingLeft = this.getPaddingLeft() + (xOffset / 2); paddingRight = this.getPaddingRight() + (xOffset / 2); int width = getWidth(); // this.getLayoutParams().width; int height = getHeight(); // this.getLayoutParams().height; rectBounds = new RectF(paddingLeft, paddingTop, width - paddingRight, height - paddingBottom); circleBounds = new RectF(paddingLeft + barWidth, paddingTop + barWidth, width - paddingRight - barWidth, height - paddingBottom - barWidth); circleInnerContour = new RectF(circleBounds.left + (rimWidth / 2.0f) + (contourSize / 2.0f), circleBounds.top + (rimWidth / 2.0f) + (contourSize / 2.0f), circleBounds.right - (rimWidth / 2.0f) - (contourSize / 2.0f), circleBounds.bottom - (rimWidth / 2.0f) - (contourSize / 2.0f)); circleOuterContour = new RectF(circleBounds.left - (rimWidth / 2.0f) - (contourSize / 2.0f), circleBounds.top - (rimWidth / 2.0f) - (contourSize / 2.0f), circleBounds.right + (rimWidth / 2.0f) + (contourSize / 2.0f), circleBounds.bottom + (rimWidth / 2.0f) + (contourSize / 2.0f)); fullRadius = (width - paddingRight - barWidth) / 2; circleRadius = (fullRadius - barWidth) + 1; } /** * Parse the attributes passed to the view from the XML * * @param a * the attributes to parse */ private void parseAttributes(TypedArray a) { barWidth = (int) a.getDimension(R.styleable.ProgressWheel_barWidth, barWidth); rimWidth = (int) a.getDimension(R.styleable.ProgressWheel_rimWidth, rimWidth); spinSpeed = (int) a.getDimension(R.styleable.ProgressWheel_spinSpeed, spinSpeed); delayMillis = a.getInteger(R.styleable.ProgressWheel_delayMillis, delayMillis); if (delayMillis < 0) { delayMillis = 0; } barColor = a.getColor(R.styleable.ProgressWheel_barColor, barColor); barLength = (int) a.getDimension(R.styleable.ProgressWheel_barLength, barLength); textSize = (int) a.getDimension(R.styleable.ProgressWheel_textSize, textSize); textColor = (int) a.getColor(R.styleable.ProgressWheel_textColor, textColor); // if the text is empty , so ignore it if (a.hasValue(R.styleable.ProgressWheel_text)) { setText(a.getString(R.styleable.ProgressWheel_text)); } rimColor = (int) a.getColor(R.styleable.ProgressWheel_rimColor, rimColor); circleColor = (int) a.getColor(R.styleable.ProgressWheel_circleColor, circleColor); contourColor = a.getColor(R.styleable.ProgressWheel_contourColor, contourColor); contourSize = a.getDimension(R.styleable.ProgressWheel_contourSize, contourSize); // Recycle a.recycle(); } // ---------------------------------- // Animation stuff // ---------------------------------- protected void onDraw(Canvas canvas) { super.onDraw(canvas); // Draw the inner circle canvas.drawArc(circleBounds, 360, 360, false, circlePaint); // Draw the rim canvas.drawArc(circleBounds, 360, 360, false, rimPaint); canvas.drawArc(circleOuterContour, 360, 360, false, contourPaint); canvas.drawArc(circleInnerContour, 360, 360, false, contourPaint); // Draw the bar if (isSpinning) { canvas.drawArc(circleBounds, progress - 90, barLength, false, barPaint); } else { canvas.drawArc(circleBounds, -90, progress, false, barPaint); } // Draw the text (attempts to center it horizontally and vertically) float textHeight = textPaint.descent() - textPaint.ascent(); float verticalTextOffset = (textHeight / 2) - textPaint.descent(); for (String s : splitText) { float horizontalTextOffset = textPaint.measureText(s) / 2; canvas.drawText(s, this.getWidth() / 2 - horizontalTextOffset, this.getHeight() / 2 + verticalTextOffset, textPaint); } } /** * Check if the wheel is currently spinning */ public boolean isSpinning() { if (isSpinning) { return true; } else { return false; } } /** * Reset the count (in increment mode) */ public void resetCount() { progress = 0; setText("0%"); invalidate(); } /** * Turn off spin mode */ public void stopSpinning() { isSpinning = false; progress = 0; spinHandler.removeMessages(0); } /** * Puts the view on spin mode */ public void spin() { isSpinning = true; spinHandler.sendEmptyMessage(0); } /** * Increment the progress by 1 (of 360) */ public void incrementProgress() { isSpinning = false; progress += 20; if (progress > 360) progress = 0; // setText(Math.round(((float) progress / 360) * 100) + "%"); spinHandler.sendEmptyMessage(0); } /** * Set the progress to a specific value */ public void setProgress(int i) { isSpinning = false; progress = i; spinHandler.sendEmptyMessage(0); } // ---------------------------------- // Getters + setters // ---------------------------------- /** * Set the text in the progress bar Doesn't invalidate the view * * @param text * the text to show ('\n' constitutes a new line) */ public void setText(String text) { this.text = text; splitText = this.text.split("\n"); } public int getCircleRadius() { return circleRadius; } public void setCircleRadius(int circleRadius) { this.circleRadius = circleRadius; } public int getBarLength() { return barLength; } public void setBarLength(int barLength) { this.barLength = barLength; } public int getBarWidth() { return barWidth; } public void setBarWidth(int barWidth) { this.barWidth = barWidth; } public int getTextSize() { return textSize; } public void setTextSize(int textSize) { this.textSize = textSize; } public int getPaddingTop() { return paddingTop; } public void setPaddingTop(int paddingTop) { this.paddingTop = paddingTop; } public int getPaddingBottom() { return paddingBottom; } public void setPaddingBottom(int paddingBottom) { this.paddingBottom = paddingBottom; } public int getPaddingLeft() { return paddingLeft; } public void setPaddingLeft(int paddingLeft) { this.paddingLeft = paddingLeft; } public int getPaddingRight() { return paddingRight; } public void setPaddingRight(int paddingRight) { this.paddingRight = paddingRight; } public int getBarColor() { return barColor; } public void setBarColor(int barColor) { this.barColor = barColor; } public int getCircleColor() { return circleColor; } public void setCircleColor(int circleColor) { this.circleColor = circleColor; } public int getRimColor() { return rimColor; } public void setRimColor(int rimColor) { this.rimColor = rimColor; } public Shader getRimShader() { return rimPaint.getShader(); } public void setRimShader(Shader shader) { this.rimPaint.setShader(shader); } public int getTextColor() { return textColor; } public void setTextColor(int textColor) { this.textColor = textColor; } public int getSpinSpeed() { return spinSpeed; } public void setSpinSpeed(int spinSpeed) { this.spinSpeed = spinSpeed; } public int getRimWidth() { return rimWidth; } public void setRimWidth(int rimWidth) { this.rimWidth = rimWidth; } public int getDelayMillis() { return delayMillis; } public void setDelayMillis(int delayMillis) { this.delayMillis = delayMillis; } }2.将如下的属性文件拷到attrs.xml中:
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="ProgressWheel"> <attr name="text" format="string" /> <attr name="textColor" format="color" /> <attr name="textSize" format="dimension" /> <attr name="barColor" format="color" /><!-- 进度条颜色 --> <attr name="rimColor" format="color" /><!-- 默认轮廓颜色 --> <attr name="rimWidth" format="dimension" /> <attr name="spinSpeed" format="dimension" /> <attr name="delayMillis" format="integer" /> <attr name="circleColor" format="color" /><!-- 圆圈内部的颜色 --> <attr name="radius" format="dimension" /> <attr name="barWidth" format="dimension" /><!-- 进度条宽度 --> <attr name="barLength" format="dimension" /><!-- 进度条长度(即进度条走过的长度) --> <attr name="contourColor" format="color"/><!-- 控制外边缘颜色 --> <attr name="contourSize" format="dimension"/> </declare-styleable> </resources>
xmlns:ProgressWheel="http://schemas.android.com/apk/res/包名"声明控件:
<com.example.view.ProgressWheel android:id="@+id/pw_spinner" android:layout_width="180dp" android:layout_height="180dp" android:layout_centerInParent="true" ProgressWheel:barColor="#0097D6" ProgressWheel:barLength="160dp" ProgressWheel:barWidth="15dp" ProgressWheel:rimColor="#330097D6" ProgressWheel:rimWidth="15dp" ProgressWheel:text="wait..." ProgressWheel:contourColor="#330097D6" ProgressWheel:textColor="#222"
wheel = (ProgressWheel) findViewById(R.id.pw_spinner);//找到控件 wheel.setProgress(180);//设置进度 wheel.incrementProgress();//增加进度 wheel.spin();//使控件开始旋转 wheel.stopSpinning();//停止旋转
【安卓笔记】扁平化的ProgressBar-----ProgressWheel
标签:
原文地址:http://blog.csdn.net/chdjj/article/details/38148555