分段彩色进度条绘制-优快云博客

本文链接：https://blog.youkuaiyun.com/u010819959/article/details/50040237

群里有人问一个线型的选择条，分段彩色的。

他的需求是这样的：

我的第一想法就是使用roundRect去实现，但是转念一想，roundRect只能是一种颜色，好吧，采用最笨的方法画圆+矩形，脑补图如下：

好吧，不要吐槽，我笨，所以只能想到这里，

开始上代码：

首先呢，我们来分析下，我需要什么参数来绘制这个view，，color，数值的大小，通过数值大小我们可以求出比例值，根据view的宽度*比例值那么就能自动适应：

上代码：

Bean

package com.example.colorline;

import java.io.Serializable;

import android.graphics.Color;

public class ZoomBean implements Serializable {
	
	private int realSize = 0;
	
	private int color = Color.BLUE;

	private float proportion = 0.0F;
	
	public ZoomBean(){}
	
	public ZoomBean(int realSize,int color){
		this.realSize = realSize;
		this.color = color;
	}
	
	public int getRealSize() {
		return realSize;
	}

	public void setRealSize(int realSize) {
		this.realSize = realSize;
	}

	public int getColor() {
		return color;
	}

	public void setColor(int color) {
		this.color = color;
	}

	public float getProportion() {
		return proportion;
	}

	public void setProportion(float proportion) {
		this.proportion = proportion;
	}
	
	
}

然后是View类：

package com.example.colorline;

import java.util.ArrayList;
import java.util.List;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.view.Window;

public class RoadLine extends View {
	
	private Paint paint = null;
	/**
	 * 白色间隔默认1px
	 */
	private int space = 1;
	
	private List<ZoomBean> zoomList = null;
	
	public RoadLine(Context context) {
		super(context);
		initWidget();
	}
	public RoadLine(Context context, AttributeSet attrs) {
		super(context, attrs);
		initWidget();
	}
	public RoadLine(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		initWidget();
	}
	
	
	private void initWidget(){
		
		setMinimumWidth(100);  
		
		paint = new Paint();
		paint.setAntiAlias(true);
		paint.setColor(Color.BLUE);
	}
	@SuppressLint("DrawAllocation")
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		
		int viewWidth = getWidth();
		int viewHeight = getHeight();
		
		int realDrwaWidth = viewWidth-viewHeight;//实际rect绘制的宽度
		Rect rect = new Rect(viewHeight/2, 0, viewWidth-viewHeight/2,viewHeight);//实际可以绘制的矩形范围
		
		if(zoomList == null||zoomList.size()==1){
			if(zoomList!=null)
				paint.setColor(zoomList.get(0).getColor());
			canvas.drawRect(rect, paint);
			canvas.drawOval(new RectF(0,0,viewHeight,viewHeight),paint);
			canvas.drawOval(new RectF(viewWidth-viewHeight,0,viewWidth,viewHeight),paint);
			return;
		}
		
		synchronized (zoomList) {
			getProportion(zoomList);
		}
		
		int afterX = viewHeight/2;
		for (int i = 0;i<zoomList.size();i++) {
			ZoomBean zoomBean = zoomList.get(i);
			paint.setColor(zoomBean.getColor());
			if(i==0)
				canvas.drawOval(new RectF(0,0,viewHeight,viewHeight),paint);
			else if(i == zoomList.size()-1)
				canvas.drawOval(new RectF(viewWidth-viewHeight,0,viewWidth,viewHeight),paint);
			int right = (int)((viewWidth-viewHeight)*zoomBean.getProportion());
			Rect childRect = null;
			childRect= new Rect(afterX, 0,afterX + right, viewHeight);
			canvas.drawRect(childRect, paint);
			afterX += right;
		}
		
	}
	
	
	private void getProportion(List<ZoomBean> zoomList) {
		float totalSize = 0.0F;
		for (ZoomBean zoomBean : zoomList) {
			totalSize+=zoomBean.getRealSize();
		}
		for (int i = 0;i<zoomList.size();i++) {
			zoomList.get(i).setProportion(zoomList.get(i).getRealSize()/totalSize);
		}
	}
	
	public int getSpace() {
		return space;
	}
	public void setSpace(int space) {
		this.space = space;
	}
	
	public void setData(List<ZoomBean> zoomList){
		this.zoomList = zoomList;
		invalidate();
	}

	public void appendData(ZoomBean zoomBean){
		if(this.zoomList == null)
			zoomList = new ArrayList<ZoomBean>();
		zoomList.add(zoomBean);
		invalidate();
	}
	
}

再然后呢是XML图纸文件：

<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"
     >
	
    <com.example.colorline.RoadLine
        android:id="@+id/raodLine"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        ></com.example.colorline.RoadLine>
    
</RelativeLayout>

再再然后呢是activity：

package com.example.colorline;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.view.Menu;

public class MainActivity extends Activity {
	
	private List<ZoomBean> zoomList = new ArrayList<ZoomBean>();
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		RoadLine roadLine = (RoadLine) findViewById(R.id.raodLine);
		initData();
		
		roadLine.setData(zoomList);
	}

	private void initData() {
		for(int i = 1;i<6;i++){
			if(i == 0)
				zoomList.add(new ZoomBean(i*10,Color.BLUE));
			if(i == 1)
				zoomList.add(new ZoomBean(i*10,Color.RED));
			if(i == 2)
				zoomList.add(new ZoomBean(i*10,Color.YELLOW));
			if(i == 3)
				zoomList.add(new ZoomBean(i*10,Color.GREEN));
			if(i == 4)
				zoomList.add(new ZoomBean(i*10,Color.CYAN));
		}
	}

}

。。上下效果图：