码迷,mamicode.com
首页 > 其他好文 > 详细

可缩放时间轴和录像片段选择器的实现

时间:2019-10-21 13:27:43      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:most   i++   cte   bool   gif   ams   额外   action_up   pix   

最近的工作是做了两个自定义控件:
①可以缩放的时间轴
②吸附在在时间轴上有两个滑动按钮的录像片段选择器

真机测试效果如下面的gif动画所示:
技术图片

———————–最近更新 华丽丽的分割线—————————
由于很多小伙伴私信我要源码,所以最近整理了一下,放在github上了,地址:
https://github.com/ljfxyj2008/ScalableTimebar
———————–End of 最近更新—————————

在此记录一下设计原理和踩过的坑。

时间轴

时间轴分为两部分轴,刻度轴和录像片段轴。刻度轴用来绘制时间刻度表盘,录像片段轴用来指示对应位置有没有录像存在。
时间轴的视觉效果如下:
技术图片

其中下面有时间标注的刻度部分是刻度轴,上面灰色背景一段一段绿色的部分是录像片段轴,如下图的标注所示:
技术图片

刻度轴

刻度轴的起始时间点、终止时间点、跨越长度、当前滑动到的时间点(即屏幕中间的游标指示的时间)都可以根据传入参数定制。刻度分为大刻度(关键刻度)和小刻度,大刻度要显示刻度和对应的时间文字,小刻度只显示刻度。刻度分为6档,根据缩放级别的不同(用户双指缩放或界面按钮缩放),把刻度打到不同位置。
比如,刚进入界面时刻度轴的刻度以默认档位显示,要在如图的位置打出刻度:
技术图片

当用户双指在屏幕上拉伸,或点击放大按钮,导致时间轴被放大时,一开始刻度打印方式不变(依然在这几个时刻打印文字),只是刻度间的距离随手指的拉伸距离而逐渐变大。当刻度间距离达到一定程度时,刻度打印方式改变,变成如下图的刻度样式:
技术图片

当用户双指在屏幕上收缩,或点击缩小按钮,导致时间轴被缩小时,一开始刻度打印方式不变(依然在这几个时刻打印文字),只是刻度间的距离随手指的收缩距离而逐渐变小。当刻度间距离小到一定程度时,刻度打印方式改变,变成如下图的刻度样式:
技术图片

我的实现方式是,通过继承view实现一个自定义view,在onMeasure()阶段把view宽度设置成所有刻度都绘制出来会占用的长度,即包括超出屏幕的实际长度。由于游标实际是不移动的,游标指示时间的改变是通过刻度轴的反向滑动来实现的,所以为了在时间轴滑动到尽头时游标能够指示到刻度轴尽头的时间,还需要在用户指定的长度基础上,在刻度轴的最左端和最右端分别额外增加屏幕一半宽度的空白区。原理图如下:
技术图片

刻度档位信息

由于刻度轴根据缩放级别的不同,有6档不同的刻度显示方式(上面展示了3种),所以先把6档刻度信息写进map缓存,map中的每一个item记录这档刻度以下信息:

  • 一屏幕总共要显示的秒数(即可见区域包含的秒数)
  • 大刻度对应的秒数
  • 小刻度对应的秒数
  • 关键刻度文字的显示模式(DataFormat的pattern)

比如刻度轴1对应的这几个值就是6 60 60(一屏幕总共显示6个小时长度)、60 60(大刻度对应的都是整小时,即60 60的整数倍)、5 * 60(小刻度对应的都是5分钟的整数倍)、”HH:mm”(时间文字显示小时和分钟)。

然后,利用手机屏幕宽度screenWidth、用户指定的刻度轴总长度WHOLE_TIMEBAR_TOTAL_SECONDS、以及刚刚在map中设定的一屏幕总共要显示的秒数totalSecondsInOneScreen,就可以计算出某个刻度档位的时间轴总长度(像素):

1
viewLength = (int) ((float) screenWidth * WHOLE_TIMEBAR_TOTAL_SECONDS / (float) totalSecondsInOneScreen);

把算出的这个viewLength也缓存到map的对应item中,作为某一档的默认view宽度。

view宽度设定

在view第一次被初始化时,我们默认把刻度轴的样式设定在第3档的刻度样式,那么就从map中取出对应的刻度档位信息的时间轴总长度字段viewLength,然后通过为view指定新的LayoutParams来指定时间轴view控件的宽度,如下:

1
2
3
ViewGroup.LayoutParams params = getLayoutParams();
params.width = viewLength;
setLayoutParams(params);

