Android自定义曲线图

释放双眼,带上耳机,听听看~!

公司做个医疗项目,需要画血压和血糖折线图.在CSDN和GitHUB上都没找到合适的,所以集百家之长,整理了一份.

先看效果图

血压核心代码:

/**
* 画出中间渐变线
**/
private void drawCenterLine(Canvas paramCanvas) {
LinearGradient localLinearGradient = new LinearGradient(0.0F, 0.0F, 0.0F, this.height / 2, -1, -11300384, Shader.TileMode.MIRROR);
this.mCenterVerticalLinePaint.setShader(localLinearGradient);
paramCanvas.drawLine(this.width / 2, this.height * 2 / 28, this.width / 2, this.height * 25 / 28, this.mCenterVerticalLinePaint);
}
/**
* 画出服务器数值折线
**/
private void drawLinesBtwPoints(Canvas canvas) {
int j = (int) ((double) ((float) width / mItemDistance) + 6.5D) / 2;
if (mBloodPresure != null && mBloodPresure.length > 0) {
int i = mBloodPresure.length - 1;
while (i >= 0) {
//这个控制初始的圆心起始线,位于渐变重合.
float f = ((float) (width / 2) - (float) (mBloodPresure.length - 1 - i) * mItemDistance) + mOffsetX;
float f1 = getBloodPresurePointY(mBloodPresure[i].systolic);
//血压的高低压的连线
canvas.drawLine(f, DP_5 + f1, f, getBloodPresurePointY(mBloodPresure[i].diastolic) - DP_5, mPointLinePaint);
//实心及空心
if (i == mBloodPresure.length - 1 - Math.round(mOffsetX / mItemDistance)) {
mPointPaint.setStyle(android.graphics.Paint.Style.FILL_AND_STROKE);
mSelectedPointPaint.setStyle(android.graphics.Paint.Style.FILL_AND_STROKE);
if (mIndex != i) {
mIndex = i;
if (mListener != null) {
mListener.onSelected(mIndex, mBloodPressureRecords.get(mIndex));
}
}
} else {
mPointPaint.setStyle(android.graphics.Paint.Style.STROKE);
mSelectedPointPaint.setStyle(android.graphics.Paint.Style.STROKE);
}
if (i >= mIndex - j && i <= mIndex + j) {
//高压球子
canvas.drawCircle(f, getBloodPresurePointY(mBloodPresure[i].systolic), DP_5, mPointFillPaint);
if (mBloodPresure[i].systolic >= mSystolicHigh || mBloodPresure[i].systolic <= mSystolicLow) {
canvas.drawCircle(f, getBloodPresurePointY(mBloodPresure[i].systolic), DP_5, mSelectedPointPaint);
canvas.drawBitmap(getBitmapFromTV(mBloodPresure[i].systolic), f - DP_20_5, getBloodPresurePointY(mBloodPresure[i].systolic) - DP_32, mSelectedPointPaint);
} else {
canvas.drawCircle(f, getBloodPresurePointY(mBloodPresure[i].systolic), DP_5, mPointPaint);
}
//低压球子
canvas.drawCircle(f, getBloodPresurePointY(mBloodPresure[i].diastolic), DP_2, mPointFillPaint);
if (mBloodPresure[i].diastolic >= mDiastolicHigh || mBloodPresure[i].diastolic <= mDiastolicLow) {
canvas.drawCircle(f, getBloodPresurePointY(mBloodPresure[i].diastolic), DP_5, mSelectedPointPaint);
canvas.drawBitmap(getBitmapFromBottomTV(mBloodPresure[i].diastolic), f - DP_20_5, getBloodPresurePointY(mBloodPresure[i].diastolic) + DP_6, mSelectedPointPaint);
} else {
canvas.drawCircle(f, getBloodPresurePointY(mBloodPresure[i].diastolic), DP_5, mPointPaint);
}
}
i--;
}
}
}

血糖核心代码:

