Question

我正在创建自己的自定义分段控制器。我正在关注此视频（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中，在渲染和绘制组件之后，它会显示：

这似乎很正常。当你点击任何其他年份按钮时，你应该有能力将橙色选择器移动到那一年。（这与分段控制相似）。

当我运行它时，模拟器会给出：

这看起来有点奇怪。 ornage选择器看起来比storybaord中的那个更宽。所以，我点击了最后一个按钮（“2020”），这就是结果：

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

为什么宽度不对？我使用错误的变量来计算正确的宽度吗？

Answer 1

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

为什么这个UIView的宽度比故事板中的长？

1 个答案: