ios - 为什么这个 UIView 的宽度比 Storyboard 中的宽度长？

Question

我正在创建自己的自定义分段 Controller 。我正在关注这个视频( https://www.youtube.com/watch?v=xGdRCUrSu94 )。以下是自定义组件的代码:

//
//  YearSelectorSegControl.swift
//  OurDailyStrength iOS
//
//  Created by Rob Avery on 8/28/17.
//  Copyright © 2017 Rob Avery. All rights reserved.
//

import UIKit

@IBDesignable
class YearSelectorSegControl: UIView {

    var buttons = [UIButton]()
    var selector: UIView!
    var sv: UIStackView!

    @IBInspectable
    var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }

    @IBInspectable
    var borderColor: UIColor = UIColor.clear {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }

    @IBInspectable
    var commaSeparatedButtonTitles: String = "" {
        didSet {
            updateView()
        }
    }

    @IBInspectable
    var textColor: UIColor = .lightGray {
        didSet {
            updateView()
        }
    }

    @IBInspectable
    var selectorColor: UIColor = .darkGray {
        didSet {
            updateView()
        }
    }

    @IBInspectable
    var selectorTextColor: UIColor = .white {
        didSet {
            updateView()
        }
    }

    func updateView() {
        // clear previous history
        buttons.removeAll()
        subviews.forEach { (view) in
            view.removeFromSuperview()
        }

        let buttonTitles = commaSeparatedButtonTitles.components(separatedBy: ",")

        // get names for buttons
        for buttonTitle in buttonTitles {
            let button = UIButton(type: .system)
            button.setTitle(buttonTitle, for: .normal)
            button.setTitleColor(textColor, for: .normal)
            button.addTarget(self, action: #selector(buttonTapped(clickedBtn:)), for: .touchUpInside)
            buttons.append(button)
        }

        buttons[0].setTitleColor(selectorTextColor, for: .normal)

        // configure selector (widget that highlights the selected item)
        let selectorWidth = frame.width / CGFloat(buttonTitles.count) // length given for selector
        selector = UIView(frame: CGRect(x: 0, y: 0, width: selectorWidth, height: frame.height))
        selector.layer.cornerRadius = 0
        selector.backgroundColor = selectorColor
        addSubview(selector)

        // add buttons to stackview
        sv = UIStackView(arrangedSubviews: buttons)
        sv.axis = .horizontal
        sv.alignment = .fill
        sv.distribution = .fillProportionally
        addSubview(sv)

        // set constraints for stackview
        sv.translatesAutoresizingMaskIntoConstraints = false
        sv.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
        sv.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
        sv.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
        sv.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
    }

    override func draw(_ rect: CGRect) {
        layer.cornerRadius = 0
    }

    func buttonTapped(clickedBtn: UIButton) {

        for (index, button) in buttons.enumerated() {
            if button == clickedBtn {
                let selectorStartPosition = frame.width/CGFloat(buttons.count) * CGFloat(index)
                UIView.animate(withDuration: 0.3, animations: {
                    self.selector.frame.origin.x = selectorStartPosition
                })
                button.setTitleColor(selectorTextColor, for: .normal)
            } else {
                button.setTitleColor(textColor, for: .normal)
            }
        }
    }

}

在 Storyboard 中，渲染并绘制组件后，它会显示以下内容:

这看起来很正常。您应该有能力，当您单击任何其他年份按钮时，橙色选择器将移至该年份。 (这与分段控件类似)。

当我运行它时，模拟器会给出以下内容:

这看起来有点奇怪。装饰选择器看起来比 Storyboard中的选择器宽一点。所以，我点击了最后一个按钮(“2020”)，这就是结果:

啊，我看到选择器似乎得到了它所需的错误宽度。在代码中，您可以看到它获得了正确的宽度，但由于某种原因，它不是。

为什么宽度错误？我是否使用了错误的变量来计算正确的宽度？

Answer 1

为什么要添加 View 来突出显示按钮？您应该配置按钮的选定状态。您可以设置色调颜色来设置选定的背景颜色，并设置选定状态的按钮标题颜色。