在 Swift 中使用 NSLayoutConstraint 将多个 UIView 放置在视觉时间轴上

Question

我需要弄清楚如何在一条水平线上放置 3 - 5 个 UIView（基本上是一个圆形绘制的彩色点），这些水平线在屏幕上从一侧延伸到另一侧，但有约束。还是没有约束更好？

该行应基于一天（24 小时）

例如 - 如果我有 3 个 NSDates 代表三个时间（7:00、12:00 和 22:00），我希望它们在时间轴上正确定位：

|------7----12--------22-|

编辑。稍加思考，我现在明白我将无法实现这一目标。问题是时间轴上的每个点都是，比如 "todo" 时间用于特定任务。但是可能有几个任务。每个任务都是一个 table 单元格。所以会有多个时间线：

|------7----12--------22-|
|----5------12------20---|
|--------10-12--------21--|
|------7----12-----18----|

而且因为每个点上面都有一个标签，所以我无法根据时间定位这些点。因为在垂直方向上没有 24 个位置的空间。因此，具有相同时间（在两个不同时间轴中）的点将不会正确对齐。

我现在的解决方法是将每个任务时间分成两个数组，一个是 12.00 之前的所有时间，另一个是 12.00 之后的所有时间。

然后我从左边取第一个数组，从最早的时间开始（导致超级视图的约束），其余的从右边的视图开始，依此类推。

然后我获取第二个数组并从末尾（最新时间）开始并将它们添加到右侧（约束尾随到 superview），其余的留给之前的视图等等。

这是结果： enter image description here

Answer 1

我做了类似的事情。我 return 每个 tableview 单元格视图的 UIImage，其中数字根据 NSDate 水平排列。您只需要将 NSDate 转换为 CGFloat 值即可。这个扩展给了我一个代表 NSDate 的小时和分钟的十进制值。

extension NSDate {
    var hourInDecimal: CGFloat {
        get {
            let userCalendar = NSCalendar.currentCalendar()

            let timeNowInDecimal = CGFloat(userCalendar.component(.Hour, fromDate: self)) + CGFloat(userCalendar.component(.Minute, fromDate: self))/60
            return timeNowInDecimal
        }
    }
}

如果是 24 小时，水平安装它们很困难，所以我只从第一个小时到最后一个小时使用数据。早上 7 点 -> 晚上 10 点确实合适。

然后获取与左边缘的距离（对于约束）...

let oneHourWidth = containerView.width/(lateHour - earlyHour)
let distanceToLeftEdge = oneHourWidth * (eventTime.hourInDecimal - earlyHour)

请注意，Swift 3.

的上述部分更改

在 Swift 中使用 NSLayoutConstraint 将多个 UIView 放置在视觉时间轴上

Position multiple UIViews on a visual timeline with NSLayoutConstraint in Swift

timeline

uiview

ios

nslayoutconstraint

swift