Android Custom View realizes the BMI refers to several _android

Recent project needs, need to do a BMI indicator bar, first on the effect chart:

The BMI index ranges from 18 to 35, and the color of the above indicator changes as the offset changes, and the number shows the current BMI, and the following BMI is judged by the range of values. Considering the specificity of this view, the final adoption is a custom view to complete.

1. Page layout:

 <linearlayout
  android:layout_width= "fill_parent"
  android:layout_height= "100DP"
  android:layout_ marginleft= "5DP"
  android:layout_marginright= "5DP"
  android:layout_margintop= "50DP"
  android: background= "@color/white"
  android:orientation= "Horizontal" >

  <textview style=
   "@style/w_wrap_ H_wrap "
   android:layout_margintop=" @dimen/login_hei "
   android:text=" @string/bmi_text "
   android: Textcolor= "@color/gray"
   android:textsize= "@dimen/login_edit_border_margin"/>

  < Com.jxj.jwotchhelper.view.NewBmiView
   android:id= "@+id/bmiview"
   android:layout_width= "Fill_parent"
   android:layout_height= "fill_parent"/>
 </LinearLayout>

The left is the BMI text, the right is a custom view, nothing to say, the following is the specific process of view:

2. Code implementation:
creates a new Newbmiview class, inherits from the view class, and then adds the constructor method;

 public class Newbmiview extends View {/** segmented color * * * private static final int[] section
 _colors = {Color.rgb (255, 204,), Color.green, color.red};
 /** Brush * * Private Paint mpaint;
 Private Paint Textpaint;
 Private Paint Drawablepaint;
 Private Paint Drawablebmipaint;
 Private Paint Bmitextpaint;
 private int bmiwidth, Mwidth, Mheight, widthsum;
 private double value;
 private double I;

 private double BMI;
 private float valuewidth;

 Private String Bmitext;

 Defines the parameters of the calculated color private int x, y, Z;
  Public Newbmiview {Super (context);
 Initviews (context);
  Public Newbmiview (context, AttributeSet attrs) {Super (context, attrs);
 Initviews (context);
  Public Newbmiview (context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr);
 Initviews (context); } private void Initviews (context context) {} 

Then is to rewrite the two methods of Onmeasure and OnDraw, through onmeasure this method to get to the view of the wide-high, about the specific settings, you can refer to the great God of the relevant instructions:

Http://www.jb51.net/article/86061.htm

protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {
  int widthspecmode = Measurespec.getmode ( WIDTHMEASURESPEC);
  int widthspecsize = measurespec.getsize (widthmeasurespec);
  int heightspecmode = Measurespec.getmode (heightmeasurespec);
  int heightspecsize = measurespec.getsize (heightmeasurespec);
  if (Widthspecmode = = measurespec.exactly
    | | widthspecmode = = measurespec.at_most) {
   widthsum = widthspecsize;< c8/>} else {
   widthsum = 0;
  }
  if (Heightspecmode = = Measurespec.at_most
    | | heightspecmode = = measurespec.unspecified) {
   mheight = dipToPx ( );
  else {
   mheight = heightspecsize;
  }
  Setmeasureddimension (Widthsum, mheight);
 }

And then the point is OnDraw this way:

Draw a custom gradient bar Mpaint = new Paint ();
  Remove Sawtooth Mpaint.setantialias (true);
  Custom rounded radians int round = MHEIGHT/20; New Rectangle RECTF RECTBG = new RECTF (Bmiwidth, Mheight-(Mheight * 1/2), Mwidth + Bmiwidth, Mheight-(Mheight * 2/
  5)); Set gradient//clamp Repeat last color to last///mirror repeat-shaded image horizontal or vertical mirrored mode fill will have rollover effect//Repeat repeat color image horizontal or vertical lineargradient shader = New LinearGradient (Bmiwidth, Mheight-(Mheight * 1/2), Mwidth + Bmiwidth, Mheight-(Mheight * 2/5), Section_
  COLORS, NULL, Shader.TileMode.MIRROR);
  Mpaint.setshader (shader); RECT:RECTF object. The radius of the fillet in the x direction. The radius of the fillet in the ry:y direction.
  Paint: The brush that is used when drawing.

  Canvas.drawroundrect (RECTBG, round, round, mpaint);
  Draw the following small arrow Drawablepaint = new Paint ();
  Drawablepaint.setantialias (TRUE);
  Bitmap Arrowbitmap = Bitmapfactory.decoderesource (Getresources (), r.drawable.arrow_up);
  Canvas.drawbitmap (Arrowbitmap, Mwidth * 2/17 + bmiwidth, Mheight-(Mheight * 2/5) + 5, drawablepaint); Canvas.drawbitmap (Arrowbitmap, MWIdth * 7/17 + bmiwidth, Mheight-(Mheight * 2/5) + 5, drawablepaint);

  Canvas.drawbitmap (Arrowbitmap, Mwidth * 12/17 + bmiwidth, Mheight-(Mheight * 2/5) + 5, drawablepaint);
  The text below the drawing String = "thin";
  Rect textbounds = new Rect ();
  Textpaint = new Paint ();
  Textpaint.setantialias (TRUE);
  Textpaint.setcolor (Color.gray);
  Textpaint.settextsize (30);
  Gets the high width textpaint.gettextbounds of the font (text, 0, Text.length (), textbounds);
  float textWidth = Textbounds.width ();

  float textHeight = Textbounds.height (); Canvas.drawtext ("Lean", (Mwidth * 2/17)/2-textwidth/2 + bmiwidth, Mheight * 7/10 + TEXTHEIGHT/2 +, TEXTPA
  int); Canvas.drawtext ("Standard", (Mwidth * 2/17) + (Mwidth * 5/17)/2-textwidth/2 + bmiwidth, Mheight * 7/10 + Texthei
  GHT/2 + textpaint); Canvas.drawtext ("overweight", (Mwidth * 7/17) + (Mwidth * 5/17)/2-textwidth/2 + bmiwidth, Mheight * 7/10 + Texthei
  GHT/2 + textpaint); Canvas.drawtext ("FatFat ", (Mwidth * 12/17) + (Mwidth * 5/17)/2-textwidth/2 + bmiwidth, Mheight * 7/10 + TEXTHEIGHT/2 + 10,

  Textpaint);
  Draw the small square drawablebmipaint = new Paint () above the offset;
  Drawablebmipaint.setantialias (TRUE);
  Set color//by BMI to calculate color i = (value-18) * (34/17);
   if (i >= 0 && i <=) {x = (int) ((17-i) * (255/17));
   y = 204;

  z = 47;
   } if (i > && i <=) {x = (int) ((I-17) * (255/17));
   y = (int) ((34-i) * (255/17));
  z = 0;
  } drawablebmipaint.setcolor (Color.rgb (x, Y, z));

  SYSTEM.OUT.PRINTLN ("color value is" + string.valueof (x) + string.valueof (y) + string.valueof (z)); Canvas.drawrect (GetValue (), MHEIGHT/6, GetValue () + bmibitmap.getwidth (), Bmibitmap.getheight () +MHEIGHT/6, drawabl
  Ebmipaint);
  System.out.println ("offset is" + getvalue ());

  Canvas.drawbitmap (Bmibitmap, GetValue (), MHEIGHT/6, drawablepaint);
  The text String bmitext = "40.0" in the small square above which the offset is drawn; Rect bmitextbounds = new Rect ();
  Bmitextpaint = new Paint ();
  Bmitextpaint.setantialias (TRUE);
  Bmitextpaint.settextsize (35);
  Bmitextpaint.setcolor (Color.White);
  Gets the high width bmitextpaint.gettextbounds of the font (bmitext, 0, Bmitext.length (), bmitextbounds); Canvas.drawtext (Bmitext, GetValue ()-(Bmitextbounds.width ()/2) + Bmiwidth, MHEIGHT/3 + (Bmitextbounds.height ()/

 3), bmitextpaint);

One of the things to note is that the color value of small squares here I was based on the size of the BMI, calculated RGB Three primary colors of the gradient value, did not find the system with the rendering of the gradient bar method, the color value provided, so this method to calculate, there will be a certain error.
Then it is about TextView, because the bandwidth is high, so when drawing textview, you need to consider the width of the height and then draw.
Passing parameters by set method

public void Setbmi (double BMI) {
  this.value = BMI;
  Sets the color
  if (value <) {
   this.value =.
  } else if (value >) {
   this.value =;
  }
  Invalidate ();
 }

 public void Setbmitext (String bmitext) {
  this.bmitext = Bmitext;
 }

In the end it was applied in the activity:

bmiview= (Newbmiview) GetView (). Findviewbyid (R.id.bmiview);
  Pass the BMI index to the past
  Bmiview.setbmi (a);
  Bmiview.setbmitext ("35.0");

Then it achieves the desired effect, the code is a bit messy ~

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.