Android自定义View——实现理财类APP七日年化收益折线图效果

这段时间的自定义View学习，学会了绘制柱状图、绘制折线图、绘制进度控件，那我们今天就来聊聊另外一种自定义的View，这就是我们常见的七日年化收益折线图效果。先看看长什么样。



这就是效果图了，元素相对而言还是比较多的，这里有线、柱状图、文字、折线、点等等。看起来好像很复杂，但是呢，只要一步一步的实现，那还是可以达到这种效果的，之前我们说过的， 自定义View，就像是在photo shop里面画图，想要什么就画什么，我们可以有很多的画笔工具，也可以有很多的图层。

先看看我们这一次用到哪些变量。

private Paint mTextPaint, mLinePaint,mPathPaint,mPointPaint;
//柱状图的宽度
private float mPaintRectWidth;
//路径
private Path mPath;
//高跟宽
private float mWidth, mHeight;
//柱状图的数量
private final float mCount = 6;
//偏移量
private final float offsets=1;

private float mRectHeight;
//x轴的坐标
private List<Float> xline=new ArrayList<Float>();
//Y轴的坐标
private List<Float> yline=new ArrayList<Float>();

//左边文字
private float []x={2.46f,2.45f,2.44f,2.43f,2.42f,2.41f,2.40f};
//底部文字
private String [] day={"07-01","07-02","07-03","07-04","07-05","07-06","07-07"};

注释标记的也是够详细了，为了大家能够看得懂，也为了提高的博客质量，我们注意到，这里有文字，有数量，基本涵盖了我们这里索要用到的所有的变量。

下面开始初始化操作。

private void initView() {
//绘制线和文字的颜色
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(Color.parseColor("#cccccc"));
mTextPaint.setTextSize(25);
mTextPaint.setStrokeWidth(1);

//绘制折线图的点
mPointPaint= new Paint();
mPointPaint.setAntiAlias(true);
mPointPaint.setColor(Color.parseColor("#000000"));
mPointPaint.setTextSize(25);
mPointPaint.setStrokeWidth(5);

//绘制柱状图的画笔
mLinePaint = new Paint();
mLinePaint.setAntiAlias(true);

//绘制折线图的画笔
mPathPaint= new Paint();
mPathPaint.setAntiAlias(true);
mPathPaint.setColor(Color.parseColor("#ff0000"));
mPathPaint.setStyle(Style.STROKE);

//折线图的路径
mPath=new Path();

}

这里主要就是给画笔初始化，可以看到每一个画笔的颜色、宽度都是不一样的，值的注意的是，这里面的画笔并没有设置镂空样式。

接下来我们看看怎么去赋值，老规矩，我们还是选择在onSizeChange()里面进行赋值，代码如下：

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth=(float)(getWidth()-getWidth()*0.1);
mHeight=(float)(getHeight()-getHeight()*0.1);
mRectHeight=(float)(getHeight()-getHeight()*0.1);
mPaintRectWidth=(float) (mWidth*0.8/mCount);
mLinePaint.setStrokeWidth(mPaintRectWidth);
}

跟之前的不一样，我们以前所要用的宽度跟高度，直接就是使用方法里的，但是现在我们没有这么做，例如：(float)(getWidth()-getWidth()*0.1);我们进行了一定的处理，这样可以提高页面的舒适性，提高用户体验。

好了，准备工作做好了，接下来看看onDraw方法里面的操作，代码如下：

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
onDrawRect(canvas);
onDrawLine(canvas);
canvasPath(canvas);
}

哟呵，怎么这么简单，就三个东西？对的，就是这么简单粗暴，从名字中也可以看出，第一个是绘制矩形，第二个绘制线，第三个就是绘制折线。是不是很快呢，下面看看具体的实现方式。

第一个方法：