/**
* 画出中间渐变线
**/
private void drawCenterLine(Canvas canvas) {
int i = getWidth();
int j = getHeight();
LinearGradient lineargradient = new LinearGradient(0.0F, 0.0F, 0.0F, j / 2, -1, 0xfff0715f, android.graphics.Shader.TileMode.MIRROR);
mCenterVerticalLinePaint.setShader(lineargradient);
canvas.drawLine(i / 2, (j * 3) / 28, i / 2, (j * 25) / 28, mCenterVerticalLinePaint);
}
private void drawLinesBtwPoints(Canvas canvas) {
//不为空往下走
if (mBloodGlucose != null && mBloodGlucose.length > 0) {
int j = getWidth();
int k = (int) (j / this.mItemDistance + 6.5D) / 2;
int v = this.mBloodGlucose.length - 1;
Point[] arrayOfPoint = new Point[this.mBloodGlucose.length];
//这个控制初始的圆心起始线,位于渐变重合
for (int i = mBloodGlucose.length - 1; i >= 0; i--) {
arrayOfPoint[i] = new Point((int) (((float) (j / 2) - (float) (mBloodGlucose.length - 1 - i) * mItemDistance) + mOffsetX), (int) getBloodGlucosePointY(mBloodGlucose[i]));
}
//当数目大于2条绘制曲线
if ((arrayOfPoint != null) && (arrayOfPoint.length >= 2)) {
Point[] kfc;
for (int w = 0; w < arrayOfPoint.length; w++) {
kfc = arrayOfPoint;
canvas.drawPath(smoothPathWithPointsOne(kfc), this.mCurvePaint);
}
}
Object localObject;
while (v >= 0) {
localObject = arrayOfPoint[v];
if (v == mBloodGlucose.length - 1 - Math.round(mOffsetX / mItemDistance)) {
//实心
mPointPaint.setStyle(android.graphics.Paint.Style.FILL_AND_STROKE);
mSelectedPointPaint.setStyle(android.graphics.Paint.Style.FILL_AND_STROKE);
if (mIndex != v) {
mIndex = v;
if (mListener != null) {
mListener.onSelected(mIndex, mBloodGlucoseRecords.get(mIndex));
}
}
} else {
//空心
mPointPaint.setStyle(android.graphics.Paint.Style.STROKE);
mSelectedPointPaint.setStyle(android.graphics.Paint.Style.STROKE);
}
if (v >= mIndex - k && v <= mIndex + k) {
canvas.drawCircle(((Point) (localObject)).x, getBloodGlucosePointY(mBloodGlucose[v]), dp2Px(5F), mPointFillPaint);
if (mBloodGlucose[v] >= mHigh) {
canvas.drawCircle(((Point) (localObject)).x, getBloodGlucosePointY(mBloodGlucose[v]), dp2Px(5F), mSelectedPointPaint);
canvas.drawBitmap(getBitmapFromTV(mBloodGlucose[v]), ((Point) (localObject)).x - dp2Px(20.5F), getBloodGlucosePointY(mBloodGlucose[v]) - (float) dp2Px(32F), mSelectedPointPaint);
} else if (mBloodGlucose[v] <= mLow) {
canvas.drawCircle(((Point) (localObject)).x, getBloodGlucosePointY(mBloodGlucose[v]), dp2Px(5F), mSelectedPointPaint);
canvas.drawBitmap(getBitmapFromBottomTV(mBloodGlucose[v]), ((Point) (localObject)).x - dp2Px(20.5F), getBloodGlucosePointY(mBloodGlucose[v]) + (float) dp2Px(6F), mSelectedPointPaint);
} else {
canvas.drawCircle(((Point) (localObject)).x, getBloodGlucosePointY(mBloodGlucose[v]), dp2Px(5F), mPointPaint);
}
}
v--;
}
}
}

补充:有朋友需要布局文件,那么在这提供一下

