溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Android中怎么實(shí)現(xiàn)一個(gè)折線走勢圖

發(fā)布時(shí)間:2021-07-12 11:27:51 來源:億速云 閱讀:141 作者:Leah 欄目:編程語言

今天就跟大家聊聊有關(guān)Android中怎么實(shí)現(xiàn)一個(gè)折線走勢圖,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。

//獲取自定義屬性private void obtainStyledAttrs(AttributeSet attrs) {  TypedArray typedArray = getContext().obtainStyledAttributes(attrs,R.styleable.High_LowChartView);  mTextSize = (int)typedArray.getDimension(R.styleable.High_LowChartView_hl_chart_textsize,mTextSize);  mTextColor = typedArray.getColor(R.styleable.High_LowChartView_hl_chart_textcolor,mTextColor);  if (typedArray.getString(R.styleable.High_LowChartView_hl_hchart_text)!=null){   mHighText = typedArray.getString(R.styleable.High_LowChartView_hl_hchart_text);  }  if(typedArray.getString(R.styleable.High_LowChartView_hl_hchart_text)!=null){   mLowText = typedArray.getString(R.styleable.High_LowChartView_hl_hchart_text);  }  mHighPointColor = typedArray.getColor(R.styleable.High_LowChartView_hl_chart_high_pointcolor,mHighPointColor);  mLowPointColor = typedArray.getColor(R.styleable.High_LowChartView_hl_chart_low_pointcolor,mLowPointColor);  mMainLineColor = typedArray.getColor(R.styleable.High_LowChartView_hl_chart_mianlinecolor,mMainLineColor);  mChartLineColor = typedArray.getColor(R.styleable.High_LowChartView_hl_chart_chartlinecolor,mChartLineColor);  mChartDistance = (int) typedArray.getDimension(R.styleable.High_LowChartView_hl_chart_distance,mChartDistance);  init();  typedArray.recycle(); }//重寫onMeasure @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  super.onMeasure(widthMeasureSpec, heightMeasureSpec);  int width = MeasureSpec.getSize(widthMeasureSpec);  int height = measureHeight(heightMeasureSpec);  setMeasuredDimension(width,height); }//計(jì)算view需要的高度 private int measureHeight(int heightMeasureSpec) {  int result = 0;  int mode = MeasureSpec.getMode(heightMeasureSpec);  int size = MeasureSpec.getSize(heightMeasureSpec);  if(mode == MeasureSpec.EXACTLY){//如果給了具體值則直接用   result=size;  }else {  //否則高度等于字高與球直徑的最大值   textHeight = (mPaint.descent()-mPaint.ascent());   float halfHeight = Math.max(textHeight, mPointMaxHeight) / 2;   result = (int) (halfHeight+mChartDistance);   //如果模式為AT_MOST即:測量高度不能超過父類給定的高度則取測量結(jié)果與size的最小值   if(mode==MeasureSpec.AT_MOST){    result = Math.min(result,size);   }  }  return result; } @Override protected void onDraw(Canvas canvas) {  super.onDraw(canvas);  if(!initMeasure()) return;  canvas.save();  //1先畫兩條主線  mPaint.setColor(mMainLineColor);  mPaint.setStrokeWidth(mainLineHeight);  //high Line  canvas.drawLine(textWidth+DEFAULT_OFFSETTING,mainLinePosition,w,mainLinePosition,mPaint);  //low Line  canvas.drawLine(textWidth+DEFAULT_OFFSETTING,mainLinePosition+mChartDistance,w,mainLinePosition+mChartDistance,mPaint);  //2再畫文字  mPaint.setColor(mTextColor);  mPaint.setTextAlign(Paint.Align.LEFT);  Paint.FontMetricsInt fontMetrics = mPaint.getFontMetricsInt();  RectF rt1=new RectF(0,mainLinePosition-textHeight/2,w,mainLinePosition+textHeight/2);  int baseline = (int) ((rt1.bottom + rt1.top - fontMetrics.bottom - fontMetrics.top) / 2);  canvas.drawText(mHighText,0,baseline,mPaint);  canvas.drawText(mLowText,0,baseline+mChartDistance,mPaint);  //3初始化小球圓心  canvas.translate(textWidth+DEFAULT_OFFSETTING,0);  for (int i=0;i<mPointNum;i++){   //high point   if (mList.get(i).isHighPoint){//    mPaint.setColor(mHighPointColor);//    canvas.drawCircle((pointHeight/2+offsetX)+i*(pointHeight+offsetX), mainLinePosition, pointHeight/2, mPaint);    //存入小球的圓心坐標(biāo)    mList.get(i).setXY((pointHeight/2+offsetX)+i*(pointHeight+offsetX),mainLinePosition);   }else {    //low point//    mPaint.setColor(mLowPointColor);//    canvas.drawCircle((pointHeight/2+offsetX)+i*(pointHeight+offsetX), mainLinePosition+mChartDistance, pointHeight/2, mPaint);    mList.get(i).setXY((pointHeight/2+offsetX)+i*(pointHeight+offsetX),mainLinePosition+mChartDistance);   }  }  //4連接小球  if(mList.size()>=2){   mPaint.setColor(mChartLineColor);   mPaint.setStrokeWidth(chartLineWidth);   for (int i=0;i<mPointNum-1;i++){    canvas.drawLine(mList.get(i).cx,mList.get(i).cy,mList.get(i+1).cx,mList.get(i+1).cy,mPaint);   }  }  //5繪制小球(為了不讓線遮蓋小球)  for (int i=0;i<mPointNum;i++){   //high point   if (mList.get(i).isHighPoint){    mPaint.setColor(mHighPointColor);    //low point   }else {    mPaint.setColor(mLowPointColor);   }   canvas.drawCircle(mList.get(i).cx, mList.get(i).cy, pointHeight/2, mPaint);  }  canvas.restore(); } /**  * 根據(jù)小球數(shù)量去動(dòng)態(tài)測量一些屬性  * @return  */ private boolean initMeasure() {  //根據(jù)傳進(jìn)來的point數(shù)量計(jì)算小點(diǎn)的大小,MainLine的線寬,折線的線寬   /* 如果小球數(shù)量在1-10個(gè),主線高度為3dip   * 如果小球數(shù)量在10-20個(gè),主線高度設(shè)置為2dip   * 如果小球數(shù)量超過20個(gè),主線高度設(shè)置為1dp   */  mPointNum=mList.size();//  if(mPointNum==0) return false;  if(10>mPointNum){   mainLineHeight=dp2px(3);  }else if(10<=mPointNum&&20>mPointNum){   mainLineHeight = dp2px(2);  }else {   mainLineHeight = dp2px(1);  }  //主線長度等于總寬度-(文字寬度+30px)  textWidth=Math.max(mPaint.measureText(mHighText),mPaint.measureText(mLowText));  mainLineWidth = (int) (w-(textWidth+DEFAULT_OFFSETTING));  /*小球直徑應(yīng)該由主線長度與小球數(shù)量決定*/  //理想直徑  float ideaDia = mainLineWidth / (mPointNum + (mPointNum + 1));  //小球直徑不能大于最大直徑  if(ideaDia>mPointMaxHeight){//   Log.i("TTT","ideaDia>mPointMaxHeight");   pointHeight = mPointMaxHeight;   offsetX=(mainLineWidth-mPointNum*pointHeight)/(mPointNum+1);   //(極端情況)如果小球直徑小于線高,為小球直徑+2px  }else if(ideaDia<=mainLineHeight){//   Log.i("TTT","ideaDia<=mPointMaxHeight");   pointHeight = mainLineHeight+2;   offsetX=(mainLineWidth-mPointNum*pointHeight)/(mPointNum+1);  }else {//   Log.i("TTT"," pointHeight=offsetX=ideaDia");   pointHeight=offsetX=ideaDia;  }  //主線位置  mainLinePosition = (h-mChartDistance)/2;  //折線寬度  chartLineWidth = mainLineHeight/2;  return true; }//刷新小球集合 public void setPointList(List<AiyingPoint> list){  if (list==null&&list.size()==0) return;  mList.clear();  if (list.size()>150) {   mList.addAll(list.subList(0,150));  } else {   mList.addAll(list);  }  invalidate(); }

使用示例

<com.android.view.High_LowChartView   android:id="@+id/hl_chart"   android:layout_below="@+id/tv_state"   android:layout_marginLeft="15dp"   android:layout_marginRight="15dp"   android:layout_width="match_parent"   android:layout_height="70dp"   app:hl_chart_mianlinecolor="#CDCDCD"   app:hl_chart_distance="55dp"   app:hl_chart_low_pointcolor="#999999"   app:hl_chart_high_pointcolor="#F70919"   app:hl_chart_textsize="13sp"   app:hl_chart_textcolor="#2f2f2f"   app:hl_chart_chartlinecolor="#999999" />

看完上述內(nèi)容,你們對(duì)Android中怎么實(shí)現(xiàn)一個(gè)折線走勢圖有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI