时间轴组件

更新时间:2023-06-02 08:03:43

时间轴组件在视频回放或者云视频回放时,线性地展示可以播放的视频录像时间点。用户可以通过滑动时间轴来精准的定位开始播放的时间点和片段。

效果预览

时间轴组件

SDK 集成

  1. 在 Podfile 文件中添加以下内容:

    platform :ios, '9.0'
    
    target 'your_target_name' do
    
    pod "ThingCameraUIKit"
    
    end
    
  2. 在项目根目录下执行pod update命令。

类和协议

类(协议)名 说明
ThingTimelineView 时间轴视图类协议,继承自 UIView
ThingTimelineViewDelegate 时间轴视图代理协议
ThingTimelineViewSource 时间轴数据源协议

ThingTimelineView

属性

名称 类型 说明
spacePerUnit CGFloat 一个时间单位的宽,两条长刻度线表示一个时间单位
unitMode Enum 时间单位模式,目前有三种模式:60 秒、600 秒、3600 秒
tickMarkColor UIColor 刻度线的颜色
backgroundGradientColors NSArray 时间轴背景颜色的渐变色数组
backgroundGradientLocations NSArray 时间轴背景颜色的渐变着色点数组
contentColor UIColor 时间轴中的数据渲染颜色,如果设置了渐变色,将使用渐变色渲染
contentGradientColors NSArray 时间轴中的数据渲染颜色的渐变色数组
contentGradientLocations NSArray 时间轴中的数据渲染颜色的渐变着色点数组
timeHeaderHeight CGFloat 时间文本栏的高度
timeTextTop CGFloat 时间文本在 Y 轴上的位置,和 timeHeaderHeight 一起决定数据渲染的位置
timeStringAttributes NSDictionary 时间文本的属性
showTimeText BOOL 是否显示时间文本
showShortMark BOOL 是否显示短刻度线
currentTime NSTimeInterval 时间轴当前选中的时间,采用 Unix 时间戳
date NSDate 指定的日期
timeZone NSTimeZone 指定的时区
isDragging BOOL 是否正在拖拽中
isDecelerating BOOL 是否正在惯性滑动中
midLineColor UIColor 时间轴中间标线的颜色
selectionBoxColor UIColor 时间轴选择框的颜色
selectedTimeRange NSRange 时间轴选择框选中的时间范围
isSelectionEnabled BOOL 是否在选择模式中
selectionTimeBackgroundColor UIColor 时间轴选择框时间标签的背景颜色
selectionTimeTextColor UIColor 时间轴选择框时间标签的文本颜色
selectionTimeTextFontSize UIColor 时间轴选择框时间标签的文本字体大小
sourceModels NSArray 时间轴源数据数组
delegate id 时间轴代理

开启时间选择模式

接口说明

- (void)enableSelectionModeWithMinLength:(NSInteger)min maxLength:(NSInteger)max;

参数说明

参数 类型 说明
min NSInteger 选择框能选中的最小时间长度
max NSInteger 选择框能选中的最大时间长度

退出选择模式并返回选中的时间范围

接口说明

- (NSRange)finishSelection;

设置时间轴的当前时间

接口说明

如果参数 animated 设置为 YES,时间轴会匀速滑动到对应的时间点,并且会触发 - (void)timelineView:didEndScrollingAtTime:inSource: 代理方法。

- (void)setCurrentTime:(NSTimeInterval)currentTime animated:(BOOL)animated;

参数说明

参数 类型 说明
currentTime NSTimeInterval 时间轴当前的时间点
animated BOOL 是否需要动画效果

ThingTimelineViewDelegate

开始拖拽时间轴

接口说明

- (void)timelineViewWillBeginDragging:(ThingTimelineView *)timeLineView;

结束拖拽时间轴

接口说明

decelerate 设置为 YES 则表示时间轴还在继续惯性滑动。

- (void)timelineViewDidEndDragging:(ThingTimelineView *)timeLineView willDecelerate:(BOOL)decelerate;

滑动时间轴到某个时间

接口说明

isDragging 设置为 YES 则表示时间轴正在被拖拽中。

- (void)timelineViewDidScroll:(ThingTimelineView *)timeLineView time:(NSTimeInterval)timeInterval isDragging:(BOOL)isDragging;

停止滑动时间轴

接口说明

timeInterval 表示时间轴最后停止的时间点,source 表示包含这个时间点的数据源。

- (void)timelineView:(ThingTimelineView *)timeLineView didEndScrollingAtTime:(NSTimeInterval)timeInterval inSource:(id<ThingTimelineViewSource>)source;

缩放时间轴

接口说明

unitMode 表示当前的时间单位模式。

- (void)timelineView:(ThingTimelineView *)timeLineView scaleToUnitMode:(ThingTimelineUnitMode)unitMode;

ThingTimelineViewSource

数据源协议的接口用来获取这个片段的开始时间点和结束时间点,都需要返回相对于参数 date 的秒数。

开始时间

接口说明

- (NSTimeInterval)startTimeIntervalSinceDate:(NSDate *)date;

结束时间

接口说明

- (NSTimeInterval)stopTimeIntervalSinceDate:(NSDate *)date;

时间轴用于渲染一天中并不重叠的时间片段。相关示例代码请参考 Demo 中的 TYCameraTimeLineModel.mTYDemoCameraPlaybackViewController.m 文件。