1. 程式人生 > 程式設計 >Android自定義控制元件橫向柱狀統計圖

Android自定義控制元件橫向柱狀統計圖

本文例項為大家分享了Android實現橫向柱狀統計圖的具體程式碼,供大家參考,具體內容如下

碰到一個專案需要用到統計圖功能,比較簡單就自定義寫了一個。沒有寫過多的樣式和功能,僅有簡單的橫向柱狀統計圖。

傳入資料後大致樣式如下:

/**橫向柱狀統計圖
 * Created by Administrator on 2018/1/16 0016.
 */
public class HorizontalChartView extends View {
 
  /**
   * 間隔線畫筆
   */
  private Paint paint;
 
  /**
   * 線的顏色
   */
  private int color_line = Color.rgb(230,230,230);
 
  /**
   * 字的顏色
   */
  private int color_font = Color.rgb(51,51,51);
 
  /**
   * 比例圖顏色
   */
  private int color_plan = Color.rgb(22,85,164);
 
  /**
   * 比例圖畫筆
   */
  private Paint paint_plan;
 
  /**
   * 比例圖高度
   */
  private int plan_height;
 
  /**
   * 初始化比例
   */
  private Float[] ratio = {0f,0f,0f};
 
  /**
   * 文字畫筆1
   */
  private Paint paint_font;
 
  /**
   * 文字畫筆2
   */
  private Paint paint_font2;
 
  /**
   * 線的條數
   */
  private int line_num = 11;
 
  /**
   * 比例數
   */
  private String ratio_num = "0";
 
  /**
   * 月份
   */
  private String month_num = "1月";
 
 
  public HorizontalChartView(Context context) {
    super(context);
  }
 
  public HorizontalChartView(Context context,@Nullable AttributeSet attrs) {
    super(context,attrs);
    init(context,attrs);
  }
 
  public HorizontalChartView(Context context,@Nullable AttributeSet attrs,int defStyleAttr) {
    super(context,attrs,defStyleAttr);
    init(context,attrs);
  }
 
  @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
  public HorizontalChartView(Context context,int defStyleAttr,int defStyleRes) {
    super(context,defStyleAttr,defStyleRes);
    init(context,attrs);
  }
 
  /**
   * 初始化
   *
   * @param context
   * @param attrs
   */
  public void init(Context context,AttributeSet attrs) {
 
    paint = new Paint();
    paint.setColor(color_line);
 
    paint_plan = new Paint();
    paint_plan.setColor(color_plan);
 
    paint_font = new Paint();
    paint_font.setColor(color_font);
    paint_font.setTextSize(DensityUtils.dp2px(context,12));
    paint_font.setAntiAlias(true);
    paint_font.setTextAlign(Paint.Align.CENTER);
 
    paint_font2 = new Paint();
    paint_font2.setColor(color_font);
    paint_font2.setTextSize(DensityUtils.dp2px(context,12));
    paint_font2.setAntiAlias(true);
    paint_font2.setTextAlign(Paint.Align.RIGHT);
  }
 
 
  @Override
  protected void onMeasure(int widthMeasureSpec,int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec,heightMeasureSpec);
  }
  
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    int width = getWidth();
    int height = getHeight();
 
    int lift_width = (int) (width * 0.15);
    int line_width = (int) (width * 0.78);
    //獲取底部文字資訊
    Paint.FontMetrics fm = paint_font.getFontMetrics();
 
    int line_length = (int) (height - (fm.bottom - fm.top) - 4);
 
    plan_height = (int) (line_length / 12 * 0.3);
 
    for (int i = 0; i < line_num; i++) {
      canvas.save();
 
      if (i == 0) {
        ratio_num = "0";
      } else {
        ratio_num = i + "0";
      }
      //底部百分比數字
      canvas.drawText(ratio_num,lift_width + i * line_width / 10,height - 10,paint_font);
      //網路線
      canvas.drawLine(lift_width + i * line_width / 10,line_length,paint);
      canvas.restore();
    }
    //獲取月份文字資訊
    Paint.FontMetrics fm1 = paint_font2.getFontMetrics();
    for (int n = 12; n > 0; n--) {
      canvas.save();
      month_num = n + "月";
      //左側月份
      canvas.drawText(month_num,lift_width / 4 * 3,((line_length / 12)) * (13 - n) - line_length / 24 + (fm1.bottom - fm1.top) / 2,paint_font2);
      //比例圖
      canvas.drawRect(lift_width,line_length / 12 * (13 - n) - (line_length / 24 + plan_height / 2) + fm1.bottom,line_width * (ratio[n - 1] / 100) + lift_width,line_length / 12 * (13 - n) - (line_length / 24 + plan_height / 2) + plan_height + fm1.bottom,paint_plan);
 
      canvas.restore();
    }
  }
 
  /**
   * 傳入比例資訊
   *
   * @param ratio
   */
  public void setRatio(Float[] ratio) {
    this.ratio = ratio;
  }
 
}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。