最近不忙,写了一个自定义图表的view,使用超级简单,只需要实现适配器就好。
下面讲解DiagramView的使用
先上图:通过上面的图片可以看到效果很多,
- 设置背景色,
- 设置上下左右间距
app:paddingLeft="@dimen/dp_10" app:paddingRight="@dimen/dp_10" app:paddingTop="@dimen/dp_10" app:paddingBottom="@dimen/dp_10"
- 设置各轴的颜色,每个轴都可单独设置
app:xAxisColor="@color/lust" app:yAxisColor="@color/lust" app:rightYAxisColor="@color/lust"
- 设置每一个轴旁边的文字,及其颜色和大小,都可单独设置
app:rightYAxisTextColor="@color/romance" app:rightYAxisTextSize="20" app:yAxisTextSize="20" app:xAxisTextSize="20" app:xAxisTextColor="@color/romance" app:yAxisTextColor="@color/romance"
- 设置各轴是否带箭头
app:hasArrows="false"
- 设置是否在轴上留余
app:xAxisSurplus="@dimen/dp_10" app:yAxisSurplus="@dimen/dp_10"
- 设置横轴上的基准线是实线还是虚线
app:yAxisCellLine="fullLine"
- 设置是否显示左右两侧竖轴
app:yAxisVisible="invisible"
- 可以画柱状图和线形图,以及其颜色
- 可以同时画多个柱状图和线形图
使用说明
- 先在项目最外层的build.gradle中的allprojects加入代码
maven { url 'https://jitpack.io' }
,如下
allprojects {
repositories {
google()
jcenter()
maven { url 'https://jitpack.io' }
}
}
- 然后在app下的build.gralde下的dependencies中加入以来
implementation 'com.github.tangqipeng:diagramview:1.0.1'
至此配置已经完成 - 在xml布局的父布局中加上
xmlns:app="http://schemas.android.com/apk/res-auto"
大体如下,还要加什么按照上面的来:
<com.tqp.diagramview.DiagramView
android:id="@+id/diagramView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_marginTop="@dimen/dp_10"
app:paddingLeft="@dimen/dp_10"
app:paddingRight="@dimen/dp_10"
app:paddingTop="@dimen/dp_10"
app:paddingBottom="@dimen/dp_10"
app:yAxisTextSize="20"
app:xAxisTextSize="20"
app:hasArrows="false"
app:rightYAxisTextColor="@color/romance"
app:rightYAxisTextSize="20"
app:xAxisTextColor="@color/romance"
app:yAxisTextColor="@color/romance"
android:background="@color/turkish_rose"/>
- 接下来就是初始化了:
DiagramView diagramView = findViewById(R.id.diagramView);
- 然后就是使用适配器,只需要继承DiagramView.Adapter就可以了。
private static class LineOtherAdapter extends DiagramView.Adapter{
/**
* XcellBean只是一个对象,这是可变的,你用你自己的,传入的参数可以是List<T>也行,
* 只是下面的配置由你自己设置好就行。
* 我这里是List<List<T>>,是因为我这里是多组对比
*/
private final List<List<XcellBean>> mBeanList;
private final static int china_type = 0;
private final static int usa_type = 1;
public LineOtherAdapter(List<List<XcellBean>> beanList) {
this.mBeanList = beanList;
}
/**
* 对比的组数,
* 如果你们只需要显示一组,你传入的参数是List<T>的话,你这里返回就写1,
* 当然你也可以List<List<T>>,那下面就不用变了
* @return
*/
@Override
public int getTypeCount() {
return mBeanList.size();
}
/**
* 每组数组的个数,这里实际上是x轴的单元数
* @return
*/
@Override
public int getItemCount() {
return mBeanList.get(0).size();
}
/**
* y轴上标有数值的基准长度,上图中左侧的y轴每隔几小格就标记了一个文字,
* 这里是返回有几个这样的标有文字的单元,那些没标数值的不要算,例如图1就是5格
* @return
*/
@Override
public int getYAxleBaseCellNum() {
return 10;
}
/**
* 每一标有数值的单元格所代表的数值
* @return
*/
@Override
public int getYAxleBaseCell() {
return 10;
}
/**
* 每一标有数值的单元格的数字所对应的文字
* @param position
* @return
*/
@Override
public String getYAxleBaseCellText(int position) {
return getYAxleBaseCell() * (position + 1) + "";
}
/**
* 每一个基准单元格又分为几格,如果不再分割则返回1
* @return
*/
@Override
public int getYAxleBaseCellSegmentationNum() {
return 5;
}
/**
* 你区分的type,实际上就是对比的每组数组的标识,
* 这里目前我好像漏掉了没啥用,但不影响显示,以后会完善
* @param position
* @return
*/
@Override
public int getItemViewType(int position) {
return position;
}
/**
* 按type区分,每一组的竖状图的颜色
* @param type
* @return
*/
@Override
public int getItemColor(int type) {
if (type == china_type) {
return R.color.havelock_blue;
}else{
return R.color.colorAccent;
}
}
/**
* x轴所标记的文字
* @param position
* @return
*/
@Override
public String getXAxisText(int position) {
return mBeanList.get(0).get(position).getNian();
}
/**
* x轴,每一组的竖状图的宽度,可以通过type来设置,如果都是一样宽,那就不需要区分
* @param type
* @return
*/
@Override
public float getItemWidth(int type) {
return 50f;
}
/**
* 按type区分,每一组的每一个x单元的竖状图的峰值,是有多高
* @param type
* @param position
* @return
*/
@Override
public float getItemHigh(int type, int position) {
return mBeanList.get(type).get(position).getRenkou();
}
/**
* 这里是是否显示右侧的y轴,适用于画点连线的图,默认是false,
* 这个方法不一定需要实现,如果启动右侧轴的话就实现,并返回true
* @return
*/
@Override
public boolean openRightYAxle() {
return true;
}
/**
* 右侧轴的标有数值的基本单元分为几格
* @return
*/
@Override
public int getRightYAxleBaseCellNum() {
return 6;
}
/**
* 右侧轴的标有数值的每一个基本单元所代表的数值
* @return
*/
@Override
public int getRightYAxleBaseCell() {
return 10;
}
/**
* 右侧轴的标有数值的每一个基本单元对应的文字
* @return
*/
@Override
public String getRightYAxleBaseCellText(int position) {
return getRightYAxleBaseCell() * (position + 1) +"%";
}
/**
* 右侧轴的标有数值的每一个基本单元是否再分,不分则返回1
* @return
*/
@Override
public int getRightYAxleBaseCellSegmentationNum() {
return 5;
}
/**
* 右侧轴标有数值的基本单元所对应的文字
* @param type
* @param position
* @return
*/
@Override
public float getRightCellValue(int type, int position) {
return mBeanList.get(type).get(position).getRate();
}
/**
* 线形图根据type来区分颜色,如果只有一组那就没必要区分了
* @param type
* @return
*/
@Override
public int getRightItemColor(int type) {
if (type == china_type) {
return R.color.lust;
}else{
return R.color.sunglow;
}
}
}
上面的方法中有些方法可以不需要实现,根据你个人的需要来写吧,使用起来很简单。
List<List<XcellBean>> cellBeanList = new ArrayList<>();
cellBeanList.add(getList1());
cellBeanList.add(getList2());
LineOtherAdapter adapter = new LineOtherAdapter(cellBeanList);
diagramView11.setAdapter(adapter);
这样便可现实了,当然我这里有数据,数据由你自己设置,XcellBean可以任由你定义。
如果哪位朋友觉得这里面有需求做不到你的要求,可以给我留言,我可以更新。
下面就是源码了,说到这里我本来想上传到外部仓库,供大家使用,但还需要学习一下,暂时先贴源码地址吧:
https://github.com/tangqipeng/diagramview
欢迎留言,有什么特殊的要求的,有没有现成的view的也可以告诉我,我实现了上传