1. Timeline View

When the timeline component uses video playback or cloud storage video playback, it linearly displays the video recording time points that can be played. You can slide the timeline to accurately locate the time point and segment to start playing. UI effects are as follows:

timeline

1.1. Integrated SDK

Add the following content in the Podfile file.

platform :ios, '9.0'

target 'your_target_name' do

  pod "TuyaCameraUIKit"

end

Then run the pod update command in the root directory of project.

Class and Protocol

Class (Protocol) Description
TuyaTimelineView Timeline view, inherited from UIView
TuyaTimelineViewDelegate Timeline view delegate
TuyaTimelineViewSource Timeline view datasource

1.2. Introduction

1.2.1. TuyaTimelineView

Properties

Name Type Description
spacePerUnit CGFloat The width of a time unit, two long tick marks represent a time unit
unitMode Enum Time unit mode, currently there are three, one time unit is 60 seconds, 600 seconds, 3600 seconds
tickMarkColor UIColor Color of tick mark
backgroundGradientColors NSArray The gradient colors array of the timeline background color
backgroundGradientLocations NSArray The gradient locations array of the timeline background color
contentColor UIColor The data in the timeline is rendered in color. If a gradient is set, the gradient will be used for rendering
contentGradientColors NSArray The gradient colors array of the data rendering color in the timeline
contentGradientLocations NSArray The gradient locations array of the data rendering color in the timeline
timeHeaderHeight CGFloat The height of the time text field
timeTextTop CGFloat The position of the time text on the Y axis, with timeHeaderHeight will determine the position of the data rendering
timeStringAttributes NSDictionary Time text string attributes
showTimeText BOOL Whether to display time text
showShortMark BOOL Whether to show short tick marks
currentTime NSTimeInterval The currently selected time on the timeline, Unix timestamp
date NSDate Specified date
timeZone NSTimeZone Specified time zone
isDragging BOOL Is dragging
isDecelerating BOOL Is decelerating
midLineColor UIColor The color of the center line of the timeline
selectionBoxColor UIColor The color of the timeline selection box
selectedTimeRange NSRange Time range selected by the timeline selection box
isSelectionEnabled BOOL Is in selection mode
selectionTimeBackgroundColor UIColor The background color of the time label of the timeline selection box
selectionTimeTextColor UIColor The text color of the time label of the timeline selection box
selectionTimeTextFontSize UIColor The text font size of the time label of the timeline selection box
sourceModels NSArray Timeline view source data array
delegate id Timeline view delegate

Description

Enable selection mode

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

Parameters

Parameter Type Description
min NSInteger The minimum length of time that the selection box can be selected
max NSInteger The maximum length of time that the selection box can be selected

Description

Exit selection mode and return to the selected time range

- (NSRange)finishSelection;

Description

Set the current time of the timeline. If the parameter animated passes YES, the timeline will slide to the corresponding time point at a constant speed and trigger - (void)timelineView:didEndScrollingAtTime:inSource: delegate method

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

Parameters

Parameter Type Description
currentTime NSTimeInterval The current time on the timeline
animated BOOL Is need animation effects

1.2.2. TuyaTimelineViewDelegate

Description

Timeline starts to dragging

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

Description

When the timeline ends dragging, decelerate is YES, which means the timeline is still sliding inertially

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

Description

The timeline slides to a certain point in time, isDragging is YES indicating that the timeline is being dragged

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

Description

The timeline stops sliding, timeInterval represents the time point when the timeline last stopped, and source represents the data source containing this time point

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

Description

The timeline view is scaled, unitMode represents the current time unit mode

- (void)timelineView:(TuyaTimelineView *)timeLineView scaleToUnitMode:(TuyaTimelineUnitMode)unitMode;

1.2.3. TuyaTimelineViewSource

The data source protocol has only two interfaces to get the start time point and end time point of this fragment.

Description

Start time, need to return the number of seconds relative to the parameter date

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

Description

End time, need to return the number of seconds relative to the parameter date

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

The timeline is used to render time segments that do not overlap in a day. For the sample code, please refer to the TYCameraTimeLineModel.m and TYDemoCameraPlaybackViewController.m files in the Demo.

results matching ""

    No results matching ""