自定義折線圖的需求在 APP 開發(fā)中好像很常見了，事實(shí)上用一些第三方庫(kù)來繪制折線圖很容易實(shí)現(xiàn)雏逾，但感覺一個(gè)類能搞定的事情去接入一個(gè)庫(kù)好像有點(diǎn)不和諧啊一罩。本著學(xué)習(xí)的目的，繪制了一個(gè)折線圖嫌拣，下面上效果圖：
效果圖.png
我的自定義 view
- 1.新建
Zhexiantu繼承之View，重寫下面兩個(gè)構(gòu)造函數(shù),并在里面做一些初始化操作呆躲。
public Zhexiantu(Context context) {
super(context);
this.mContext = context;
init();
}
public Zhexiantu(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
this.mContext = context;
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.Zhexiantu);
myBg = array.getColor(R.styleable.Zhexiantu_my_bg, 0xFFF7F7F7); //默認(rèn)值必須
linechartColor = array.getColor(R.styleable.Zhexiantu_linechart_color,0xFF90E7FD);
linechartSize = (int) array.getDimension(R.styleable.Zhexiantu_linechart_size,3);
linechartBg = array.getColor(R.styleable.Zhexiantu_linechart_bg,0xFFFFFFFF);
padding = (int) array.getDimension(R.styleable.Zhexiantu_linechart_padding,16);
init();
array.recycle(); //取完值异逐，記得回收
}
第二個(gè)構(gòu)造函數(shù)中相比第一個(gè)構(gòu)造函數(shù)多了一些自定義屬性取值的操作，自定義屬性需要在 res/values 文件夾下的 styles.xml 文件下定義屬性插掂，eg:
<!--自定義屬性-->
<declare-styleable name="Zhexiantu">
<attr name="my_bg" format="color"/>
<attr name="linechart_color" format="color"/>
<attr name="linechart_size" format="dimension"/>
<attr name="linechart_bg" format="color"/>
<attr name="linechart_padding" format="dimension"/>
</declare-styleable>
以上兩步都完成就可以在我們自己的自定義控件上使用自定義屬性了灰瞻，eg:
<com.lisheny.lenovo.myviewstudy.canvas.Zhexiantu
android:id="@+id/zhexiantu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:linechart_color="@color/color2"
app:linechart_bg="@color/color13"/>
另外腥例，附上 Paint 屬性設(shè)置的詳解 http://wuxiaolong.me/2016/08/20/Paint/
- 2.重寫
onMeasure方法，計(jì)算獲取畫布的寬高并計(jì)算尺 X酝润、Y軸的區(qū)間間隔
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int mode = MeasureSpec.getMode(heightMeasureSpec);
switch (mode) {
case MeasureSpec.AT_MOST: //(wrap_content)
mWidth = MeasureSpec.getSize(widthMeasureSpec);
mHeigt = 3 * mWidth / 5;
break;
case MeasureSpec.EXACTLY: //固定尺寸（如100dp）
mWidth = MeasureSpec.getSize(widthMeasureSpec);
mHeigt = MeasureSpec.getSize(heightMeasureSpec);
break;
case MeasureSpec.UNSPECIFIED: //比重 (layout_weight="1")
mWidth = MeasureSpec.getSize(widthMeasureSpec);
mHeigt = 3 * mWidth / 5;
break;
}
//X軸區(qū)間間隔
xDistance = (mWidth - 4 * dp2px(padding)) / (xText.length - 1);
//Y軸區(qū)間間隔
yDistance = (mHeigt - 2 * dp2px(padding)) / (yText.length - 1);
setMeasuredDimension((int) mWidth, (int) mHeigt);
}
通過 int mode = MeasureSpec.getMode(heightMeasureSpec); 獲取測(cè)量模式燎竖，根據(jù)不同的測(cè)量模式將寬高設(shè)置為合理的相應(yīng)值。關(guān)于這三種測(cè)量模式的介紹：
-
UNSPECIFIED==》父容器沒有對(duì)當(dāng)前View有任何限制袍祖，當(dāng)前View可以任意取尺寸 -
EXACTLY==》當(dāng)前的尺寸就是當(dāng)前View應(yīng)該取的尺寸 -
AT_MOST==》當(dāng)前尺寸是當(dāng)前View能取的最大尺寸
理解否底瓣？不理解沒事，我們知道什么情況下調(diào)用什么模式就行：
- xml 中 設(shè)置
wrap_content時(shí)蕉陋，會(huì)走AT_MOST模式捐凭； - xml 中 設(shè)置 固定尺寸（如100dp） 時(shí)，會(huì)走
EXACTLY模式凳鬓； - 這種使用比較少茁肠，xml 中 設(shè)置 比重
layout_weight="1"時(shí)，會(huì)走EXACTLY模式缩举；
注：onMeasure 函數(shù)會(huì)多次調(diào)用
- 3.接下來就是重寫
onDraw函數(shù)繪制 View
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//繪制畫布顏色
canvas.drawColor(myBg);
drawTextAndGrid(canvas, textPaint, gridPaint);
drawLineChart(canvas);
drawDots(canvas);
}
繪制步驟：
- 繪制畫布顏色垦梆，背景
- 繪制X、Y軸的坐標(biāo)值和表格
- 繪制折線
- 繪制小圓點(diǎn)
- 完成＝龊ⅰＭ行伞！
特別的：計(jì)算Y軸的刻度
/**
* 根據(jù)輸入數(shù)據(jù)值的到對(duì)應(yīng)Y軸坐標(biāo)
*
* 這里需求：Y軸坐標(biāo)增長(zhǎng) 隨屏幕之上而下增加 注:變量盡量用浮點(diǎn)型辽慕，避免精度丟失
* 公式：Y = Y軸開始值 + 每份坐標(biāo)刻度所占Y軸長(zhǎng)度的量{Y軸長(zhǎng)度/總刻度} * 當(dāng)前刻度值{value-min}
* 即：Y = Y軸開始值{ dp2px(padding) + dp2px(5)} + 每份坐標(biāo)刻度所占Y軸長(zhǎng)度的量{(yDistance * (yText.length - 1)) / (yText[yText.length-1]-yText[0])} * 當(dāng)前刻度值{(value - yText[0])}
*
* @param value
* @return
*/
private float getYcoordinate(float value) {
return dp2px(padding) + dp2px(5) + (yDistance * (yText.length - 1)) / (yText[yText.length - 1] - yText[0]) * (value - yText[0]);
}
其中：總刻度 = 最大Y刻度值（max） - 最小Y刻度值(min)
- 最后：折線圖的繪制總的來說很簡(jiǎn)單京腥，主要點(diǎn)是載入數(shù)據(jù)的刻度值要和Y軸相對(duì)應(yīng)，理解計(jì)算出Y軸坐標(biāo)的公式溅蛉，折線圖的繪制就簡(jiǎn)單了公浪，以上代碼不全，若要查看完成 Demo 船侧，點(diǎn)擊此處傳送欠气。
