在用作导航项的 UISegmentedControl 上模拟徽章答案

【问题标题】：Simulating a badge on a UISegmentedControl that is being used as a navigation item在用作导航项的 UISegmentedControl 上模拟徽章
【发布时间】：2020-01-20 17:33:06
【问题描述】：

我有一个嵌入在UINavigationController 中的UIViewController。这个视图控制器的导航项是一个UISegmentedControl，有 3 个段。我正在尝试找到一种方法来为每个细分市场添加一个“新”徽章。 UISegmentedControl 似乎通常不允许您这样做，但我认为出于我的目的，也许我可以使用位于每个段的左侧或右侧边缘的自定义 UIView 来模拟这一点。我知道我可以得到UISegmentedControl 的宽度，并且由于自动大小模式设置为“等宽”，我可以简单地将总宽度除以 3 来确定每个段的大致宽度似乎是合理的。

但是，有几件事我不确定：

是否可以确定导航栏中 UISegmentedControl 的 x/y 位置，以便我知道自定义视图的位置？
是否可以在导航栏包含的空间内的这些位置添加自定义视图？

【问题讨论】：

我的猜测是围绕 UISegmentedControl 创建一个包装视图，并从视图中控制所有逻辑。它基本上可能只是一个 UIView，其中添加了分段控件作为子视图。现在，通过使用简单的计算，您将轻松找到段的位置，而且，由于它位于您自己的 UIView 空间中，您可以随心所欲地在此视图的任何位置添加您的徽章。
就用户体验而言，这可能会“导致界面脱节和混乱”。 developer.apple.com/design/human-interface-guidelines/ios/…

标签： ios swift uinavigationcontroller uisegmentedcontrol badge

【解决方案1】：

在Segment Control上方添加视图，放置约束。

在ViewDidLoad() 使用代码

 self.badge1.addSubview(self.addCounter(count: 0))
 self.badge2.addSubview(self.addCounter(count: 9))

使用此功能制作徽章计数器

func addCounter(count: Int)->UIView {
    // Count > 0, show count
    if count > 0 {

        // Create label
        let fontSize: CGFloat = 10
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: fontSize)
        label.textAlignment = .center
        label.textColor = .white
        label.backgroundColor = .red

        // Add count to label and size to fit
        label.text = "\(NSNumber(value: count))"
        label.sizeToFit()

        // Adjust frame to be square for single digits or elliptical for numbers > 9
        var frame: CGRect = label.frame
        frame.size.height += CGFloat(Int(0.4 * fontSize))
        frame.size.width = (count <= 9) ? frame.size.height : frame.size.width + CGFloat(Int(fontSize))
        label.frame = frame

        // Set radius and clip to bounds
        label.layer.cornerRadius = frame.size.height / 2.0
        label.clipsToBounds = true

        // Show label in accessory view and remove disclosure
        return label

    } else {
        return UIView()
    }
}

最后的结果

【讨论】：