这样仅仅是把view宽度指定为有刻度的部分的总长度。为了加上view两端无刻度的留白部分,我们要在onMeasure方法中做一些手脚:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

protected void (int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(measureWidth(widthMeasureSpec), VIEW_HEIGHT);
}


* 计算时间轴的宽度,左右都预留半个屏幕的宽度
*/

private int measureWidth(int widthMeasureSpec) {
int measureMode = MeasureSpec.getMode(widthMeasureSpec);
int measureSize = MeasureSpec.getSize(widthMeasureSpec);
int result = getSuggestedMinimumWidth();
switch (measureMode) {
case MeasureSpec.AT_MOST:
case MeasureSpec.EXACTLY:
result = measureSize + screenWidth;
break;
default:
break;
}
return result;
}

这样的话,手机在测量view尺寸的时候就会把多出来的一个屏幕的宽度也算进去。

画刻度onDraw()

刻度怎么画是刻度轴实现的关键。思路是,我们在onDraw()中只绘制出屏幕上可见的那一部分,每次用户滑动或缩放时间轴,都通过invalidate()来重新回调onDraw()方法。 那么关键问题就是如何确定屏幕可见部分在view中的起始点、终止点分别是第几个像素。

不管时间轴view被用户缩放到了什么长度,它的总长度我们总是知道的(因为之所以能看到缩放效果,就是我们手动利用缩放指数factor计算新的长度,然后在onMeasure中重新手动赋值,后面会讲到),同时整个时间轴的跨度有多少秒我们也是知道的(用户需要通过参数指定view的起点、终点时间,类型为long),那么我们就可以计算出一秒钟对应多少个像素:

1
pixelsPerSecond = (float) (getWidth() - screenWidth) / (float) WHOLE_TIMEBAR_TOTAL_SECONDS;

由于用户在初始化时还指定了希望游标指示在哪个时刻上currentTimeInMillisecond,同时我们再利用这一档刻度标准规定的最小刻度间的时间间隔minTickInSecond(在第一部初始化map时指定),我们就可以求出屏幕可见区域最左端、最右端对应的是时间轴上的哪个时刻:

1
2
long forStartUTC = (long) (currentTimeInMillisecond / 1000 - screenWidth / pixelsPerSecond / 2 - minTickInSecond);
long endStartUTC = (long) (currentTimeInMillisecond / 1000 + screenWidth / pixelsPerSecond / 2 + minTickInSecond);

虽然我们知道了屏幕两端对应的时刻,但由于这个时刻很可能是不能被最小刻度间距minTickInSecond整除的,比如我们的最小刻度是5秒一档,但是当前最左端是12:05:02,那么这个地方就不应该打刻度,而应该继续往后早到第一个能被minTickInSecond整除的位置。

这里就有一个大坑。如果直接去用求模运算(%)找第一个刻度点,就会导致手机调整不同时区时,刻度被打在不同位置上的问题,比如我希望00:00、06:00、12:00、18:00才作为关键刻度打印时间文字,但是手机时区跳到北京时间(UTC+8)时,刻度会被打在08:00、14:00、20:00、02:00这几个位置上。更糟糕的是,当缩放到关键刻度只打印年月日而不打印时间的级别时,看起来游标指在2015-12-09的位置上,用户会以为这是北京时间2015-12-09 00:00:00,而实际他指向的是北京时间2015-12-09 08:00:00。

要解决这个问题,就要在找刻度、画刻度的时候考虑手机设定时区与UTC的时差,用UTC时间加上时差的结果来计算刻度的位置,但是时间轴上每个点代表的时间仍然是UTC时间,打印关键刻度文字传给DataFormatter的参数也仍然是UTC时间,因为DataFormat我们在默认不指定时区的情况下就是把UTC时间转成手机设定的本地时区时间来显示的。找屏幕要画出的第一个刻度的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

*找出当前屏幕要画出的第一个刻度对应的时刻
*/

Calendar cal = Calendar.getInstance();
int zoneOffsetInSeconds = cal.get(java.util.Calendar.ZONE_OFFSET) / 1000;//手机本地时区与UTC相差的毫秒数

long forStartUTC = (long) (currentTimeInMillisecond / 1000 - screenWidth / pixelsPerSecond / 2 - timebarTickCriterionMap.get(currentTimebarTickCriterionIndex).minTickInSecond);
long endStartUTC = (long) (currentTimeInMillisecond / 1000 + screenWidth / pixelsPerSecond / 2 + timebarTickCriterionMap.get(currentTimebarTickCriterionIndex).minTickInSecond);

