Android实现一个包含表格的图标库实例代码

概述之前有写过一个图表lib，但是开发的速度，大多很难跟上产品需求变化的脚步，所以修改了下原先的图表库，支持图表下面能整合table显示对应的类目，用曲线替换了折线，支持多曲线的显示，增加了显示的动画，，增加了一

之前有写过一个图表lib，但是开发的速度，大多很难跟上产品需求变化的脚步，所以修改了下原先的图表库，支持图表下面能整合table显示对应的类目，用曲线替换了折线，支持多曲线的显示，增加了显示的动画，，增加了一些可定制的属性，支持水平柱状图和叠加柱状图，以及多曲线图和饼状图的显示

1.效果图

2.各种图表的使用方式

1.饼状图 这个和原先的使用一样，只不过增加了一个动画，可以参看之前的文章，饼状图使用。

2.水平多柱状图

2.1 xml布局

 <wellijohn.org.varchart.hor_bar_with_line_chart.Chartline  androID:ID="@+ID/chartline"  androID:layout_wIDth="wrap_content"  androID:layout_height="wrap_content"  androID:background="@color/white"  app:default_x_visible_num="4.2"//一个屏幕中显示多少列  app:y_interval="40dp"//Y轴的间距  app:y_num_text_max_wIDth="56dp"//y轴左边的文字的宽度 />

还有y_visible_num：y轴需要显示几列

2.2 数据设置

public class HorBaractivity extends AppCompatActivity { //显示的坐标点 private Chartline mChartline; //多条折线的坐标点 private List<List<DotVo>> mMulListdisDots; //x轴的点 private String[] mXdots = new String[]{"08/18","08/19","08/20","08/21","08/22","08/23","08/24","08/25","08/26","08/27","08/28","08/29","09/01","09/02","09/23",}; private double mMax = 44; private Random rand = new Random(); private List<categoryVo> mcategoryList; @OverrIDe protected voID onCreate(@Nullable Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentVIEw(R.layout.activity_hor_bar);  initVIEw();  initMulTestData();  initcategoryList();  try {   mChartline.setYAxisMaxValue(mMax).setXdots(mXdots).setAnimationopen(true).setListdisDots(mMulListdisDots).     setcategoryList(mcategoryList).reDraw();  } catch (YCoordinateException e) {   Log.d("MainActivity","onCreate: ");   e.printstacktrace();  } } /**  * 柱状图的数据，是一个List，一个categoryVo，就是一列中增加一个柱状  * categoryVo：{  *  卡券类目的名称  *  private String categoryname;  *  每个卡券类目的值  *  private List<String> categoryValueList;  * }  */ private voID initcategoryList() {  mcategoryList = new ArrayList<>();  mcategoryList.add(new categoryVo());  mcategoryList.add(new categoryVo());  mcategoryList.add(new categoryVo()); } /**  * 初始化曲线图,private List<List<DotVo>> mMulListdisDots;  * List<DotVo>>就是一条曲线图，  */ private voID initMulTestData() {  mMulListdisDots = new ArrayList<>();  for (int i = 0; i < 3; i++) {   ArrayList<DotVo> temp = new ArrayList();   DotVo tempDotVo = new DotVo("08/18",rand.nextInt((int) mMax));   temp.add(tempDotVo);   DotVo tempDotVo1 = new DotVo("08/19",rand.nextInt((int) mMax));   temp.add(tempDotVo1);   DotVo tempDotVo2 = new DotVo("08/20",rand.nextInt((int) mMax));   temp.add(tempDotVo2);   DotVo tempDotVo3 = new DotVo("08/21",rand.nextInt((int) mMax));   temp.add(tempDotVo3);   DotVo tempDotVo4 = new DotVo("08/22",rand.nextInt((int) mMax));   temp.add(tempDotVo4);   DotVo tempDotVo5 = new DotVo("08/23",rand.nextInt((int) mMax));   temp.add(tempDotVo5);   DotVo tempDotVo6 = new DotVo("09/02",rand.nextInt((int) mMax));   temp.add(tempDotVo6);   mMulListdisDots.add(temp);  } } private voID initVIEw() {  mChartline = findVIEwByID(R.ID.chartline); }}

3.叠加柱状图

3.1 xml布局

<wellijohn.org.varchart.overlay_bar_with_line_chart.OverLaybarChartline  androID:ID="@+ID/overlay_chart_line"  androID:layout_wIDth="wrap_content"  androID:layout_height="wrap_content"  androID:background="@color/white"  androID:visibility="visible"  app:overlay_default_x_visible_num="4.2"  app:overlay_y_interval="40dp"  app:overlay_y_num_text_max_wIDth="56dp" />

3.2 数据设置，如2.2一样

3.实现的几个关键点

3.1 宽度需要重写，onMeasure，因为的控件的宽度是大于屏幕的宽度的，宽度是根据显示的x轴的点和间距，以及y轴坐标的文字的所占的宽度的距离所组成。  