//绘制6个矩形
private void onDrawRect(Canvas canvas) {
for (int i = 0; i < 7; i++) {
if (i%2==0) {
mLinePaint.setColor(Color.parseColor("#eeeeee"));
}else {
mLinePaint.setColor(Color.parseColor("#ece1f3"));
}
float left  =(float) (mWidth * 0.4 / 2 + mPaintRectWidth * i + offsets);
float right=(float) (mWidth * 0.4 / 2 + mPaintRectWidth* (i + 1));

canvas.drawRect(left,(float)(mRectHeight*0.01),right, mHeight, mLinePaint);
}

}

第二个：

//绘制网格线
private void onDrawLine(Canvas canvas){
//第一条线
canvas.drawLine(mPaintRectWidth-mPaintRectWidth/2, (float)(mRectHeight*0.01), getWidth(),  (float)(mRectHeight*0.01), mTextPaint);
//定义这里高度
float height;
//横七条
for (float i = 0; i < 7; i++) {
//从上到下
if (i==0) {
height=i;
}else {
height=mRectHeight*(i/6);
float size=mTextPaint.measureText(x[(int)i]+"");
//绘制线
canvas.drawLine(mPaintRectWidth+mPaintRectWidth/2, height, getWidth(),  height, mTextPaint);
//绘制左边Y轴的文字
canvas.drawText(x[(int)i]+"", (float)(mPaintRectWidth-mPaintRectWidth*0.35), height+size/5, mTextPaint);
}

}
//竖七条
canvas.drawLine((float) (mPaintRectWidth-mPaintRectWidth/2),0, (float) (mPaintRectWidth-mPaintRectWidth/2),  mHeight, mTextPaint);
for (float i = 0; i < 7; i++) {
//从左到右
canvas.drawLine((float) (mWidth * 0.4 / 2 + mPaintRectWidth * i),0, (float) (mWidth * 0.4 / 2 + mPaintRectWidth * i),  mHeight, mTextPaint);
//绘制底边的日期文字
canvas.drawText(day[(int) i], (float) (mWidth * 0.34 / 2 + mPaintRectWidth * i), (float)(mHeight+mHeight*0.1), mTextPaint);
//准备好下面折线图的X轴坐标
xline.add((float) (mWidth * 0.4 / 2 + mPaintRectWidth * i));
}
//折线图的第一个点
xline.add((float) (mPaintRectWidth-mPaintRectWidth/2));

}

这里的代码相对较多，我专门加了许多的注释，可以用心的看看。

第三个绘制折线：

//绘制折线路径
public void canvasPath(Canvas canvas){

for (int j = 0; j < yline.size(); j++) {

float x=xline.get(j);
float y =yline.get(j);
float aftery=Math.initData(y);
if (j==0) {
mPath.moveTo(x,aftery );
}else{

mPath.lineTo(x,aftery );
}
canvas.drawPoint(x, aftery, mPointPaint);
float size=mPointPaint.measureText(y+"");
canvas.drawText(y+"", (float)(x-size/2), (float)(aftery+size*0.25), mPointPaint);
}
canvas.drawPath(mPath, mPathPaint);
}

这里的绘制折线包括绘制线、点、文字、还有文字的转换、但是这个转换可以根据自己的需求来进行定制。

最后向外面暴露一个方法，用于更新坐标。

//用于设置Y轴的坐标值
public void setDataY( List<Float> yline) {
this.yline.clear();
this.yline=yline;
}
//一个更新UI的方法
public void invalidata(){
invalidate();
}

文字的转换我这里用一个自己的类去处理了，代码如下：

public static float initData(float a){

if (2.40f<=a&&a<2.41f) {
a=540f-540f/(a/0.01f);
}else if(2.41f<=a&&a<2.42f){
a=480f-480f/(a/0.01f);
}else if (2.42f<=a&&a<2.43f) {
a=360f-360f/(a/0.01f);
}else if (2.43f<=a&&a<2.44f) {
a=270f-270f/(a/0.01f);
}else if (2.44f<=a&&a<2.45f) {
a=180f-180f/(a/0.01f);
}else if (2.45f<=a&&a<2.46f) {
a=90f-90f/(a/0.01f);
}

return a;

}

以上就是逻辑的实现过程了。最后，我把所有代码贴上来：

AnnualyieldView.java

