Android表格圖標庫制作

更新時間：2018年01月30日 10:56:42 作者：WelliJohn

本篇文章主要給大家分享了在Android平臺上制作一個含有表格的圖標庫實例，對此有興趣的朋友參考下吧。

之前有寫過一個圖表lib，但是開發(fā)的速度，大多很難跟上產(chǎn)品需求變化的腳步，所以修改了下原先的圖表庫，支持圖表下面能整合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"http://一個屏幕中顯示多少列
    app:y_interval="40dp"http://Y軸的間距
    app:y_num_text_max_width="56dp"http://y軸左邊的文字的寬度 />
還有y_visible_num：y軸需要顯示幾列

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

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

  /**
   * 柱狀圖的數(shù)據(jù)，是一個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 數(shù)據(jù)設置，如2.2一樣 3.實現(xiàn)的幾個關鍵點 3.1 寬度需要重寫，onMeasure，因為的控件的寬度是大于屏幕的寬度的，寬度是根據(jù)顯示的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 規(guī)劃固定的區(qū)域，在超出區(qū)域的部分不可見，這個在之前用的bitmap來實現(xiàn)，總感覺別扭，后面讀官方的源碼的時候，了解了canvas的clipRect方法，我們在繪制這塊的時候，onDraw方法中調(diào)用

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

3.3 動畫我們基本都可以用ValueAnimator來實現(xiàn)，比如說餅狀圖：他的一個繪制是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度繪制的感覺，那個柱狀圖的動畫也是一樣的，以不變應萬變。

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

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

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 dependency
dependencies {
    compile 'com.github.WelliJohn:charts:1.0.0'
}

github地址

以上就是本次小編整理的全部內(nèi)容，感謝你對腳本之家的支持。

Android Studio自動生成UML關系圖的方法步驟
本文主要介紹了Android Studio自動生成UML關系圖，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
詳解Android系統(tǒng)啟動過程
這篇文章主要介紹了Android系統(tǒng)啟動過程的相關資料，幫助大家更好得理解和學習使用Android，感興趣的朋友可以了解下
2021-03-03
Android在OnCreate中獲取控件的寬度和高度的實現(xiàn)代碼
在Android中，有時需要對控件進行測量，得到的控件寬度和高度可以用來做一些計算。在需要自適應屏幕的情況下，這種計算就顯得特別重要
2012-11-11
Android 使用Shell腳本截屏并自動傳到電腦上
這篇文章主要介紹了Android 使用Shell腳本截屏并自動傳到電腦上的相關資料,需要的朋友可以參考下
2016-02-02
Android kotlin使用注解實現(xiàn)防按鈕連點功能的示例
這篇文章主要介紹了Android kotlin使用注解實現(xiàn)防按鈕連點功能的示例，幫助大家更好的理解和學習使用Android，感興趣的朋友可以了解下
2021-03-03
Android中實現(xiàn)詞組高亮TextView方法示例
高亮顯示大家應該都不陌生，在開發(fā)中經(jīng)常會遇到這個需求，所以下面這篇文章主要給大家介紹了關于Android中實現(xiàn)詞組高亮TextView的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-10-10
Flutter組件隱藏的多種方式總結
在 Flutter 開發(fā)中,我們經(jīng)常會遇到需要動態(tài)隱藏或顯示組件的需求,Flutter 提供了多種方式來實現(xiàn)這一功能,每種方式都有其獨特的適用場景,本文將深入探討這些方法的原理、用法以及優(yōu)缺點,幫助您選擇最適合的方案,需要的朋友可以參考下
2024-10-10
Android如何動態(tài)調(diào)整應用字體大小詳解
這篇文章主要給大家介紹了關于Android如何動態(tài)調(diào)整應用字體大小的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-05-05
Android實現(xiàn)圖片選擇器功能
這篇文章主要為大家詳細介紹了Android實現(xiàn)圖片選擇器功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-07-07
Android測量每秒幀數(shù)Frames Per Second (FPS)的方法
這篇文章主要介紹了Android測量每秒幀數(shù)Frames Per Second (FPS)的方法,涉及Android針對多媒體文件屬性操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10