android 自定义心电图,手把手教你打造一个心电图效果View Android自定义View(示例代码)...
大家好,看我像不像蘑菇…因为我在学校呆的发霉了。
思而不学则殆
丽丽说得对,我有奇怪的疑问,大都是思而不学造成的,在我书读不够的情况下想太多,大多等于白想
,所以革命没成功,同志仍需努力。
好了废话不说了,由于布总要做一个心电图的玩意,所以做来练练手,总之拿到的UI图如下:
做好的效果如下:
拿到图,先做一些简单的分析。呃..
背景表格的绘制
心电图的绘制
背景表格的绘制:
首先drawColor黑色,然后用循环来画线、
心电图的绘制:
看样子是path,应该没问题。
于是就大干一番,按照这俩步骤画完了。。结果发现,嗯。。确实画上去了,关键怎么让他动呢。。 轻而易举想到scrollBy吧。然后你就发现。。背景也跟着变了。。 遇到问题就要解决。。所以这里投机取巧一下 把两个View分离,即背景是一个View,折线图是一个View。
首先,创建一个View,用来做背景View。他有一些属性,因为这些View本来是一个,后来又有一个折现View需要相同的属性,所以索性偷懒改成protected修饰。。
转载请注明出处:http://blog.csdn.net/wingichoy/article/details/51023865
public class CardiographView extends View {
//画笔
protected Paint mPaint;
//折现的颜色
protected int mLineColor = Color.parseColor("#76f112");
//网格颜色
protected int mGridColor = Color.parseColor("#1b4200");
//小网格颜色
protected int mSGridColor = Color.parseColor("#092100");
//背景颜色
protected int mBackgroundColor = Color.BLACK;
//自身的大小
protected int mWidth,mHeight;
//网格宽度
protected int mGridWidth = 50;
//小网格的宽度
protected int mSGridWidth = 10;
//心电图折现
protected Path mPath ;
定义了这些属性,在构造器里初始化一下画笔和Path
public CardiographView(Context context) {
this(context,null);
}
public CardiographView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public CardiographView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaint = new Paint();
mPath = new Path();
}
接下来拿到自身的宽高。注意为了简化例子,这里就不测量了
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
mWidth = w;
mHeight = h;
super.onSizeChanged(w, h, oldw, oldh);
}
准备工作都完成,开始绘制背景,创建一个drawBackground(Canvas canvas)方法。
可以想到,用for循环来画横线竖线。横线的起始x坐标都是0,终止x坐标是mWidth, y坐标为i*mGridWidth(网格宽度),我们要拿到网格的个数,即宽高除以网格宽度,具体操作看代码:
private void initBackground(Canvas canvas) {
canvas.drawColor(mBackgroundColor);
//画小网格
//竖线个数
int vSNum = mWidth /mSGridWidth;
//横线个数
int hSNum = mHeight/mSGridWidth;
mPaint.setColor(mSGridColor);
mPaint.setStrokeWidth(2);
//画竖线
for(int i = 0;i
canvas.drawLine(i*mSGridWidth,0,i*mSGridWidth,mHeight,mPaint);
}
//画横线
for(int i = 0;i
canvas.drawLine(0,i*mSGridWidth,mWidth,i*mSGridWidth,mPaint);
}
//竖线个数
int vNum = mWidth / mGridWidth;
//横线个数
int hNum = mHeight / mGridWidth;
mPaint.setColor(mGridColor);
mPaint.setStrokeWidth(2);
//画竖线
for(int i = 0;i
canvas.drawLine(i*mGridWidth,0,i*mGridWidth,mHeight,mPaint);
}
//画横线
for(int i = 0;i
canvas.drawLine(0,i*mGridWidth,mWidth,i*mGridWidth,mPaint);
}
}
现在的运行效果是这样的:
呃。。。看起来像点样子了。。
现在给加上Path吧。。新建一个View,写到相对布局的底部
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.wingsofts.cardiograph.MainActivity">
android:layout_height="match_parent">
android:layout_height="match_parent" />
为了简单起见,新建一个View 继承CardiographView, 这里只需要重写他的ondraw方法即可,其他属性不需要定义。
private void drawPath(Canvas canvas) {
// 重置path
mPath.reset();
//用path模拟一个心电图样式
mPath.moveTo(0,mHeight/2);
int tmp = 0;
for(int i = 0;i<10;i++) {
mPath.lineTo(tmp+20, 100);
mPath.lineTo(tmp+70, mHeight / 2 + 50);
mPath.lineTo(tmp+80, mHeight / 2);
mPath.lineTo(tmp+200, mHeight / 2);
tmp = tmp+200;
}
//设置画笔style
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(mLineColor);
mPaint.setStrokeWidth(5);
canvas.drawPath(mPath,mPaint);
}
好了,现在画出来是这样的:
那怎么让他动起来呢。 当然是scrollBy了~~ 这里注意下scrollBy 和scrollTo的区别,面试常考的,之后再postInvalidateDelayed即可
@Override
protected void onDraw(Canvas canvas) {
drawPath(canvas);
scrollBy(1,0);
postInvalidateDelayed(10);
}
大功告成! 这样就和上面的实现图一样了:
当然这只是个demo,你可以根据自己的需求去不同的坐标去绘制,来达到真实的心电图效果。
如果你喜欢我的博客,请点关注哦。。
另外:如果你有职位 只要在广州 欢迎拉我,我刚辞实习工作,六月就要毕业了,即将失业了!!!
本项目地址(求star):点击打开
android 自定义心电图,手把手教你打造一个心电图效果View Android自定义View(示例代码)...相关推荐
- android 自定义心电图,手把手教你打造一个心电图效果View Android自定义View
大家好,看我像不像蘑菇-因为我在学校呆的发霉了. 思而不学则殆 丽丽说得对,我有奇怪的疑问,大都是思而不学造成的,在我书读不够的情况下想太多,大多等于白想 ,所以革命没成功,同志仍需努力. 好了废话不 ...
- android 复用标题栏,Android基础---使用ToolBar教你打造一个通用的标题栏
现在项目中一般都会使用标题栏,谷歌在2014年推出了新的app bar---ToolBar,代替了以前使用的ActionBar.在做项目中会经常用到这个ToolBar,虽然用的很多,但是自己对它如何用 ...
- 手把手教你打造一个VIM-IDE
先放上已打造好.可直接使用的VIM-IDE包,懒得一步一步操作配置的可直接下载解压后使用. Ubuntu 64位免安装版VIM-IDE. 压缩包为直接打包/etc/vim配置及插件包 https:// ...
- 手把手教你打造一款个人专属Android桌面
实现方式两种 1.从头到尾写一个apk然后把系统的属性加上去,然后启动的时候默认就指定到这个apk的包名,他就启动, 2.我们基于Androidlauncher3的源码去做一个定制化的修改 分析一下这 ...
- css加号图标_手把手教你打造一个纯CSS图标库
来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库: 主题说完了,下面进入正题. 在web开发中,我们经常要用到一些小图标(加减勾叉等).通常做法就两种: 直接使用图片: 使用css/s ...
- 手把手教你打造一个可视化接口自动化测试系统
现如今,接口开发几乎成为一个互联网公司的标配了,无论是web还是app,哪怕是小程序,都离不开接口作为支撑,当然,这里的接口范围很广,从http到websocket,再到rpc,只要能实现数据通信的都 ...
- 手把手教你打造一个企业级实时数据中台【万字图文】
引言--首先来聊聊现代企业数据架构及痛点: 数据孤岛:低效率和利用困难的根源 应用瓶颈:传统方案数据仓库.数据湖的不足 单讲这两个问题你可能会疑惑--为什么会出现这样的问题? 所以下面来讲讲两 ...
- 手把手教你打造一个排队叫号系统
点击上方"业余草",选择"置顶公众号" 第一时间获取技术干货和业界资讯! 排队叫号系统在生活中处处可见,但是就这么一个系统,让你写你还不一定能完整的实现出来. ...
- PS教程!手把手教你打造一个配色小清新的地图图标
@P大点S微博 :今天的教程是一个小清新风格的定位图标,操作不复杂,重点是图标样式的应用.源文件已打包,来收! PSD源文件 打包下载:http://pan.baidu.com/s/1qWYXqlm ...
最新文章
- Aggregation,Composition和Dependency
- java maven 读写pdf_java读取pdf内容
- bcb 接收webservice tbytedynarray_文章推荐:基于分集接收技术的可见光接收机前端电路...
- TiDB之mac上搭建及调试技巧
- Arcface v1 论文翻译与解读
- docker如何修改挂载路径(挂载目录)?(没弄完,先去弄别的)
- 【LeetCode笔记】105. 从前序与中序遍历序列构造二叉树(Java、递归、二叉树、哈希表)
- 技术大神有话说,别让新业绩为旧设备背锅
- lol新服务器怎么发信息,《英雄联盟手游》国服新消息 最新玩法发布
- tcp序列号为什么是随机的_译文:每个开发人员应了解的 TCP 知识
- 程序员春节回家相亲指南
- 前端50个精美登录注册模板(觉得好用帮我点个赞呗)
- 【技术】客服服务开发
- mysql配置secure_file_priv
- 苹果youtube无法连接网络_解决苹果手机Apple ID被禁止下载或无法连接到AppStore等问题...
- 数据结构易混点、易错点、题目(个人向)
- lumen php命令,Lumen创建自定义make命令
- Unity Animation Instancing 官方解决方案初试
- Centos7超详细服务器上安装配置教程
- 如何控制苹果Mac电池健康管理功能?
热门文章
- 8K慢直播重构文旅新场景,向沉浸式时代迈进
- JavaScript 中获取光标位置
- Golang中获取中文字符串的子串字符位置及截取子串
- 项目之后小谈中颖芯片——SH79F166A
- WiFi工作模式选择
- 一种很轻松的Excel关键字方式进行Android端APP自动化测试(Java+Appium+TestNG+Excel)
- 如何使用dbx分析core文件_[转]使用DBX分析AIX 下的 CoreDump
- Python实战:打造多人在线匿名聊天的小程序!
- 快速幂 优化快速幂 算法宝典 中等
- Linux系统移植:menuconfig 原理分析