首页 > 代码库 > 手把手教你画AndroidK线分时图及指标
手把手教你画AndroidK线分时图及指标
先废话一下：来到公司之前，项目是由外包公司做的，面试初，没有接触过分时图k线这块，觉得好难，我能搞定不！但是一段时间之后，发现之前做的那是一片稀烂，但是这货是主功能啊，迟早的自己操刀，痛下决心，开搞，本想用开源控件，但是想自己实现一下：接着有了本文
开始用surfaceview，但是这货在上下滑动的时候会出现黑边，这个问题我也是纠结了好久，想想产品肯定会打回，打回了还丢脸，算了没多少东西就用view吧，废话真tm多，开始吧。
1，创建项目（Android studio）
2，对了，先上个效果图吧，节省各位的时间：
3，把Activity设置为横屏，不设置也无所谓，我觉得横屏的好看点
android:screenOrientation="landscape"
4，建俩基类分时图点数据和K线每点的数据，备注的很清楚了
/**
* 分时所需要的 数据字段
*/
public class CMinute {
//时间
public long time;
//最新价
public double price;
//交易量
public long count;
//均价
public double average ;
//涨跌幅
public double rate ;
//价格
public double money ;
public long getTime() {
return time;
}
public String getTimeStr() {
SimpleDateFormat sdf = new SimpleDateFormat("HH:mm");
try {
return sdf.format(new Date(time * 1000));
} catch (Exception e) {
return "--:--";
}
}
}public class StickData implements Parcelable {
//时间
private long time;
//开盘
private double open;
//收盘
private double close;
//最高
private double high;
//最低
private double low;
//量
private long count;
//昨收
private double last;
//涨跌幅
private double rate;
//价格
private double money;
//计算均线的零时保存的值
private double maValue;
//5段均线
private double sma5;
//10段均线
private double sma10;
//20段均线
private double sma20;
//量5段均线
private double countSma5;
//量10段均线
private double countSma10;
//MACD的三个参数
private double dif;//线
private double dea;//线
private double macd;//柱状
//KDJ的三根线
private double k;
private double d;
private double j;
//计算K时需要
private double rsv;
//K线资金
//超大单净值
private double sp;
//大单净值
private double bg;
//中单净值
private double md;
//小单净值
private double sm; 5,画图的步骤
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//1,初始化需要的数据
initWidthAndHeight();
//2，画网格
drawGrid(canvas);
//3，画线（分时线的价格线、均价线或K线的均线）
drawLines(canvas);
if(lineType != TYPE_FENSHI) {
//4，如果是K线另外画烛形图
drawCandles(canvas);
}
//5，写上XY轴的文字（写早了会被覆盖）
drawText(canvas);
//6，画需要显示的指标
switch (indexType) {
case INDEX_VOL:
drawVOL(canvas);
break;
case INDEX_ZJ:
drawZJ(canvas);
break;
case INDEX_MACD:
drawMACD(canvas);
break;
case INDEX_KDJ:
drawKDJ(canvas);
break;
}
}6，画图实现
其实分时线就是画线，烛形图也是画线，但是多画个矩形而已，要是分析成这样的话，就简单学多了，那么接下来我来教你画线画矩形。。。。
此处省略10000字，好了说完了（其实是不用说了，就那么俩方法drawLine,drawRect），接下来我们重点说说位置的计算:
我们实际拿到的数据，不可能直接展示到坐标系的，因为可能很大很小，先来说说Y轴吧
Y轴
y = height - input * height / (max - min);
y:计算结果
height:view高度
max：显示的一组数据最大值
min:显示的一组数据中最小值
展示分时线时，需要在均价和价格取出最大值和最小值
展示K线时，可以从最高和最低中取出最大最小值
X轴
x = width / drawcount * i;
x:计算结果
width：view宽度
drawcount：展示的总个数
如上证指数，上午下午各开盘2小时，因为分时图是按分钟未单位，则drawcount就是60*4，K线则需要按照宽度计算出drawcount，我的代码中，烛形图和烛形图之后的空白比为10：2
7，指标
分时图的资金由于用到了别的接口，demo中就不予展示了，可以参考K线的资金动向指标（就几条线，简单吧）
MACD、KDJ、VOL5、VOL10、VOL20这些指标可以百度一下，我就不多少了，计算方法都一样，我直接贴代码，k线的四个指标，除了资金，其他指标直接可以通过K线的高低开收昨收计算出来的，
public class IndexParseUtil {
//均线跨度(SMA5,SMA10,SMA20),注意修改该值时，需要同时增加StickData里面的sma字段、修改本类initSma方法，否则不会生效
public static final int START_SMA5 = 5;
public static final int START_SMA10 = 10;
public static final int START_SMA20 = 20;
//26:计算MACD时，26段close均价DIF=(EMA(CLOSE,12) - EMA(CLOSE,26))
public static final int START_DIF = 26;
//35：计算MACD时，35段开始取前九日DIF值 DEA:=EMA(DIF,9)
public static final int START_DEA = 35;
//12:计算K值
public static final int START_K = 12;
//15:计算DJ
public static final int START_DJ = 15;
//9:计算RSV
public static final int START_REV = 9;
public static final int[] SMA = {START_SMA5,START_SMA10, START_SMA20};
/**
* 计算MACD
* @param list
*/
public static void initMACD(List<StickData> list) {
if(list == null) return;
//1计算出所有的DIF
for(int i = 0; i < list.size(); i++) {
if(i + START_DIF <= list.size()) {
list.get(i + START_DIF - 1).setDif(getCloseSma(list.subList(i + START_DIF - 12, i + START_DIF)) - getCloseSma(list.subList(i + START_DIF - 26, i + START_DIF)));
}
}
//2计算出所有的DEA
for(int i = 0; i < list.size(); i++) {
if(i + START_DEA <= list.size()) {
list.get(i + START_DEA - 1).setDea(getDifSma(list.subList(i + START_DEA - 9, i + START_DEA)));
//3计算MACD
list.get(i + START_DEA - 1).setMacd(2d * (list.get(i + START_DEA - 1).getDif() - list.get(i + START_DEA - 1).getDea()));
}
}
}
/**
* 计算KDJ
* @param list
*/
public static void initKDJ(List<StickData> list) {
if(list == null) return;
//1计算出所有的REV
for(int i = 0; i < list.size(); i++) {
if(i + START_REV <= list.size()) {
//第9日开始计算RSV
StickData data = http://www.mamicode.com/list.get(i + START_REV - 1);>
8，滑动与缩放
这个就简单了，分时线不支持滑动和缩放，只有k线需要：因为k线的数据较多，默认一屏展示不全，所以需要直接滑动，缩放的话，可能是想看大趋势吧（我猜的）！
方法就是直接通过手势监听滑动和缩放，
那么：我拿到600个数据，展示了500-600，滑动的时候，只要吧这100个往前移动就可以了，如滑到450-550；缩放的话，就更简单了，如果一屏展示100，那你设置一屏展示80或120就是缩放了，是不是so easy！
9，十字线
好了，图画完了，需要十字线出来走两步了！
先看看我的布局吧
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="686">
<eat.arvin.com.mychart.view.FenshiView
android:id="@+id/cff_fenshiview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<eat.arvin.com.mychart.view.CrossView
android:id="@+id/cff_cross"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
</RelativeLayout>
懂了吧，这俩货是分开的，我只要在fenshiView里面捕获单击事件，然后判断该点是否有数据，有的话在CrossView画线，对画两根线，欧了 @Override
public boolean onSingleTapUp(final MotionEvent e) {
//延时300毫秒显示，为双击腾出时间
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
//单击显示十字线
if(crossView != null) {
if (crossView.getVisibility() == View.GONE) {
onCrossMove(e.getX(), e.getY());
}
}
}
}, DOUBLE_TAP_DELAY);
return super.onSingleTapUp(e);
}
crossViewpublic class CrossView extends View {
/**
* 十字线移动的监听
*/
public interface OnMoveListener {
/**
* 十字线移动(回调到数据存放的位置，判断是否需要画线后，再调用本界面画线方法)
*
* @param x x轴坐标
* @param y y轴坐标
*/
void onCrossMove(float x, float y);
/**
* 十字线消失的回调
*/
void onDismiss();
}
private CrossBean bean;
//手势控制
private GestureDetector gestureDetector;
private OnMoveListener onMoveListener;
public CrossView(Context context, AttributeSet attrs) {
super(context, attrs);
gestureDetector = new GestureDetector(getContext(), new GestureDetector.SimpleOnGestureListener() {
@Override
public boolean onSingleTapUp(MotionEvent e) {
//单击隐藏十字线
setVisibility(GONE);
if (onMoveListener != null)
onMoveListener.onDismiss();
return super.onSingleTapUp(e);
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
//滑动时，通知到接口
if (onMoveListener != null) {
onMoveListener.onCrossMove(e2.getX(), e2.getY());
}
return super.onScroll(e1, e2, distanceX, distanceY);
}
});
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (gestureDetector != null)
gestureDetector.onTouchEvent(event);
return true;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawCrossLine(canvas);
}
/**
* //根据x,y画十字线
*
* @param canvas
*/
private void drawCrossLine(Canvas canvas) {
//当该点没有数据的时候，不画
if (bean.x < 0 || bean.y < 0) return;
boolean isJunXian = bean.y2 >= 0;
Paint p = new Paint();
p.setAntiAlias(true);
p.setColor(ColorUtil.COLOR_CROSS_LINE);
p.setStrokeWidth(2f);
p.setStyle(Paint.Style.FILL);
//横线
canvas.drawLine(0, bean.y, getWidth(), bean.y, p);
//竖线
canvas.drawLine(bean.x, 0, bean.x, getHeight(), p);
if (isJunXian) {
//均线的时候才画出圆点
//画十字线和均线价格线交汇的圆
canvas.drawCircle(bean.x, bean.y, 10, p);
p.setColor(ColorUtil.COLOR_SMA_LINE);
canvas.drawCircle(bean.x, bean.y2, 10, p);
}
p.setColor(Color.BLACK);
p.setTextSize(32f);
//1, 写价格(竖线靠左时，价格需要写到右边)
drawPriceTextWithRect(canvas, bean.x, bean.y, bean.price, p);
//2, 写时间
drawTimeTextWithRect(canvas, bean.x, bean.getTime(), p);
//3，写指标的文字
drawIndexTexts(canvas);
p.reset();
}
private void drawIndexTexts(Canvas canvas) {
if(bean.indexText == null || bean.indexColor == null) return;
Paint p = new Paint();
p.setAntiAlias(true);
p.setTextSize(26f);
float x = 0;
float y = getHeight() * (ChartConstant.MAIN_SCALE + ChartConstant.TIME_SCALE) + 25;
for(int i = 0;i < bean.indexText.length; i++) {
p.setColor(bean.indexColor[i]);
canvas.drawText(bean.indexText[i], x, y, p);
x += LineUtil.getTextWidth(p, bean.indexText[i]) + 30;
}
}
/**
* 写时间，并且带框
*/
private void drawTimeTextWithRect(Canvas canvas, float x, String time, Paint p) {
p.setTextAlign(Paint.Align.LEFT);
float textWidth = LineUtil.getTextWidth(p, time) + 20;
float y = getHeight() * ChartConstant.MAIN_SCALE;
Paint rp = new Paint();
rp.setColor(Color.WHITE);
rp.setStyle(Paint.Style.FILL);
rp.setStrokeWidth(2f);
//1,先画白底
float startX = x - textWidth / 2;
float endX = x + textWidth / 2;
if(startX < 0) {
startX = 2f;
endX = startX + textWidth;
}
if(endX > getWidth()) {
endX = getWidth() - 2;
startX = endX - textWidth;
}
canvas.drawRect(startX, y + 2, endX, y + 30, rp);
rp.setColor(Color.BLACK);
rp.setStyle(Paint.Style.STROKE);
//2，再画黑框
canvas.drawRect(startX, y + 2, endX, y + 30, rp);
//3，写文字
canvas.drawText(time, startX + 10, y + 27.5f, p);
}
/**
* 写文字，并且为文字带上背景，等于在文字后方画上一个Rect
*/
private void drawPriceTextWithRect(Canvas canvas, float x, float y, String text, Paint p) {
float textWidth = LineUtil.getTextWidth(p, text) + 10;
Paint rp = new Paint();
rp.setColor(Color.WHITE);
rp.setStyle(Paint.Style.FILL);
rp.setStrokeWidth(2f);
float startY = y - 15f;
float endY = y + 15f;
if(startY < 0) {
startY = 0f;
endY = startY + 30f;
} else if(endY > getHeight()) {
endY = getHeight();
startY = endY - 30f;
}
if (x < 100) {
//X轴在左侧，该框画在右侧
//1,先画白底
canvas.drawRect(getWidth() - textWidth, startY, getWidth(), endY, rp);
rp.setColor(Color.BLACK);
rp.setStyle(Paint.Style.STROKE);
//2，再画黑框
canvas.drawRect(getWidth() - textWidth, startY, getWidth(), endY, rp);
p.setTextAlign(Paint.Align.RIGHT);
canvas.drawText(text, getWidth() - 5f, endY - 3, p);
} else {
//X轴在右侧，改框画左侧
canvas.drawRect(0, startY, textWidth, endY, rp);
rp.setColor(Color.BLACK);
rp.setStyle(Paint.Style.STROKE);
canvas.drawRect(0, startY, textWidth, endY, rp);
p.setTextAlign(Paint.Align.LEFT);
canvas.drawText(text, 5f, endY - 3, p);
}
}
/**
* 画分时线的十字线
*/
public void drawLine(CrossBean bean) {
this.bean = bean;
postInvalidate();
}
/**
* 设置移动监听
*
* @param onMoveListener
*/
public void setOnMoveListener(OnMoveListener onMoveListener) {
this.onMoveListener = onMoveListener;
}
}
10，一些优化
分时线：服务器只需要返回变化的点，不需要全部返回，这些缺失的点直接使用前一分钟补全
K线：由于k线数据巨多，所以如果在服务器计算好指标再返回客户端的话，会使数据量*1.5差不多，所以这些指标还是在本地算好了，只需要算需要显示的，且不需要重复计算
11，github
https://github.com/xuzhou4520/AChart1
手把手教你画AndroidK线分时图及指标
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。