/**
* 小瓶盖 2016年7月13日18:08:28
*
* @author Android自定义View——实现理财类APP七日年化收益折线图效果
*
*相关博客地址 http://blog.csdn.net/qq_25193681 */
public class AnnualyieldView extends View {

private Paint mTextPaint, mLinePaint,mPathPaint,mPointPaint;
//柱状图的宽度
private float mPaintRectWidth;
//路径
private Path mPath;
//高跟宽
private float mWidth, mHeight;
//柱状图的数量
private final float mCount = 6;
//偏移量
private final float offsets=1;

private float mRectHeight;
//x轴的坐标
private List<Float> xline=new ArrayList<Float>();
//Y轴的坐标
private List<Float> yline=new ArrayList<Float>();

//左边文字
private float []x={2.46f,2.45f,2.44f,2.43f,2.42f,2.41f,2.40f};
//底部文字
private String [] day={"07-01","07-02","07-03","07-04","07-05","07-06","07-07"};

public AnnualyieldView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);

initView();

}

public AnnualyieldView(Context context, AttributeSet attrs) {
super(context, attrs);

initView();
}

public AnnualyieldView(Context context) {
super(context);

initView();
}
private void initView() {
//绘制线和文字的颜色
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(Color.parseColor("#cccccc"));
mTextPaint.setTextSize(25);
mTextPaint.setStrokeWidth(1);

//绘制折线图的点
mPointPaint= new Paint();
mPointPaint.setAntiAlias(true);
mPointPaint.setColor(Color.parseColor("#000000"));
mPointPaint.setTextSize(25);
mPointPaint.setStrokeWidth(5);

//绘制柱状图的画笔
mLinePaint = new Paint();
mLinePaint.setAntiAlias(true);

//绘制折线图的画笔
mPathPaint= new Paint();
mPathPaint.setAntiAlias(true);
mPathPaint.setColor(Color.parseColor("#ff0000"));
mPathPaint.setStyle(Style.STROKE);

//折线图的路径
mPath=new Path();

}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth=(float)(getWidth()-getWidth()*0.1);
mHeight=(float)(getHeight()-getHeight()*0.1);
mRectHeight=(float)(getHeight()-getHeight()*0.1);
mPaintRectWidth=(float) (mWidth*0.8/mCount);
mLinePaint.setStrokeWidth(mPaintRectWidth);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
onDrawRect(canvas);
onDrawLine(canvas);
canvasPath(canvas);
}
//绘制6个矩形
private void onDrawRect(Canvas canvas) {
for (int i = 0; i < 7; i++) {
if (i%2==0) {
mLinePaint.setColor(Color.parseColor("#eeeeee"));
}else {
mLinePaint.setColor(Color.parseColor("#ece1f3"));
}
float left  =(float) (mWidth * 0.4 / 2 + mPaintRectWidth * i + offsets);
float right=(float) (mWidth * 0.4 / 2 + mPaintRectWidth* (i + 1));

canvas.drawRect(left,(float)(mRectHeight*0.01),right, mHeight, mLinePaint);
}

}
//绘制网格线
private void onDrawLine(Canvas canvas){
//第一条线
canvas.drawLine(mPaintRectWidth-mPaintRectWidth/2, (float)(mRectHeight*0.01), getWidth(),  (float)(mRectHeight*0.01), mTextPaint);
//定义这里高度
float height;
//横七条
for (float i = 0; i < 7; i++) {
//从上到下
if (i==0) {
height=i;
}else {
height=mRectHeight*(i/6);
float size=mTextPaint.measureText(x[(int)i]+"");
//绘制线
canvas.drawLine(mPaintRectWidth+mPaintRectWidth/2, height, getWidth(),  height, mTextPaint);
//绘制左边Y轴的文字
canvas.drawText(x[(int)i]+"", (float)(mPaintRectWidth-mPaintRectWidth*0.35), height+size/5, mTextPaint);
}

}
//竖七条
canvas.drawLine((float) (mPaintRectWidth-mPaintRectWidth/2),0, (float) (mPaintRectWidth-mPaintRectWidth/2),  mHeight, mTextPaint);
for (float i = 0; i < 7; i++) {
//从左到右
canvas.drawLine((float) (mWidth * 0.4 / 2 + mPaintRectWidth * i),0, (float) (mWidth * 0.4 / 2 + mPaintRectWidth * i),  mHeight, mTextPaint);
//绘制底边的日期文字
canvas.drawText(day[(int) i], (float) (mWidth * 0.34 / 2 + mPaintRectWidth * i), (float)(mHeight+mHeight*0.1), mTextPaint);
//准备好下面折线图的X轴坐标
xline.add((float) (mWidth * 0.4 / 2 + mPaintRectWidth * i));
}
//折线图的第一个点
xline.add((float) (mPaintRectWidth-mPaintRectWidth/2));

}
//绘制折线路径
public void canvasPath(Canvas canvas){

for (int j = 0; j < yline.size(); j++) {

float x=xline.get(j);
float y =yline.get(j);
float aftery=Math.initData(y);
if (j==0) {
mPath.moveTo(x,aftery );
}else{

mPath.lineTo(x,aftery );
}
canvas.drawPoint(x, aftery, mPointPaint);
float size=mPointPaint.measureText(y+"");
canvas.drawText(y+"", (float)(x-size/2), (float)(aftery+size*0.25), mPointPaint);
}
canvas.drawPath(mPath, mPathPaint);
}
//用于设置Y轴的坐标值
public void setDataY( List<Float> yline) {
this.yline.clear();
this.yline=yline;
}
//一个更新UI的方法
public void invalidata(){
invalidate();
}
}

