群里有人问一个线型的选择条,分段彩色的。
他的需求是这样的:
我的第一想法就是使用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));
}
}
}
。。上下效果图:
好吧,本人比较懒,只把主要的东西实现了,剩下的ruler跟字大家自己去draw吧,哈哈哈哈哈哈。。。。
注:大神勿喷
资源下载:http://download.csdn.net/detail/u010819959/9299903