正文

本章節(jié)是基于RecyclerChart的KLine 繪制第三章節(jié)，底部AttacheChart 成交量圖表 Volume的繪制，可以看到直接在原來的KLine MainChart下面繪制的，用的是第二章最后提及的方案，就是跟MainChart的繪制在一個(gè)For循環(huán)里處理的，所以也不存在兩表聯(lián)動的問題了。但是這個(gè)方案可能會有個(gè)隱患，這個(gè)后面提及吧，暫時(shí)放一放，直接看gif效果圖（沒有設(shè)計(jì)UI的出圖，暫且看著吧，哈哈）

這幾天習(xí)慣了實(shí)現(xiàn)功能后，然后隨即就開始記錄，所以比較隨意，以下Volume 實(shí)現(xiàn)前列的功能點(diǎn)

底部副圖表 成交量圖的繪制
1. 調(diào)整底部 ContentPaddingBottom,  騰出空間繪制 

2. 底部 XAxisRenderer 考慮是否單獨(dú)列出來，調(diào)整XAxisLabel. 

3. 創(chuàng)見 底部 attacheYAxis , 實(shí)時(shí)動態(tài)調(diào)整max/min,  resetYAixsAttache( ), 傳到繪制的StockChartRender的drawChart() 中去。

4. 繪制底部 AttacheChart, Volume圖表。

待改動：

將ContentPaddingBottom、paddingBottom 從xml中移到 StockAttrs的 default值中去，規(guī)范統(tǒng)一化。

創(chuàng)建AttacheChart YAxis

繪制圖表前，需要給AttcacheChart 前需要給 它框住，所以依賴YAxis的Max/Min值。需要借助 ContentPaddingBottom、paddingBottom值將 繪制的區(qū)域確定，確定繪制區(qū)域時(shí)，順便將圖表頂部的 desc 文案"成交量：xxx萬股" drawText(desc) 繪制一下。

Attache YAxis的創(chuàng)建跟 Main YAxis在一個(gè)函數(shù)里處理了

緊接著就是實(shí)時(shí)更換Attache YAxis的Max/Min value, 同樣跟Main YAxis 放在同一個(gè)函數(shù)里

Attache Chart繪制

依照文章開頭那里提到的跟Main Chart 基本上在同一個(gè)For循環(huán)里處理的，這里基本上只添加了兩個(gè)函數(shù)的調(diào)用，而繪制Volume Chart還是調(diào)用原來的drawChart() 函數(shù)，只是Params中的RectF的相關(guān)的坐標(biāo)需要單獨(dú)計(jì)算，這里通過ContentPaddingBottom， paddingBottom等去定位YAxis的上下界，上面的Attache YAxis的繪制有提及到。

drawAttacheTextAndDivide() 是繪制desc 文案的，然后基本上依舊是通過 contentPaddingBottom等去定位位置的

private fun drawAttacheTextAndDivide(canvas: Canvas, parent: RecyclerView, parentStart: Float, parentEnd: Float){
  val yDivideTop = parent.bottom - parent.paddingBottom - mStockAttrs.contentPaddingBottom
  val yDivideBottom = parent.bottom - parent.paddingBottom - mStockAttrs.contentPaddingBottom + 25.dp
  mLineChartPaint.color = mStockAttrs.yAxisLineColor
  mLineChartPaint.strokeWidth = 0.75f
  canvas.drawLine(parentStart, yDivideBottom, parentEnd, yDivideBottom, mLineChartPaint)
  val volumeStr = "成交量:9399萬股"
  val txtWidth = mHighLightDescPaint.measureText(volumeStr)
  val rectLeft = parent.left + 5.dpf
  val rectF = RectF(rectLeft, yDivideTop, rectLeft + txtWidth, yDivideBottom)
  val baseY = TextUtil.getTextBaseY(rectF, mHighLightDescPaint)
  mHighLightDescPaint.color = mStockAttrs.xAxisTxtColor
  mHighLightDescPaint.textSize = mStockAttrs.xAxisTxtSize
  canvas.drawText(volumeStr, rectLeft, baseY, mHighLightDescPaint)
}

然后這里Attache Item RectF的計(jì)算單獨(dú)列了一個(gè)函數(shù)getAttacheStockRectF()

至此，Volume Chart 的繪制到此就結(jié)束了，代碼 加上 碼文花費(fèi)了大概一上午的時(shí)間，整體來說實(shí)現(xiàn)起來還是比較簡單的，需要轉(zhuǎn)換了一下思想，不能單單局限在固定的思維里，不過這里提到后續(xù)擴(kuò)展可能會有些隱患，不過目前是可以的。

下次就進(jìn)入到縮放環(huán)節(jié)了，縮放限定最大、最小；當(dāng)縮小到一個(gè)limit Level時(shí)需要切換 Main Chart到 Line Chart，帶有底部Fill. 不過先處理正常的縮放吧，這個(gè)更新可能會比較久了，加油，鋼巴得，更多關(guān)于RecyclerChart KLine繪制Volume的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論