正文

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

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

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

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

3. 創(chuàng)見 底部 attacheYAxis , 實時動態(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ū)域時，順便將圖表頂部的 desc 文案"成交量：xxx萬股" drawText(desc) 繪制一下。

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

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

Attache Chart繪制

依照文章開頭那里提到的跟Main Chart 基本上在同一個For循環(huán)里處理的，這里基本上只添加了兩個函數(shù)的調(diào)用，而繪制Volume Chart還是調(diào)用原來的drawChart() 函數(shù)，只是Params中的RectF的相關(guān)的坐標(biāo)需要單獨計算，這里通過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的計算單獨列了一個函數(shù)getAttacheStockRectF()

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

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

最新評論