血压

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical">
<!--血压趋势图-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/ds_30dp">
<!--横向-->
<LinearLayout
android:id="@+id/ll_high_and_low"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_high_pressure"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="120"
android:textColor="#5390e0"
android:textSize="28sp"
tools:ignore="HardcodedText" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="/"
android:textColor="#5390e0"
android:textSize="@dimen/ds_28sp"
tools:ignore="HardcodedText" />
<TextView
android:id="@+id/tv_low_pressure"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="80"
android:textColor="#5390e0"
android:textSize="28sp"
tools:ignore="HardcodedText" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="mmHg"
android:textColor="#5390e0"
android:textSize="@dimen/ds_14sp"
tools:ignore="HardcodedText" />
</LinearLayout>
<TextView
android:id="@+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ll_high_and_low"
android:layout_centerHorizontal="true"
android:layout_marginTop="@dimen/ds_16dp"
android:text="时间"
android:textColor="#5390e0"
android:textSize="@dimen/ds_14sp"
tools:ignore="HardcodedText" />
</RelativeLayout>
<com.yc.hospital.myview.BloodPressureTrendView
android:id="@+id/blood_pressure_trend"
android:layout_marginTop="@dimen/ds_30dp"
android:layout_width="match_parent"
android:layout_height="@dimen/ds_300dp"
android:layout_gravity="center"
/>
</LinearLayout>

血糖

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:background="@color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/ds_23dp"
android:layout_marginRight="@dimen/ds_23dp"
android:layout_marginTop="@dimen/ds_30dp"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_one"
android:layout_width="@dimen/ds_90dp"
android:layout_height="@dimen/ds_27dp"
android:layout_marginRight="@dimen/ds_10dp"
android:layout_weight="1"
android:background="@drawable/bg_big_f0605f_thirteen_round"
android:gravity="center"
android:text="空腹"
android:textColor="@color/white"
tools:ignore="HardcodedText,RtlHardcoded" />
<TextView
android:id="@+id/tv_two"
android:layout_width="@dimen/ds_90dp"
android:layout_height="@dimen/ds_27dp"
android:layout_marginLeft="@dimen/ds_10dp"
android:layout_marginRight="@dimen/ds_10dp"
android:layout_weight="1"
android:background="@drawable/bg_small_f0605f_thirteen_round"
android:gravity="center"
android:text="餐后2小时"
android:textColor="@color/cs_f0605f"
tools:ignore="HardcodedText" />
<TextView
android:id="@+id/tv_three"
android:layout_width="@dimen/ds_90dp"
android:layout_height="@dimen/ds_27dp"
android:layout_marginLeft="@dimen/ds_10dp"
android:layout_weight="1"
android:background="@drawable/bg_small_f0605f_thirteen_round"
android:gravity="center"
android:text="随机"
android:textColor="@color/cs_f0605f"
tools:ignore="HardcodedText,RtlHardcoded" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/ds_50dp">
<!--横向-->
<LinearLayout
android:id="@+id/ll_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_sugar_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5.0"
android:textColor="@color/cs_f0605f"
android:textSize="28sp"
tools:ignore="HardcodedText" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="mmol/L"
android:textColor="@color/cs_f0605f"
android:textSize="@dimen/ds_14sp"
tools:ignore="HardcodedText" />
</LinearLayout>
<TextView
android:id="@+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ll_value"
android:layout_centerHorizontal="true"
android:layout_marginTop="@dimen/ds_16dp"
android:text="时间"
android:textColor="@color/cs_f0605f"
android:textSize="@dimen/ds_14sp"
tools:ignore="HardcodedText" />
</RelativeLayout>
<!--血糖趋势图-->
<com.yc.hospital.myview.BloodGlucoseTrendView
android:id="@+id/blood_glucose_trend"
android:layout_marginTop="@dimen/ds_40dp"
android:layout_width="match_parent"
android:visibility="visible"
android:layout_height="200dp" />
</LinearLayout>

下载地址:https://download.csdn.net/download/qq_35874340/10937322

人已赞赏
Android文章

android开发获取手机里的所有应用,点击并响应

2020-3-4 14:55:38

Android文章

Android正则表达式深度解析

2020-3-5 10:13:25

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索