long forStartLocalTimezone = forStartUTC + zoneOffsetInSeconds;
long endStartLocalTimezone = endStartUTC + zoneOffsetInSeconds;

long firstTickToSeeInSecondUTC = -1;//屏幕上能看到的最左边一个刻度对应的时间,单位是秒
for (long i = forStartLocalTimezone; i <= endStartLocalTimezone; i++) {
if (i % timebarTickCriterionMap.get(currentTimebarTickCriterionIndex).minTickInSecond == 0) {
firstTickToSeeInSecondUTC = i - zoneOffsetInSeconds;
break;

}

}

其中timebarTickCriterionMap.get(currentTimebarTickCriterionIndex).minTickInSecond就是用来取到当前刻度档位的最小刻度时间间距。
这里为了避免最边缘的第一个和最后一个刻度绘制不出来,所以在forStartUTC和endStartUTC里都多给了一个最小刻度的余量,也就是代码第7行和第8行最后加减的一个最小刻度间距minTickInSecond。
这样,我们就找到了在本次onDraw()时,我们需要从view的第几个像素开始画刻度(view最左端的位置为第0个像素,大部分之间可能在屏幕之外很远的地方)。

然后从firstTickToSeeInSecondUTC的位置开始,以minTickInSecond为步进值,找每一个时刻,把每一个刻度也加上本地与UTC的时差,然后去对关键刻度间距keyTickInSecond和小刻度间距minTickInSecond分别求模运算(%),能被keyTickInSecond整除的就是关键刻度,只能被minTickInSecond整除的就是小刻度。如此,再调用canvas.drawRect()、canvas.drawText()分别画刻度和文字。

双指缩放

用户在触摸屏上双指缩放或点击放大、缩小按钮时,时间轴要产生缩放效果,原理很简单,就是拿缩放比例scaleFactor乘以当前整个个view宽度(不含一屏幕的空白区)最为新的宽度,然后拿这个宽度和每一档刻度标准中view整体长度字段进行比较,在合适的位置进行档位切换,或者在算出view宽度过大或过小时进行限制。总之,就是算出一个新的view宽度值,然后重设view的LayoutParams,onMeasure()和onDraw(),就可以看到缩放效果了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

* 按照比例对时间轴进行缩放
* @param scaleFactor 缩放比例
*/

public void scaleTimebarByFactor(float scaleFactor){
int newWidth = (int) ((getWidth() - screenWidth) * scaleFactor);

if (newWidth > timebarTickCriterionMap.get(0).viewLength) {
setCurrentTimebarTickCriterionIndex(0);
newWidth = timebarTickCriterionMap.get(0).viewLength;

} else if (newWidth < timebarTickCriterionMap.get(0).viewLength
&& newWidth >= getAverageWidthForTwoCriterion(0, 1)) {
setCurrentTimebarTickCriterionIndex(0);

} else 大专栏  可缩放时间轴和录像片段选择器的实现ord">if (newWidth < getAverageWidthForTwoCriterion(0, 1)
&& newWidth >= getAverageWidthForTwoCriterion(1, 2)) {
setCurrentTimebarTickCriterionIndex(1);

} else if (newWidth < getAverageWidthForTwoCriterion(1, 2)
&& newWidth >= getAverageWidthForTwoCriterion(2, 3)) {
setCurrentTimebarTickCriterionIndex(2);

} else if (newWidth < getAverageWidthForTwoCriterion(2, 3)
&& newWidth >= getAverageWidthForTwoCriterion(3, 4)) {
setCurrentTimebarTickCriterionIndex(3);

} else if (newWidth < getAverageWidthForTwoCriterion(3, 4)
&& newWidth >= timebarTickCriterionMap.get(4).viewLength) {
setCurrentTimebarTickCriterionIndex(4);

} else if (newWidth < timebarTickCriterionMap.get(4).viewLength) {
setCurrentTimebarTickCriterionIndex(4);
newWidth = timebarTickCriterionMap.get(4).viewLength;

}

ViewGroup.LayoutParams params = getLayoutParams();
params.width = newWidth;
setLayoutParams(params);
}

录像片段轴