 int wIDthParentMeasureMode = MeasureSpec.getMode(wIDthMeasureSpec);  int wIDthParentMeasureSize = MeasureSpec.getSize(wIDthMeasureSpec);  int heightParentMeasureMode = MeasureSpec.getMode(heightmeasureSpec);  int heightParentMeasureSize = MeasureSpec.getSize(heightmeasureSpec);  int resultWIDthSize = 0;  int resultHeightSize = 0;  int resultWIDthMode = MeasureSpec.EXACTLY;//用来对childVIEw进行计算的  int resultHeightmode = MeasureSpec.EXACTLY;  int paddingWIDth = getpaddingleft() + getpaddingRight();  int paddingHeight = getpaddingtop() + getpaddingBottom();  VIEwGroup.LayoutParams thisLp = getLayoutParams();  switch (wIDthParentMeasureMode) {   //父类不加限制给子类   case MeasureSpec.UnspecIFIED:    //这个代表在布局写死了宽度    if (thisLp.wIDth > 0) {     resultWIDthSize = thisLp.wIDth;     resultWIDthMode = MeasureSpec.EXACTLY;    } else {     resultWIDthSize = (int) (getYMaxTextWIDth() + mXinterval * mXdots.length);     resultWIDthMode = MeasureSpec.UnspecIFIED;    }    break;   case MeasureSpec.AT_MOST:    //这个代表在布局写死了宽度    if (thisLp.wIDth > 0) {     resultWIDthSize = thisLp.wIDth;     resultWIDthMode = MeasureSpec.EXACTLY;    } else if (thisLp.wIDth == VIEwGroup.LayoutParams.MATCH_PARENT) {     resultWIDthSize = Math.max(0,wIDthParentMeasureSize - paddingWIDth);     resultWIDthMode = MeasureSpec.AT_MOST;    } else if (thisLp.wIDth == VIEwGroup.LayoutParams.WRAP_CONTENT) {     resultWIDthSize = (int) (getYMaxTextWIDth() + mXinterval * mXdots.length);     resultWIDthMode = MeasureSpec.AT_MOST;    }    break;   case MeasureSpec.EXACTLY:    //这个代表在布局写死了宽度    if (thisLp.wIDth > 0) {     resultWIDthSize = Math.min(wIDthParentMeasureSize,thisLp.wIDth);     resultWIDthMode = MeasureSpec.EXACTLY;    } else if (thisLp.wIDth == VIEwGroup.LayoutParams.MATCH_PARENT) {     resultWIDthSize = wIDthParentMeasureSize;     resultWIDthMode = MeasureSpec.EXACTLY;    } else if (thisLp.wIDth == VIEwGroup.LayoutParams.WRAP_CONTENT) {     resultWIDthSize = (int) (getYMaxTextWIDth() + mXinterval * mXdots.length);     resultWIDthMode = MeasureSpec.AT_MOST;    }    break;  }  setMeasuredDimension(MeasureSpec.makeMeasureSpec(resultWIDthSize,resultWIDthMode),MeasureSpec.makeMeasureSpec(resultHeightSize,resultHeightmode));

3.2 规划固定的区域，在超出区域的部分不可见，这个在之前用的bitmap来实现，总感觉别扭，后面读官方的源码的时候，了解了canvas的clipRect方法，我们在绘制这块的时候，onDraw方法中调用

