ISTimeline 1.0.0

ISTimeline 1.0.0

×

测试已测试✗
语言语言 SwiftSwift
许可证 Apache 2
发布最新发布2017年8月
SwiftSwift 版本3.0
SPM支持 SPM✗

由 instant:solutions 维护。

ISTimeline 1.0.0

ISTimeline

ISTimeline 是用 Swift 3 编写的一个简单时间轴视图

ISTimeline

要求

  • iOS 8.0 或更高版本
  • Swift 3

安装

手动安装

只需将 ISPoint.swift 和 ISTimeline.swift 文件拖放到项目中。

用法

导入

import ISTimeline

集成

我们建议在您的 storyboard 中使用时间轴视图。只需添加一个普通视图，并将自定义类和模块属性设置为 ISTimeline。

Custom class

或者可以程序化地添加视图

let frame = CGRectMake(0, 20, 300, 400)

let timeline = ISTimeline(frame: frame)
timeline.backgroundColor = .whiteColor()

self.view.addSubview(timeline)

ISPoint

每个气泡都由 points 数组中的 ISPoint 对象表示。ISPoint 有几个属性
var title:String 在气泡中显示
var description:String? 在气泡下方显示
var pointColor:UIColor 线上每个点的颜色
var lineColor:UIColor 点之后的线的颜色
var touchUpInside:Optional<(point:ISPoint) -> Void> 一个回调，在气泡内部触摸后触发
var fill:Bool 在线上填充点（默认：false）

示例点

let point = ISPoint(title: "my title")
point.description = "my awesome description"
point.lineColor = .redColor()
point.fill = true

初始化器

指定的初始化器是

ISPoint(title:String, description:String, pointColor:UIColor, lineColor:UIColor, touchUpInside:Optional<(point:ISPoint) -> Void>, fill:Bool)

您还可以使用以下便捷初始化器之一

ISPoint(title:String, description:String, touchUpInside:Optional<(point:ISPoint) -> Void>)
ISPoint(title:String, touchUpInside:Optional<(point:ISPoint) -> Void>)

或者这个

ISPoint(title:String)

触摸事件

要获取触摸事件，只需将一个回调闭包设置到 point(touchUpInside) 属性。在气泡内部触摸后将触发。

point.touchUpInside =
  { (point:ISPoint) in
    // do something
}

添加时间线点

要添加时间线点，您可以简单创建并设置您的点数组到属性 timeline.points，或者您可以依次追加每个点。

let myPoints = [
  ISPoint(title: "first"),
  ISPoint(title: "second"),
  ISPoint(title: "third")
]
timeline.points = myPoints

追加点

timeline.points.append(ISPoint(title: "fourth"))

颜色

您可以自定义以下时间线的颜色
var bubbleColor:UIColor 每个气泡的颜色（默认 .init(red: 0.75, green: 0.75, blue: 0.75, alpha: 1.0)）
var titleColor:UIColor 气泡中标题的颜色（默认 .whiteColor()）
var descriptionColor:UIColor 描述文本的颜色（默认 .grayColor()）
点可以按照上述方式着色。

线宽和点直径

一些常见的参数可以进行调整
var pointDiameter:CGFloat 线中点的直径（默认 6.0）
var lineWidth:CGFloat 线的粗细（默认 2.0）
var bubbleRadius:CGFloat 气泡角落的半径（默认 2.0）

气泡箭头

通过设置标志 var bubbleArrows:Bool，可以移除所有箭头（默认 true）。
带有箭头
Bubble with arrow

没有箭头
Bubble without arrow

意图

您可以通过设置内容内边距来添加一些填充。目前这只能通过编程方式完成。

timeline.contentInset = UIEdgeInsetsMake(20.0, 20.0, 20.0, 20.0)

剪切子视图

默认情况下，时间线会将所有子视图剪切到其边界内。如果您想更改这种行为，只需将其设置为 false。

timeline.clipsToBounds = false

工作示例

let frame = CGRectMake(0, 20, 300, 400)
let timeline = ISTimeline(frame: frame)
timeline.backgroundColor = .whiteColor()
timeline.bubbleColor = .init(red: 0.95, green: 0.95, blue: 0.95, alpha: 1.0)
timeline.titleColor = .blackColor()
timeline.descriptionColor = .darkTextColor()
timeline.pointDiameter = 7.0
timeline.lineWidth = 2.0
timeline.bubbleRadius = 0.0

self.view.addSubview(timeline)

for i in 0...9 {
  let point = ISPoint(title: "point \(i)")
  point.description = "my awesome description"
  point.lineColor = i % 2 == 0 ? .redColor() : .greenColor()
  point.pointColor = point.lineColor
  point.touchUpInside =
    { (point:ISPoint) in
      print(point.title)
  }

  timeline.points.append(point)
}

示例

ISTimelineDemo 是一个简单的示例应用，它显示了在 Storyboard 中使用 ISTimeline 的方法。

待办事项

  • [ ] 在时间线中显示图片
  • [ ] 动画追加和删除条目

许可证

ISTimeline 在 Apache License 2.0 的条款下授权。有关更多信息，请参阅 LICENSE 文件。

贡献

请随意对其进行分叉并给我们发送 pull-request！😎

作者

由❤️在奥地利由 instant:solutions 制作