防止 UIView 重叠

Posted 2023-03-13

【中文标题】防止 UIView 重叠

【英文标题】：Prevent UIViews from overlapping

【发布时间】：2017-10-20 13:15:38

【问题描述】：

我正在尝试实现一个圆环图，但我在努力防止标签相互重叠。我正在寻找有关避免这种情况的清洁解决方案的想法。

段和标签类如下所示：

class Segment 
    var index: Double?
    var tagText: String?


class SegmentTag: UIView 
    @IBOutlet var iconView: UIImageView!
    @IBOutlet var textLabel: UILabel!

    init(text: String?, icon: UIImage?, frame: CGRect) 
        ...
    

在图表类中，在draw(_rect:)中绘制线段和标签：

override func draw(_ rect: CGRect) 
    for tag in tags 
        tag.removeFromSuperview()
    
    tags = [UIView]()

    let tagSize = CGSize(width: 50, height: 60)

    for segment in segments 
        // ... Draw each segment
        let radius = ...
        let angle = ...
        let tag = SegmentTag(text: segment.tagText, icon: tagIcon, frame: tagRect)
        var tagPoint = CGPoint(x: radius * cos(angle),
                               y: radius * sin(angle))
        var tagRect = CGRect(origin: tagPoint, size: tagSize)
        self.addSubview(tag)
        tags.append(tag)
    

您将如何避免视图重叠？

【问题讨论】：

我也遇到过类似的问题，你可以通过改变线条的长度来缓解这个问题。但是，当您有大量较小的值聚集在一起时，您仍然会遇到同样的问题。我最终不得不在一个单独的表格视图中实现一个图例。

【参考方案1】：

首先计算各种SegmentTag 对象的所有点，然后将任何对象组合在一起，而不是太近而无法看到。

将对象分组后的一个选项，显示不同类型的标签，GroupTag 或其他东西，可能带有 SegmentTag 的计数，可以点击它并显示一个弹出窗口SegmentTag 对象的列表。

另一种选择是使用您的GroupTag 只是看起来不同，但显示数据，例如它不会有图像，而是一个值列表。

在我看来，这些解决方案比实际计算所有可能数据集的非重叠位置要容易得多，也更可靠。