 int clipRestoreCount = canvas.save(); canvas.clipRect(mContentRect);//绘制之前调用 doDraw();//进行想要的绘制 canvas.restoretoCount(clipRestoreCount);//绘制完成调用restoretoCount恢复到绘制这块之前的状态

3.3 动画我们基本都可以用ValueAnimator来实现，比如说饼状图：他的一个绘制是0-360的角度的转变，我们就可以

private voID startPathAnim(long duration) {  ValueAnimator valueAnimator = ValueAnimator.offloat(0,360);  valueAnimator.setDuration(duration);  valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {   @OverrIDe   public voID onAnimationUpdate(ValueAnimator animation) {    mDrawAngle = (float) animation.getAnimatedValue();    VIEwCompat.postInvalIDateOnAnimation(CirclePercentChart.this);   }  });  valueAnimator.start(); }

然后通过mDrawAngle来控制每次绘制的角度，这样就可以有从0-360度绘制的感觉，那个柱状图的动画也是一样的，以不变应万变。

3.4 贝塞尔曲线绘制的算法

 if (i == 0) {// 第一条为二阶贝塞尔  path.moveto(mDots[0],mDots[1] + (mLastHorlineY - mDots[1]) * mPhaseY);// 起点 } else {  float cpx = preX + (mDots[0] - preX) / 2.0f;  path.cubicTo(cpx,preY + (mLastHorlineY - preY) * mPhaseY,cpx,mDots[1] + (mLastHorlineY - mDots[1]) * mPhaseY,mDots[0],mDots[1] + (mLastHorlineY - mDots[1]) * mPhaseY);}

在绘制贝塞尔曲线，我仔细去查过这些控制点的计算规则，有根据三点，来计算出两个控制点，但是这样绘制出来在三个点内部曲线是很平滑的，但是在接下来的第四个点的衔接的时候，感觉不是很好，所以我还是用了上面的计算方法来计算控制点，算法我贴出来，参数分别是1，2，3的x和y坐标和弯曲系数

public static ControlPonits getControlPoints(double x0,double y0,double x1,double y1,double x2,double y2,double paramCoefficIEnt) {  double d01 = Math.sqrt(Math.pow(x1 - x0,2) + Math.pow(y1 - y0,2));  double d12 = Math.sqrt(Math.pow(x2 - x1,2) + Math.pow(y2 - y1,2));  double fa = paramCoefficIEnt * d01 / (d01 + d12); // scaling factor for triangle Ta  double fb = paramCoefficIEnt * d12 / (d01 + d12); // ditto for Tb,simplifIEs to fb=t-fa  double p1x = x1 - fa * (x2 - x0); // x2-x0 is the wIDth of triangle T  double p1y = y1 - fa * (y2 - y0); // y2-y0 is the height of T  double p2x = x1 + fb * (x2 - x0);  double p2y = y1 + fb * (y2 - y0);  ControlPonits tempControlPoints = new ControlPonits();  tempControlPoints.beforeControlPointX = (float) p1x;  tempControlPoints.beforeControlPointY = (float) p1y;  tempControlPoints.afterControlPointX = (float) p2x;  tempControlPoints.afterControlPointY = (float) p2y;  return tempControlPoints; }

3.library引入方式

step 1. Add it in your root build.gradle at the end of repositorIEs:

allprojects {repositorIEs {...maven { url 'https://jitpack.io' }}}Step 2. Add the dependencydependencIEs {  compile 'com.github.WelliJohn:charts:1.0.0'}

github地址 。

总结

以上所述是小编给大家介绍的AndroID实现一个包含表格的图标库实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持！

您可能感兴趣的文章:Android自定义DataGridView数据表格控件Android实现仿excel数据表格效果Android 表格布局TableLayout示例详解Android中使用ListView实现漂亮的表格效果Android提高之SQLite分页表格实现方法Android中使用ListView绘制自定义表格技巧分享 总结

以上是内存溢出为你收集整理的Android实现一个包含表格的图标库实例代码全部内容，希望文章能够帮你解决Android实现一个包含表格的图标库实例代码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。