MainActivity.java

/**
* 小瓶盖 2016年7月13日18:08:28
*
* @author Android自定义View——实现理财类APP七日年化收益折线图效果
*
*相关博客地址 http://blog.csdn.net/qq_25193681 */
public class MainActivity extends Activity {
private AnnualyieldView annualyieldView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
annualyieldView=(AnnualyieldView) findViewById(R.id.line);
initdata();
}
private void initdata() {
List<Float> yline=new ArrayList<Float>();
yline.add(2.420123f);
yline.add(2.444122f);
yline.add(2.45359f);
yline.add(2.4206f);
yline.add(2.4357f);
yline.add(2.4228f);
yline.add(2.4350f);
annualyieldView.setDataY(yline);

}

}

布局文件activity_main.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"
tools:context="com.example.annualyield.MainActivity" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_margin="10dip"
android:orientation="vertical" >

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#888888"
android:textSize="18sp"
android:text="七日年化收益率(%)"
/>

<com.example.annualyield.AnnualyieldView
android:id="@+id/line"
android:layout_width="match_parent"
android:layout_height="200dip"
android:layout_marginTop="10dip"
android:layout_marginBottom="10dip" />
</LinearLayout>

</RelativeLayout>

还有一个用于转换的类，Math.java

/**
* 小瓶盖 2016年7月13日18:08:28
*
* @author Android自定义View——实现理财类APP七日年化收益折线图效果
*
*相关博客地址 http://blog.csdn.net/qq_25193681 */
public class Math {

public static float initData(float a){

if (2.40f<=a&&a<2.41f) {
a=540f-540f/(a/0.01f);
}else if(2.41f<=a&&a<2.42f){
a=480f-480f/(a/0.01f);
}else if (2.42f<=a&&a<2.43f) {
a=360f-360f/(a/0.01f);
}else if (2.43f<=a&&a<2.44f) {
a=270f-270f/(a/0.01f);
}else if (2.44f<=a&&a<2.45f) {
a=180f-180f/(a/0.01f);
}else if (2.45f<=a&&a<2.46f) {
a=90f-90f/(a/0.01f);
}

return a;

}
}

以上就是代码的全部内容，我记得我大学的老实说，不懂的地方就自己多敲代码，多了就懂了，虽然那时候我不认同，但是现在觉得还是有一定道理，都是一样过来的，现在希望能够跟大家一起进步。

最后我附上源码：