录像片段轴的绘制原理很简单,就是拿到一个List数据源,其中的每一个item都有录像片段的开始时间from、结束之间end,我们就通过换算,得到每个片段对应的开始像素位置、结束像素位置,然后在屏幕的对应位置用canvas.drawRect()画框就行了。
但是考虑到效率问题,如果录像片段数据很多,达到数千甚至数万段(比如很多都是短视频),那么一次性全部绘制出来是不现实的,还是只能绘制屏幕可见部分,然后在时间轴被缩放时,录像片段轴随之缩放,回调onDraw()方法,再次重绘屏幕可见区域。
问题就来了,在保证List中数据片段不重叠(即每一段的from到to与另一段的from到to都无交集)且有序排列的情况下(前一段的to小于后一段的from),如何快速找到哪一个item才是第一个应该被绘制出来的item?遍历list的方法显然太耗时,每次onDraw()都去遍历一遍的话,界面在滑动或缩放时会卡顿得无法接受。

我的解决办法如下:
步骤一:在外界向view设置录像片段轴的数据源List后,用我自己的类CloudRecordExistTimeClips来记录录像片段item信息,其中包括from、to的long值,还包括一个List字段coverDateZeroOClockList用来记录这个item跨越了哪几天,也就是
从startTimeInMillisecond到endTimeInMillisecond所涵盖的所有日期的00:00所对应的毫秒数。比如从2015-11-26 10:10:30到2015-11-29 19:12:55,那么coverDateZeroOClockList就记录“2015-11-26 00:00:00”、“2015-11-27 00:00:00”、“2015-11-28 00:00:00”、“2015-11-29 00:00:00”。具体实现方式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
public static class CloudRecordExistTimeClips {
static long mostLeftDayZeroTime = Long.MAX_VALUE;//所有时间片段最早的开始日期对应的00:00的毫秒数
static long mostRightDayZeroTime = -1;//所有时间片段最晚的开始日期对应的00:00的毫秒数

private long startTimeInMillisecond;
private long endTimeInMillisecond;


* 从startTimeInMillisecond到endTimeInMillisecond所涵盖的所有日期的00:00所对应的毫秒数。
* 如从2015-11-26 10:10:30到2015-11-29 19:12:55,
* 那么coverDateZeroOClockList就记录“2015-11-26 00:00:00”、“2015-11-27 00:00:00”、“2015-11-28 00:00:00”、“2015-11-29 00:00:00”
*/

private List<Long> coverDateZeroOClockList = new ArrayList<>();

public CloudRecordExistTimeClips(long startTimeInMillisecond, long endTimeInMillisecond) {
this.startTimeInMillisecond = startTimeInMillisecond;
this.endTimeInMillisecond = endTimeInMillisecond;

if (startTimeInMillisecond < mostLeftDayZeroTime){
this.mostLeftDayZeroTime = startTimeInMillisecond;
}

if (endTimeInMillisecond > mostRightDayZeroTime){
this.mostRightDayZeroTime = endTimeInMillisecond;
}

SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
SimpleDateFormat zeroTimeFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

String startTimeDateString = dateFormat.format(startTimeInMillisecond);
String startTimeZeroTimeString = startTimeDateString + " 00:00:00";

String endTimeDateString = dateFormat.format(endTimeInMillisecond);
String endTimeZeroTimeString = endTimeDateString + " 00:00:00";

try {
Date startTimeZeroDate = zeroTimeFormat.parse(startTimeZeroTimeString);
Date endTimeZeroDate = zeroTimeFormat.parse(endTimeZeroTimeString);

long loopZeroDateInMilliseconds = startTimeZeroDate.getTime();
while (loopZeroDateInMilliseconds <= endTimeZeroDate.getTime()){
coverDateZeroOClockList.add(loopZeroDateInMilliseconds);
loopZeroDateInMilliseconds = loopZeroDateInMilliseconds + SECONDS_PER_DAY * 1000;
}
} catch (ParseException e) {
e.printStackTrace();
}


}

public long getStartTimeInMillisecond() {
return startTimeInMillisecond;
}

public long getEndTimeInMillisecond() {
return endTimeInMillisecond;
}

public List<Long> getCoverDateZeroOClockList() {
return coverDateZeroOClockList;
}
}

步骤二:根据每个录像片段对象CloudRecordExistTimeClips覆盖的日期,将每一个item缓存在一个全局Map中,map的key是某个日期00:00:00对应的long,value就是这个片段CloudRecordExistTimeClips对象。比如,一个片段的from是2015-12-08 11:32:22,to值是2015-12-10 11:32:22,那么这个对象就同时处在key为2015-12-08 00:00:002015-12-09 00:00:002015-12-10 00:00:00的map槽中。

