Android使用自定义View实现横行时间轴效果
作者:Android架构师丨小熊 发布时间:2022-12-25 11:24:42
前言
本篇文章会说下如何使用并且要用麻烦的自定义 view 去实现时间轴效果,以及如何分析、实现自定义 view。 需要具备的知识:Paint、Canvas、自定义 view 的绘制流程。
欢迎留言交流。
一、已经有很多 RecycleView 实现时间轴的例子,为何还要费劲的使用自定义 view 去实现时间轴?
首先看下最终想要的效果:
根据上图可以总结出以下几点:
每个阶段要显示时间、阶段名、状态图标、中间有虚线;
文字上下交错显示;
相邻阶段的文字在垂直方向上是可以相交的;
时间轴的个数不确定,但是要铺满屏幕并且不可滑动; 如果只实现上两点的效果,使用 RecycleView 无疑是最好的选择,但是要同时实现以上整个效果目前想到的最好的办法就是使用自定义 view。
二、如何开始?
相信也有人跟我一样,对自定义的绘制过程 view、canvas、path、paint 的使用有了解,但是真的要去写自定义 view 确不知道从何开始,不知道第一步如何下手。我个人的总结就是:想要的太多,迟迟不动手,所以有想法一定要去动手试验! 不要想着写完第一次运行就是最终想展示的完美效果,而是要抱着整体拆分成不重复的小块,然后去绘制重复块,然后去一点点实现一步步完美的心态才能做出来。
所以首先要把想实现的 view 拆分成一个个小的可绘制的并且没有重复的块,以目前想实现的时间轴效果来说,最小可绘制无重复块也就是只包括一个时间结点的块如图:
它包括:
垂直居中的一条虚线;
一个表示状态的图标;
一个显示时间的文本块;
一个显示阶段名的文本块;
三、开始画
有了上面的分析,接下来就要开始画了。
1. 画中间的线
首先画虚线,如果虚线不知道怎么画,可以先画一条实线,然后再去找画虚线的方法。
使用 canvas 中画线的方法 drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint)
根据参数得知需知道线的起点与终点坐标以及一个 paint 对象,因为是垂直居中且横穿整个控件的直线所以可以确定两个点的 y 坐标是一样的,也就是控件高的一半,起点的 x 坐标为0,终点的 x 坐标为控件的宽。也就是知道控件的宽和高之后就可以绘制出这条线。获取控件的宽高,可以在 onMeasure 方法中获取:
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mViewWidth = MeasureSpec.getSize(widthMeasureSpec) - dip2px(mContext, mSafeDistance * 2);
mViewHeight = MeasureSpec.getSize(heightMeasureSpec);
}
画线的代码(在 onDraw 方法中添加,下面其它的绘制方法同样是在 onDraw 方法中添加):
// 定义画笔,并设置相关属性
Paint mLinePaint = new Paint();
mLinePaint.setColor(Color.parseColor("#999999"));
mLinePaint.setStrokeWidth(1);
mLinePaint.setStyle(Paint.Style.STROKE);
// 画虚线
canvas.drawLine(0, mViewHeight / 2, mViewWidth, mViewHeight / 2, mLinePaint);
2. 画图标
canvas 画图标的方法:drawBitmap(@NonNull Bitmap bitmap, float left, float top, @Nullable Paint paint),根据方法的参数去分析如何准备值,这里需要一个 bitmap 对象,起点坐标以及 paint。bitmap 对象可以将资源文件 drawable 转为 bitmap 格式;坐标就是控件的中心点。画图标的代码:
// 图标 x,y 坐标
Bitmap statusBitmap = BitmapFactory.decodeResource(mContext.getResources(), R.mipmap.ic_no_pass);
float bX = mViewWidth / 2;
// 垂直的中心点在图标的顶部,所以要减去 bitmap 高的一半
float bY = mViewHeight / 2 - statusBitmap.getHeight() / 2f;
Paint mBitmapPaint = new Paint();
mBitmapPaint.setFilterBitmap(true);
canvas.drawBitmap(statusBitmap, bX, bY, mBitmapPaint);
3. 画文本
canvas 画文本的方法:drawText(@NonNull String text, float x, float y, @NonNull Paint paint),依然是根据方法得知需要知道绘制的内容,开始的坐标点以及 paint。当文本在图标上方时,文本的 y 坐标需要使用图标的 y 坐标减去文本到图标的距离,x 坐标同图片的 x 坐标一样;当文本在图标下方时,文本的 y 坐标需要使用图标的 y 坐标加上文本到图标的距离。画文本的代码:
// 定义画笔
Paint mDatePaint = new Paint();
mDatePaint.setColor(Color.parseColor("#666666"));
mDatePaint.setTextSize(dip2px(mContext, 12));
mDatePaint.setStyle(Paint.Style.FILL);
mDatePaint.setTextAlign(Paint.Align.CENTER);
mDatePaint.setAntiAlias(true);
Paint mNamePain = new Paint();
mNamePain.setColor(Color.parseColor("#666666"));
mNamePain.setTextSize(dip2px(mContext, 13));
mNamePain.setStyle(Paint.Style.FILL);
mNamePain.setTextAlign(Paint.Align.CENTER);
mNamePain.setAntiAlias(true);
// 定义坐标变量
float dateX = bX + statusBitmap.getWidth() / 2f;
float dateY;
dateY = mViewHeight / 2 - dip2px(mContext, 19);
// 画文字,在图标上
canvas.drawText("有效时间", dateX, dateY, mNamePain);
canvas.drawText("09.27-09.29", dateX, dateY - dateTextHeight mDatePaint);
// 画文字,在图标下
dateY = mViewHeight / 2 + dip2px(mContext, 19);
canvas.drawText("09.27-09.29", dateX, dateY, mDatePaint);
canvas.drawText("有效时间", dateX, dateY + dateTextHeigh, mNamePain);
4. 由局部到整体
上面已经完成了只有一个时间点的绘制,接下来思考如果有多个时间点时如何绘制。只有一个时间点时计算坐标是以控件的宽高进行计算,那么当有两个时间点的时候需要首先把控件均分成两部分,然后在均分的部分中计算对应的坐标,完成绘制。当有三个时间点的时候需要均分为三部分,然后在各自的部分计算对应的坐标,完成绘制。所以得到不论时间点的个数有多少绘制的方法不会改变,需要改变的是绘制时候用到的点的坐标。其实已经可以看出,当多个点的时候需要循环一下,代码如下:
// 得到多个点时,其中每个部分的宽,itevW 也就等同与上面只有一个时间点时控件的宽
float itemW = mViewWidth / mDataList.size();
for (int i = 0; i < mDataList.size(); i++) {
// 完成相关计算、绘制
}
5. 完善
到这里,整个分析及绘制就差不多要结束了。
绘制虚线的方法:mLinePaint.setPathEffect(new DashPathEffect(new float[]{10, 10}, 0));
绘制虚线时遇到一个问题,在手机上不显示虚线效果,后来查到需要关闭 view 层的硬件加速:setLayerType(View.LAYER_TYPE_SOFTWARE, null);
绘制文本时的中心点计算需要注意下
paint、bitmap 等变量的初始化建议放到初始化方法中去做,不建议在 onDraw 方法中做。
四、总结
关于自定义 view 一定要多看,多尝试。
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。
来源:https://www.jianshu.com/p/5197216d9b91
猜你喜欢
- 配置文件m103替换为hdfs服务地址。要利用Java客户端来存取HDFS上的文件,不得不说的是配置文件hadoop-0.20.2/conf
- asp.net是没有直接选取文件夹的控件的,我也不知道,如果大家有的话可以一起交流下。后来我想着应该有三种方法:①先将文件夹压缩后上传服务器
- 先看看常规的隐藏状态栏的方法:方法一:@Overrideprotected void onCreate(Bundle savedInstan
- 分转元private String fenToYuan(String amount){ NumberFormat format
- 简单来说抽象类通常用来作为一个类族的最顶端的父类,用最底层的类表示现实中的具体事物,用最顶层的类表示该类族所有事物的共性。用abstract
- 软硬件环境Windows 10Android studio 2.3.2OTT BOx with android 5.1.1前言App开发测试
- 一、输入映射parameterType指定输入参数的Java类型,可以使用别名或者类的全限定名。它可以接收简单类型、POJO、H
- 一、传递参数既可以通过值也可以通过引用传递参数。通过引用传递参数允许函数成员(方法、属性、索引器、运算符和构造函数)更改参数的值,并保持该更
- Java 如何将String转化为Int在 Java 中要将 String 类型转化为 int 类型时,需要使用 Integer 类中的 p
- C#连接本地.mdf文件:项目中右键点击,新增——数据——基于服务的数据库,项目下直接生成.mdf数据库文件,后台(数据库的写入用参数传递)
- 1、Idea 设置字体settings --> Editor --> Font2、Idea配置MavenSettings --&
- 目录知识点介绍正文1、质量压缩2、采样率压缩3、缩放法压缩4、RGB_565 通过改变图片格式来实现压缩总结知识点介绍Android 中图片
- java ,javaw 和 javaws 的区别:首先,所有的这些都是java的启动装置,java.e
- SharedPreferences用于在开发软件的时候提供软件参数设置,其背后使用的是xml文件存放数据,文件保存在/data/data/&
- 前言什么时候需要重处理?在实际工作中,重处理是一个非常常见的场景,比如:发送消息失败,调用远程服务失败,争抢锁失败,等等,这些错误可能是因为
- 本文实例讲述了Android EditText自定义样式的方法。分享给大家供大家参考,具体如下:1.去掉边框EditText的backgro
- 目录查查询指定列查询所有列条件查询子查询根据业务逻辑添加条件连接查询增新增一条批量新增删改主要演示DynamicSql风格代码如何使用,基本
- 了解过spring-Boot这个技术的,应该知道Spring-Boot的核心配置文件application.properties,当然也可以
- Java多态成员访问的特点多态概要多态是面向对象编程的三个特性之一,这里不展开做过多介绍,有机会专门写一个关于继承,封装,多态三大特性的文章
- 在页面提交到tomcat乱码 解决方法是在tomcat/conf/server.xml中进行配置以tomcat6.0.32为例,需将以下代码