一、效果圖展示
chart_view_two.gif
二、分析
有的彩種比如雙色球，他是有紅藍(lán)兩個號碼的走勢圖，需要在一張表格里面展示出來。這個需求也不難實(shí)現(xiàn)，我們只需要稍微修改下簡單版的代碼就可以實(shí)現(xiàn)了。
三、代碼實(shí)現(xiàn)
我們在ChartView下面增加一個方法實(shí)現(xiàn)：
/**
* 新增一個隔壁的表格
* @param blueCeilsGroup
*/
public void addAnotherChart(List<CeilGroup> blueCeilsGroup){
int columnCount = 0;
int groupSize = ceilGroups.size();
for (int i = 0; i < groupSize; i++) {
List<Ceil> oldCeils = ceilGroups.get(i).getCeils();
CeilGroup ceilGroup = blueCeilsGroup.get(i);
List<Ceil> newCeils = ceilGroup.getCeils();
//中間增加一個空的ceil
oldCeils.add(new Ceil());
for (Ceil newCeil : newCeils) {
oldCeils.add(newCeil);
}
columnCount = oldCeils.size();
}
maxWidth = columnCount * ceilWidth;
maxHeight = groupSize * ceilHeight;
computeCeilLocation(0, 0);
}
遍歷已有的ceilGroups，對應(yīng)的取出 blueCeilsGroup 每一行所有的Ceil加入到之前已經(jīng)存在的 oldCeils 下，這里有一個技巧，增加一個空的Ceil，這樣顯示的時候會有一個空豎行，便于區(qū)分。
繪制球的時候，因?yàn)橛袃蓚€顏色了，所以顏色這個屬性需要加入到 Ceil 當(dāng)中，繪制的時候判斷取值：
/**
* 設(shè)置ceil選中的效果
*
* @param canvas
* @param ceil
*/
private void drawCeilSelected(Canvas canvas, Ceil ceil) {
if (ceil.isSelected()) {
selectedPaint.setColor(ceil.getColor());
canvas.drawOval(new RectF(ceil.getLeft(), ceil.getTop(), ceil.getRight(), ceil.getBottom()), selectedPaint);
}
}
/**
* 繪制ceil的連線
*
* @param canvas
* @param ceil
*/
private void drawCeilLinkLine(Canvas canvas, Ceil ceil) {
Ceil nextCeil = ceil.getNextCeil();
if (nextCeil != null) {
linkLinePaint.setColor(ceil.getColor());
canvas.drawLine(nextCeil.getCenterX(), nextCeil.getCenterY(), ceil.getCenterX(), ceil.getCenterY(), linkLinePaint);
}
}
以上就是所有的代碼了。繪制的里面因?yàn)榧恿诉吔缗袛?，超出屏幕的部分其?shí)不是實(shí)時繪制的，所以整體還是很順滑。但是這個三層循環(huán)真的不是一個很好的解決方案，如果有什么可以優(yōu)化的，私信告訴我。
