Android實(shí)現(xiàn)簡易的柱狀圖和曲線圖表實(shí)例代碼

2019-12-12 01:26:37

字體：大中小

供稿：網(wǎng)友

前言

之前有寫過一個(gè)圖表lib，但是開發(fā)的速度，大多很難跟上產(chǎn)品需求變化的腳步，所以修改了下原先的圖表庫，支持圖表下面能整合table顯示對應(yīng)的類目，用曲線替換了折線，支持多曲線的顯示，增加了顯示的動(dòng)畫，增加了一些可定制的屬性，支持水平柱狀圖和疊加柱狀圖，以及多曲線圖和餅狀圖的顯示，下面話不多說了，來一起看看詳細(xì)的介紹吧。

1.效果圖

2.各種圖表的使用方式

1.餅狀圖這個(gè)和原先的使用一樣，只不過增加了一個(gè)動(dòng)畫，可以參看之前的文章，餅狀圖使用。

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"http://一個(gè)屏幕中顯示多少列 app:y_interval="40dp"http://Y軸的間距 app:y_num_text_max_width="56dp"http://y軸左邊的文字的寬度 />

還有y_visible_num：y軸需要顯示幾列

2.2 數(shù)據(jù)設(shè)置

public class HorBarActivity extends AppCompatActivity { //顯示的坐標(biāo)點(diǎn) private ChartLine mChartline; //多條折線的坐標(biāo)點(diǎn) private List<List<DotVo>> mMulListDisDots; //x軸的點(diǎn) 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(); } } /** * 柱狀圖的數(shù)據(jù)，是一個(gè)list，一個(gè)CategoryVo，就是一列中增加一個(gè)柱狀 * CategoryVo：{ * 卡券類目的名稱 * private String categoryName; * 每個(gè)卡券類目的值 * 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 數(shù)據(jù)設(shè)置，如2.2一樣

4.實(shí)現(xiàn)的幾個(gè)關(guān)鍵點(diǎn)

4.1 寬度需要重寫，onMeasure，因?yàn)榈目丶膶挾仁谴笥谄聊坏膶挾鹊模瑢挾仁歉鶕?jù)顯示的x軸的點(diǎn)和間距，以及y軸坐標(biāo)的文字的所占的寬度的距離所組成。

 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進(jìn)行計(jì)算的 int resultHeightMode = MeasureSpec.EXACTLY; int paddingWidth = getPaddingLeft() + getPaddingRight(); int paddingHeight = getPaddingTop() + getPaddingBottom(); ViewGroup.LayoutParams thisLp = getLayoutParams(); switch (widthParentMeasureMode) {  //父類不加限制給子類  case MeasureSpec.UNSPECIFIED:  //這個(gè)代表在布局寫死了寬度  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:  //這個(gè)代表在布局寫死了寬度  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:  //這個(gè)代表在布局寫死了寬度  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));

4.2 規(guī)劃固定的區(qū)域，在超出區(qū)域的部分不可見，這個(gè)在之前用的bitmap來實(shí)現(xiàn)，總感覺別扭，后面讀官方的源碼的時(shí)候，了解了canvas的clipRect方法，我們在繪制這塊的時(shí)候，onDraw方法中調(diào)用

 int clipRestoreCount = canvas.save(); canvas.clipRect(mContentRect);//繪制之前調(diào)用 doDraw();//進(jìn)行想要的繪制 canvas.restoreToCount(clipRestoreCount);//繪制完成調(diào)用restoreToCount恢復(fù)到繪制這塊之前的狀態(tài)

4.3 動(dòng)畫我們基本都可以用ValueAnimator來實(shí)現(xiàn)，比如說餅狀圖：他的一個(gè)繪制是0-360的角度的轉(zhuǎn)變，我們就可以

 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度繪制的感覺，那個(gè)柱狀圖的動(dòng)畫也是一樣的，以不變應(yīng)萬變。

4.4 貝塞爾曲線繪制的算法

 if (i == 0) {// 第一條為二階貝塞爾 path.moveTo(mDots[0], mDots[1] + (mLastHorLineY - mDots[1]) * mPhaseY);// 起點(diǎn) } 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);}

在繪制貝塞爾曲線，我仔細(xì)去查過這些控制點(diǎn)的計(jì)算規(guī)則，有根據(jù)三點(diǎn)，來計(jì)算出兩個(gè)控制點(diǎn)，但是這樣繪制出來在三個(gè)點(diǎn)內(nèi)部曲線是很平滑的，但是在接下來的第四個(gè)點(diǎn)的銜接的時(shí)候，感覺不是很好，所以我還是用了上面的計(jì)算方法來計(jì)算控制點(diǎn)，算法我貼出來，參數(shù)分別是1，2，3的x和y坐標(biāo)和彎曲系數(shù)

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; }

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對武林網(wǎng)的支持。

上一篇：Android自定義processor實(shí)現(xiàn)bindView功能的實(shí)例

下一篇：Android網(wǎng)格布局GridView實(shí)現(xiàn)漂亮的多選效果