Android自定义View实现BMI指数条
Android自定义View实现BMI指数条
发布时间:2016-12-28 来源:查字典编辑
摘要:最近项目需要,需要做一个BMI指数的指示条,先上效果图:BMI指数从18到35,然后上面指示条的颜色会随着偏移量的变化而改变,数字显示当前的...

最近项目需要,需要做一个BMI指数的指示条,先上效果图:

Android自定义View实现BMI指数条1

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

然后就达到了预期的效果,代码有点乱~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持查字典教程网。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新安卓软件开发学习
热门安卓软件开发学习
编程开发子分类