步骤三:在onDraw()方法中,我们知道屏幕可见区域左边缘与view的交点对应的时间轴UTC时间(比如2015-12-09 15:30:12),那么我们就以当天0点的时间(即例子的2015-12-09 00:00:00)为key去取出当天第一个片段,从这个片段画起。如果这个key对应的values为null,那么就把key的值往后加一天,继续找,找到找到第一个片段开始画;或者key的时间大于屏幕右边缘的时间还没找到就停止寻找,因为说明屏幕可见区域中没有需要绘制的录像片段。

滑动与缩放

缩放事件毫无疑问直接使用android提供的缩放手势探测器ScaleGestureDetector来检测,直接可以拿到缩放比例参数scaleFactor,然后用上面提到的缩放函数来处理。
滑动可以在onTouchEvent(MotionEvent event)中自己处理ACTION_DOWN、ACTION_MOVE、ACTION_UP事件流,也可以直接使用android提供的手势探测器GestureDetector来处理,拿到滑动的距离deltaX,在原来view的layout位置的基础上计算滑动后应该处于的位置,然后调用layout(left, top, right, top + getHeight())来使view滑动,最后调用invalidate()来发起重绘。

这里踩到一个坑
ScaleGestureDetector和GestureDetector都要在onTouchEvent(MotionEvent event)函数的最前面通过截获event来进行手势处理。如果是一个缩放事件,ScaleGestureDetector已经处理了缩放手势,那么ACTION_DOWN、ACTION_MOVE、ACTION_UP以及其他事件流就不应该再继续在onTouchEvent()后面的ACTION_DOWN、ACTION_MOVE、ACTION_UP等分支中处理了,按照android文档说明,我使用scaleGestureDetector.onTouchEvent(event)的返回值来判断这个event是不是已近被处理过的缩放事件,如果是就直接return不再走后面的流程。
结果证明我很傻很天真,时间轴在被我双指缩放时同时也出现了意外的位移,说明scaleGestureDetector.onTouchEvent(event)的返回值是无效的。
google之后发现,很多开发者都遇到了同样的问题,说这应该是android sdk的一个bug,scaleGestureDetector.onTouchEvent(event)永远只会返回false。所以,在这里要先通过scaleGestureDetector.onTouchEvent(event)调用缩放手势探测器,然后用scaleGestureDetector.isInProgress()来判断本次事件是否被作为缩放手势处理了,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

public boolean onTouchEvent(MotionEvent event) {
scaleGestureDetector.onTouchEvent(event);
if (scaleGestureDetector.isInProgress()) {
return true;
}

switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
...
break;

case MotionEvent.ACTION_MOVE:
...
break;

case MotionEvent.ACTION_UP:
...
break;
}

return true;
}

录像片段选择器

通过两个滑动按钮来选择录像片段,两个滑动按钮之间的部分表示被选中的片段,两个滑动按钮上要显示对应的录像截图、时间文字提示,在滑动时、静止时根据获取成功与否显示不同的占位图。由于录像片段选择器上的时间信息是依附于时间轴控件的,所以当时间轴被滑动、缩放时,录像片段选择器也要同步更新。

技术图片

很明显,这个控件简化一下就是有两个thumb的seekbar,所以就取github上找了一下两个按钮的seekbar控件,结果找到了anothem/android-range-seek-bar项目,它提供与android的seekbar视觉效果类似的双按钮seekbar控件。
我的改造工作主要就是重写onMeasure()、onLayout()、onDraw()、onTouchEvent()方法,最麻烦的就是onDraw()中绘制时对绝对坐标的计算。其计算方法与时间轴类似,甚至还简单许多,这里就不再重复写了。

这里的一个坑
由于这个自定义view中需要用到android的ImageView(给Glide使用),所以这个自定义view就不能继承于view,而是继承于ViewGroup,这样就可以在初始化阶段向其中添加其他view了。然而调试的时候发现,onDraw()方法怎么都不会被调用。原来,ViewGroup默认只是用来布局,一般没有什么需要绘制的东西,所以系统默认就不调用它的onDraw()回调。如果要让ViewGroup的onDraw()方法被回调,有两种方法:

【方法1】让系统知道这个ViewGroup有可绘制的东西,比如在xml中定义这个ViewGroup的时候为它指定background属性。
【方法2】在代码中调用setWillNotDraw(false)强制要求调用onDraw()方法。

可缩放时间轴和录像片段选择器的实现

标签:most   i++   cte   bool   gif   ams   额外   action_up   pix   

原文地址:https://www.cnblogs.com/sanxiandoupi/p/11712933.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!