最近项目需要，需要做一个BMI指数的指示条，先上效果图：
BMI指数从18到35，然后上面指示条的颜色会随着偏移量的变化而改变，数字显示当前的BMI指数，下面的BMI标准也是根据不同数值的范围来判断的。考虑到这个view的特殊性，最后采用的是自定义的view来完成的。
1.页面布局：
<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>
左边是BMI文字，右边是自定义的view，没啥说的，下面是view的具体过程：
2.代码实现： 新建一个NewBmiView类，并且继承自view类，然后添加构造方法；
public class NewBmiView extends View { /** 分段颜色 */ private static final int[] SECTION_COLORS = { Color.rgb(255, 204, 47), Color.GREEN, Color.RED }; /** 画笔 */ 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; // 定义计算颜色的参数 private int x, y, z; public NewBmiView(Context context) { super(context); initviews(context); } public NewBmiView(Context context, AttributeSet attrs) { super(context, attrs); initviews(context); } public NewBmiView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initviews(context); } private void initviews(Context context) { }
然后就是重写onMeasure与onDraw这两个方法，通过onMeasure这个方法获取到了view的宽高，关于具体设置，可以参考鸿洋大神的相关说明：
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; } else { widthSum = 0; } if (heightSpecMode == MeasureSpec.AT_MOST || heightSpecMode == MeasureSpec.UNSPECIFIED) { mHeight = dipToPx(15); } else { mHeight = heightSpecSize; } setMeasuredDimension(widthSum, mHeight); }
然后重点就是onDraw这个方法了：
// 画自定义的渐变条 mPaint = new Paint(); // 去除锯齿 mPaint.setAntiAlias(true); // 自定义圆角的弧度 int round = mHeight / 20; // 新建矩形 RectF rectBg = new RectF(bmiwidth, mHeight - (mHeight * 1 / 2), mWidth + bmiwidth, mHeight - (mHeight * 2 / 5)); // 设置渐变色 // CLAMP重复最后一个颜色至最后 // MIRROR重复着色的图像水平或垂直方向已镜像方式填充会有翻转效果 // REPEAT重复着色的图像水平或垂直方向 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对象。x方向上的圆角半径。ry：y方向上的圆角半径。paint：绘制时所使用的画笔。 canvas.drawRoundRect(rectBg, round, round, mPaint); // 画下面的小箭头 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); // 画下方的文字 String text = "偏瘦"; Rect textBounds = new Rect(); textPaint = new Paint(); textPaint.setAntiAlias(true); textPaint.setColor(Color.GRAY); textPaint.setTextSize(30); // 获取字体的高宽 textPaint.getTextBounds(text, 0, text.length(), textBounds); float textWidth = textBounds.width(); float textHeight = textBounds.height(); canvas.drawText("偏瘦", (mWidth * 2 / 17) / 2 - textWidth / 2 + bmiwidth, mHeight * 7 / 10 + textHeight / 2 + 10, textPaint); canvas.drawText("标准", (mWidth * 2 / 17) + (mWidth * 5 / 17) / 2 - textWidth / 2 + bmiwidth, mHeight * 7 / 10 + textHeight / 2 + 10, textPaint); canvas.drawText("超重", (mWidth * 7 / 17) + (mWidth * 5 / 17) / 2 - textWidth / 2 + bmiwidth, mHeight * 7 / 10 + textHeight / 2 + 10, textPaint); canvas.drawText("肥胖", (mWidth * 12 / 17) + (mWidth * 5 / 17) / 2 - textWidth / 2 + bmiwidth, mHeight * 7 / 10 + textHeight / 2 + 10, textPaint); // 画上方偏移的小方块 drawableBMIPaint = new Paint(); drawableBMIPaint.setAntiAlias(true); // 设置颜色 // 通过BMI来RGB计算颜色 i = (value - 18) * (34 / 17); if (i >= 0 && i <= 17) { x = (int) ((17 - i) * (255 / 17)); y = 204; z = 47; } if (i > 17 && i <= 34) { x = (int) ((i - 17) * (255 / 17)); y = (int) ((34 - i) * (255 / 17)); z = 0; } drawableBMIPaint.setColor(Color.rgb(x, y, z)); System.out.println("颜色值为" + String.valueOf(x) + String.valueOf(y) + String.valueOf(z)); canvas.drawRect(getvalue(), mHeight / 6, getvalue() + bmiBitmap.getWidth(), bmiBitmap.getHeight()+mHeight / 6, drawableBMIPaint); System.out.println("偏移量为" + getvalue()); canvas.drawBitmap(bmiBitmap, getvalue(), mHeight / 6, drawablePaint); // 画上方偏移的小方块里面的文字 String bmitext = "40.0"; Rect bmitextBounds = new Rect(); bmiTextpaint = new Paint(); bmiTextpaint.setAntiAlias(true); bmiTextpaint.setTextSize(35); bmiTextpaint.setColor(Color.WHITE); // 获取字体的高宽 bmiTextpaint.getTextBounds(bmitext, 0, bmitext.length(), bmitextBounds); canvas.drawText(bmiText, getvalue() - (bmitextBounds.width() / 2) + bmiwidth, mHeight / 3 + (bmitextBounds.height() / 3), bmiTextpaint);
其中需要注意的是，这里小方块的颜色值我是根据BMI值大小，算出RGB三原色的渐变值，没有找到系统自带渲染渐变条的方法中，提供的颜色值，所以就用这种方法计算出来，会有一定得误差。 然后就是关于Textview，因为自带宽高，所以在绘制Textview的时候，需要考虑宽高再绘制。 通过set方法传递参数
public void setBmi(double bmi) { this.value = bmi; // 设置颜色 if (value < 18) { this.value = 18; } else if (value > 35) { this.value = 35; } invalidate(); } public void setBmiText(String bmiText) { this.bmiText = bmiText; }
最后就是在activity中应用了：
bmiview= (NewBmiView) getView().findViewById(R.id.bmiview); //将BMI指数传递过去 bmiview.setBmi(35); bmiview.setBmiText("35.0");
然后就达到了预期的效果，代码有点乱~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
纵然走过那么多城市，对于未知的风景，还是好奇。
