Android自定义View实现BMI指数条

最近项目需要,需要做一个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");

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android下拉刷新ListView——RTPullListView(demo)

    下拉刷新在越来越多的App中使用,已经形成一种默认的用户习惯,遇到列表显示的内容时,用户已经开始习惯性的拉拉.在交互习惯上已经形成定性.之前在我的文章<IOS学习笔记34-EGOTableViewPullRefresh实现下拉刷新>中介绍过如何在IOS上实现下拉刷新的功能.今天主要介绍下在Android上实现下拉刷新的Demo,下拉控件参考自Github上开源项目PullToRefresh,并做简单修改.最终效果如下:                         工程结构如下: 使用过程中

  • android TextView设置中文字体加粗实现方法

    英文设置加粗可以在xml里面设置: 复制代码 代码如下: <SPAN style="FONT-SIZE: 18px">android:textStyle="bold"</SPAN> 英文还可以直接在String文件里面直接这样填写: 复制代码 代码如下: <string name="styled_text">Plain, <b>bold</b>, <i>italic</

  • android WebView加载html5介绍

    Android设备多分辨率的问题 Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示 Android浏览器和WebView默认为mdpi.hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍 三种解决方式:1 viewport属性 2 CSS控制 3 JS控制 1 viewport属性放在HTML的<meta>中 Html代码 复制代码 代码如下: <SPANstyle="FONT-SIZE: x-small"> <

  • android开发之横向滚动/竖向滚动的ListView(固定列头)

    由于项目需要,我们需要一个可以横向滚动的,又可以竖向滚动的 表格.而且又要考虑大数据量(行)的展示视图.经过几天的研究终于搞定,做了一个演示.贴图如下:      好吧.让我们看思路是什么样的: 1. 上下滚动直接使用 listView来实现. 2. 左右滚动使用HorizontalScrollView,来处理滚动.我写一个类MyHScrollView继承 自它. 2.1 . ListView里的每行(row)分为 两部分,不滚动的和可滚动的区域.比如本demo的第一列,就是静态的.而后面的所有

  • android开发教程之listview使用方法

    首先是布局文件,这里需要两个布局文件,一个是放置列表控件的Activity对应的布局文件 main.xml,另一个是ListView中每一行信息显示所对应的布局  list_item.xml    这一步需要注意的问题是ListView 控件的id要使用Android系统内置的 android:id="@android:id/list"   [注意形式] main.xml 复制代码 代码如下: <?xml version="1.0" encoding=&quo

  • android listview优化几种写法详细介绍

    这篇文章只是总结下getView里面优化视图的几种写法,就像孔乙己写茴香豆的茴字的几种写法一样,高手勿喷,勿笑,只是拿出来分享,有错误的地方欢迎大家指正,谢谢. listview Aviewthatshowsitemsinaverticallyscrollinglist. 一个显示一个垂直的滚动子项的列表视图在android开发中,使用listview的地方很多,用它来展现数据,成一个垂直的视图.使用listview是一个标准的适配器模式,用数据--,界面--xml以及适配器--adapter,

  • android自定义进度条渐变色View的实例代码

    最近在公司,项目不是很忙了,偶尔看见一个兄台在CSDN求助,帮忙要一个自定义的渐变色进度条,我当时看了一下进度条,感觉挺漂亮的,就尝试的去自定义view实现了一个,废话不说,先上图吧! 这个自定义的view,完全脱离了android自带的ProgressView,并且没使用一张图片,这样就能更好的降低程序代码上的耦合性! 下面我贴出代码  ,大概讲解一下实现思路吧! 复制代码 代码如下: package com.spring.progressview; import android.conten

  • Android自定义Adapter的ListView的思路及代码

    在开发中,我们经常使用到ListView这个控件.Android的API也提供了许多创建ListView适配器的快捷方式.例如ArrayAdapter.SimpleAdapter和SimpleCursorAdapter等.但你是否发现,如果采用这些系统自带的适配器,对于事件的响应只能局限在一个行单位.假设一行里面有一个按钮和一个图片控件,它们之间的响应操作是不一样的.若采用系统自带的适配器,就不能精确到每个控件的响应事件.这时,我们一般采取自定义适配器来实现这个比较精确地请求. ListView

  • android imageview图片居中技巧应用

    做UI布局,尤其是遇到比较复杂的多重LinearLayout嵌套,常常会被一些比较小的问题困扰上半天,比如今天在使用ImageView的时候,想让其居中显示,可是无论怎样设置layout_gravity属性,都无法达到效果,部分代码如下: [java] 复制代码 代码如下: <LinearLayout android:layout_width="wrap_content" android:layout_height="fill_parent" android:

  • Android TextView设置背景色与边框的方法详解

    1.在drawable文件夹下面创建setbar_bg.xml 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- 背景色 -->    <solid android:color="#FFE4B5&q

随机推荐