Android自定義View實現(xiàn)BMI指數(shù)條
更新時間：2016年06月07日 10:30:21 作者：tyktfj0910
這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)BMI指數(shù)條，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最近項目需要，需要做一個BMI指數(shù)的指示條，先上效果圖：
BMI指數(shù)從18到35，然后上面指示條的顏色會隨著偏移量的變化而改變，數(shù)字顯示當前的BMI指數(shù)，下面的BMI標準也是根據不同數(shù)值的范圍來判斷的。考慮到這個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.代碼實現(xiàn)：
新建一個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;
// 定義計算顏色的參數(shù)
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://m.fzitv.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三原色的漸變值，沒有找到系統(tǒng)自帶渲染漸變條的方法中，提供的顏色值，所以就用這種方法計算出來，會有一定得誤差。
然后就是關于Textview，因為自帶寬高，所以在繪制Textview的時候，需要考慮寬高再繪制。
通過set方法傳遞參數(shù)
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指數(shù)傳遞過去
bmiview.setBmi(35);
bmiview.setBmiText("35.0");
然后就達到了預期的效果，代碼有點亂~
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要介紹了Android編程獲取Wifi名稱(SSID)的方法,涉及Android基于WifiManager和WifiInfo操作Wifi信息的相關實現(xiàn)技巧,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了Android解析XML文件升級APK的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
相信Android的日間/夜間模式切換相信大家在平時使用 APP 的過程中都遇到過，比如知乎、簡書中就有相關的模式切換。實現(xiàn)日間/夜間模式切換的方案也有許多種，趁著今天有空來講一下日間/夜間模式切換的幾種實現(xiàn)方案，也可以做一個橫向的對比來看看哪種方案最好。2016-09-09
activity 獲取rootView 設置backGroundColor的方法
下面小編就為大家?guī)硪黄猘ctivity 獲取rootView 設置backGroundColor的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要為大家詳細介紹了Android手勢識別功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
Compose開發(fā)之動畫藝術探索及實現(xiàn)示例
這篇文章主要為大家介紹了Compose開發(fā)之動畫藝術探索及實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了Android仿優(yōu)酷視頻的懸浮窗播放效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
android將圖片轉換存到數(shù)據庫再從數(shù)據庫讀取轉換成圖片實現(xiàn)代碼
有時候我們想把圖片存入到數(shù)據庫中，盡管這不是一種明智的選擇，但有時候還是不得以會用到，下面說說將圖片轉換成byte[]數(shù)組存入到數(shù)據庫中去，并從數(shù)據庫中取出來轉換成圖像顯示出來2013-11-11
這篇文章主要為大家詳細介紹了Android自定義廣播接收，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了Android中的事件分發(fā)機制的相關資料，幫助大家更好的理解和學習使用Android，感興趣的朋友可以了解下2021-04-04