用途說明:
這是一個自定義的圓環影象，支援動畫展示，可以自定義圓環的顏色和佔比，主要用以展示一些資料佔比方面展示的android圓環。
圓環實現思路:
android的自定義圓環實現有很多種方法，這裡只介紹我實現的思路。主要思路是先畫一個大圓，然後再畫一個與大圓同圓心的小圓，然後小圓的顏色可以設定為背景色，這樣看上去就是一個圓環了。
實現效果:
使用方法:
1.佈局檔案中直接使用自定義圓環（RingView），控制元件的寬和高需要固定的尺寸
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<com.wuden.zxingproject.widgets.RingView
android:id="@+id/rvRingView"
android:layout_gravity="center"
android:layout_width="300dp"
android:layout_height="300dp" />
</LinearLayout>
複製程式碼2.在對應的activty中呼叫一些方法來實現你的需求即可
public class TestActivity extends AppCompatActivity {
@Bind(R.id.rvRingView)
RingView mRvRingView;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_test1);
ButterKnife.bind(this);
mRvRingView.setAnglesData("12.2","230","6799.01","1","111","200");//直接設定String型別的資料
// mRvRingView.setAnglesData(12.2,230,6799.01,1,111,200);//直接設定double型別的資料
// mRvRingView.setAngles(20, 40, 100, 180, 20);//設定的是角度
// mRvRingView.setRingStartAngle(-90);//設定圓環的開始角度，不設定預設是-90
//設定畫筆的顏色，支援字串和資原始檔可變引數。
mRvRingView.initPaint("#123456", "#fea123", "#fefefe", "#78da10", "#1121de", "#aacc18");//支援字串
// mRvRingView.initPaint(R.color.color_first_part,R.color.color_second_part,
// R.color.color_third_part,R.color.color_fourth_part,
// R.color.color_fifth_part,R.color.color_sixth_part);
// mRvRingView.setInnerCirclePaintColor("#ffffff");//內圓的畫筆顏色，預設#ffffff
mRvRingView.setRingStrokeWidth(40);//圓環的環寬，預設20
// mRvRingView.showViewWithAnimation(1000);//自定義動畫時長展示圓環
// mRvRingView.showViewWithoutAnimation();//展示圓環不帶動畫
mRvRingView.showViewWithAnimation();//動畫展示圓環，預設2s
}
}
複製程式碼3.自定義view的原始碼
public class RingView extends View {
private static final int CIRCLE_ANGLE = 360;//圓環的角度
private static final int RING_STROKE_WIDTH = 20;//預設圓環的寬度為20dp
private Paint mNoAssetsPaint, mInnerCirclePaint;
private ArrayList<Paint> mPaints;
private int mRingStrokeWidth;//圓環的寬度
private int mCanvasWidth, mCanvasHeight;
private RectF mRingRect, mInnerRect;
private int mDensity;//手機螢幕密度
private int mNoDataPaintColor = Color.parseColor("#cccccc");//沒有資料的paint的顏色
private int mInnerCirclePaintColor = Color.parseColor("#ffffff");//內圓的paint的顏色
private ArrayList<Integer> mAngles;//傳入的資料
private boolean mHasData = false;
private ArrayList<Integer> mLevelStartAngles;//每段圓弧的起始角度值
private int mMoveAngle;//圓弧移動的角度
private int mRingStartAngle = -90;//圓環的起始角度
private RingAnimation mRingAnim;
public RingView(Context context) {
super(context);
init(context);
}
public RingView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public RingView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context ctx) {
mDensity = (int) ctx.getResources().getDisplayMetrics().density;
mRingStrokeWidth = RING_STROKE_WIDTH * mDensity;
mPaints = new ArrayList<Paint>();
mAngles = new ArrayList<Integer>();
mLevelStartAngles = new ArrayList<Integer>();
mNoAssetsPaint = new Paint();
mNoAssetsPaint.setAntiAlias(true);
mNoAssetsPaint.setStyle(Paint.Style.FILL);
mNoAssetsPaint.setColor(mNoDataPaintColor);
mInnerCirclePaint = new Paint();
mInnerCirclePaint.setAntiAlias(true);
mInnerCirclePaint.setStyle(Paint.Style.FILL);
mInnerCirclePaint.setColor(mInnerCirclePaintColor);
mRingAnim = new RingAnimation();
}
@Override
protected void onDraw(Canvas canvas) {
if (mCanvasWidth == 0) {
initRect();
}
if (!mHasData) {//沒有資料
mMoveAngle = CIRCLE_ANGLE;
drawRingView(canvas, mRingStartAngle, mMoveAngle, mNoAssetsPaint);
} else {
int _level = 0;//圓弧的段數
for (int _i = 0; _i < mAngles.size(); _i++) {//計算需要畫幾段圓弧
if (mMoveAngle < mLevelStartAngles.get(1)) {
_level = 1;
} else if (mMoveAngle > mLevelStartAngles.get(_i) && mMoveAngle <= mLevelStartAngles.get(_i + 1)) {
_level = _i + 1;
}
}
drawRing(_level, canvas);
}
canvas.drawArc(mInnerRect, mRingStartAngle, CIRCLE_ANGLE, true, mInnerCirclePaint);//畫內部的圓
}
/**
*
* @param level 圓環的段數
* @param canvas
*/
private void drawRing(int level, Canvas canvas) {
if (level <= 0) {
drawRingView(canvas, mRingStartAngle, CIRCLE_ANGLE, mNoAssetsPaint);
return;
}
if (mAngles.size() > mPaints.size()) {
int _temp = mAngles.size() - mPaints.size();
for (int _i = 0; _i < _temp; _i++) {
mPaints.add(mNoAssetsPaint);
}
}
for (int _i = 0; _i < level; _i++) {
if (_i == level - 1) {
drawRingView(canvas, mRingStartAngle + mLevelStartAngles.get(_i),
mMoveAngle - mLevelStartAngles.get(_i), mPaints.get(_i));
} else {
drawRingView(canvas, mRingStartAngle + mLevelStartAngles.get(_i), mAngles.get(_i), mPaints.get(_i));
}
}
}
/**
*
* @param canvas
* @param startAngle 開始的角度
* @param sweepAngle 旋轉的角度
* @param paint 畫筆
*/
private void drawRingView(Canvas canvas, int startAngle, int sweepAngle, Paint paint) {
if (sweepAngle != 0) {
canvas.drawArc(mRingRect, startAngle, sweepAngle, true, paint);
}
}
public void setNoDataPaintColor(int color) {
mNoAssetsPaint.setColor(getResources().getColor(color));
}
public void setNoDataPaintColor(String color) {
mNoAssetsPaint.setColor(Color.parseColor(color));
}
public void setInnerCirclePaintColor(int colorId) {
mInnerCirclePaint.setColor(getResources().getColor(colorId));
}
public void setInnerCirclePaintColor(String color){
mInnerCirclePaint.setColor(Color.parseColor(color));
}
public void initPaint(ArrayList<Integer> colors) {
mPaints.clear();
for (int _i = 0; _i < colors.size(); _i++) {
Paint _paint = new Paint();
_paint.setAntiAlias(true);
_paint.setStyle(Paint.Style.FILL);
_paint.setColor(colors.get(_i));
mPaints.add(_paint);
}
}
public void initPaint(String... colors) {
ArrayList<Integer> _colors = new ArrayList<Integer>();
for (int _i = 0; _i < colors.length; _i++) {
_colors.add(Color.parseColor(colors[_i]));
}
initPaint(_colors);
}
public void initPaint(int... colorIds) {
ArrayList<Integer> _colors = new ArrayList<Integer>();
for (int _i = 0; _i < colorIds.length; _i++) {
_colors.add(getResources().getColor(colorIds[_i]));
}
initPaint(_colors);
}
private void initRect() {
mCanvasWidth = getWidth();
mCanvasHeight = getHeight();
mInnerRect = new RectF(mRingStrokeWidth, mRingStrokeWidth, mCanvasWidth - mRingStrokeWidth, mCanvasHeight - mRingStrokeWidth);
mRingRect = new RectF(0, 0, mCanvasWidth, mCanvasHeight);
}
/**
* 設定圓環起始的角度
* @param angle
*/
public void setRingStartAngle(int angle){
mRingStartAngle = angle;
}
/**
* 設定圓環的環寬
*
* @param width
*/
public void setRingStrokeWidth(int width) {
mRingStrokeWidth = width * mDensity;
invalidate();
}
/**
* 所需要顯示的資料的角度
*
* @param angles
*/
public void setAngles(int... angles) {
ArrayList<Integer> _angles = new ArrayList<Integer>();
for (int _i = 0; _i < angles.length; _i++) {
_angles.add(angles[_i]);
}
setAngles(_angles);
}
/**
* 所需要顯示的資料的角度
*
* @param angles
*/
public void setAngles(ArrayList<Integer> angles) {
mAngles.clear();
mAngles.addAll(angles);
mLevelStartAngles.clear();
mLevelStartAngles.add(0);
int _angle = 0;
for (int _i = 0; _i < mAngles.size(); _i++) {
_angle += mAngles.get(_i);
mLevelStartAngles.add(_angle);
if (mAngles.get(_i) > 0) {
mHasData = true;
}
}
}
/**
* 設定資料來計算角度並繪製圓環
*
* @param data
*/
public void setAnglesData(BigDecimal... data) {
BigDecimal _total = new BigDecimal("0.00");
for (int _i = 0; _i < data.length; _i++) {
_total = _total.add(data[_i]);
}
if (_total.compareTo(BigDecimal.valueOf(0)) == 0) {
mHasData = false;
return;
}
BigDecimal[] _dbData = new BigDecimal[data.length];
for (int _i = 0; _i < data.length; _i++) {
_dbData[_i] = data[_i].divide(_total, 10, ROUND_HALF_UP).multiply(BigDecimal.valueOf(360));
}
int[] _intData = new int[data.length];
for (int _i = 0; _i < data.length; _i++) {
//數值小於1且大於0的，就直接定1，否則轉int型別，確保小資料也能出現在圓環上
_intData[_i] = _dbData[_i].compareTo(BigDecimal.valueOf(1.0)) < 0 && _dbData[_i].compareTo(BigDecimal.valueOf(0)) > 0 ?
1 : _dbData[_i].intValue();
}
//所有資料加起來可能會不滿360也可能會超出360，由於精度的問題
//處理方案是把缺少的度數（有正也有負）加在最大的值上，這樣圖形出現的誤差會不明顯
int _remind = 360;//剩餘的角度
int _maxPosition = -1, _max = _intData[0];
for (int _i = 0; _i < _intData.length; _i++) {
_remind = _remind - _intData[_i];
if (_max <= _intData[_i]) {
_maxPosition = _i;
}
}
_intData[_maxPosition] += _remind;//將缺少的度數載入最大值上
//將最終的資料設定到圓環上
setAngles(_intData);
}
public void setAnglesData(String... data) {
BigDecimal[] _bdData = new BigDecimal[data.length];
for (int _i = 0; _i < data.length; _i++) {
_bdData[_i] = new BigDecimal(TextUtils.isEmpty(data[_i]) ? "0" : data[_i]);
}
setAnglesData(_bdData);
}
public void setAnglesData(double... data) {
BigDecimal[] _bdData = new BigDecimal[data.length];
for (int _i = 0; _i < data.length; _i++) {
_bdData[_i] = BigDecimal.valueOf(data[_i]);
}
setAnglesData(_bdData);
}
/**
* 自定義動畫時間的圓環
*
* @param animTime
*/
public void showViewWithAnimation(int animTime) {
startAnimation(animTime);
}
/**
* 預設時間（2000）的圓環
*/
public void showViewWithAnimation() {
startAnimation(-1);
}
/**
* 不帶動畫的圓環
*/
public void showViewWithoutAnimation() {
mMoveAngle = CIRCLE_ANGLE;
invalidate();
}
private void startAnimation(int animTime) {
mRingAnim.setDuration(animTime <= 0 ? 2000 : animTime);
startAnimation(mRingAnim);
}
private class RingAnimation extends Animation {
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
mMoveAngle = (int) (interpolatedTime * CIRCLE_ANGLE);
invalidate();
}
}
}
複製程式碼4.程式碼實現的一些注意點
1）控制元件的寬和高必須是固定的，不然無法顯示。 2）畫筆顏色的陣列長度必須大於或等於資料陣列的長度，不然超出的資料將由預設的沒有資料的顏色顯示。 3）在設定畫筆顏色時，使用的字串形式的顏色必須嚴格遵循顏色的書寫方式，不然會出現無法正確顯示view。例如：不支援“#fff”，支援“#ffffff”。