自定义底部栏不在自定义分段控件的正确位置答案

【问题标题】：The custom bottom bar is not at the correct position for a custom segmented control自定义底部栏不在自定义分段控件的正确位置
【发布时间】：2019-08-05 23:10:51
【问题描述】：

我正在尝试创建一个自定义UISegmentedControl，它在所选选项下方的底部有一个栏。我添加了一个CALayer 作为酒吧。更改所选选项后，栏不会移动到其预期位置

自定义UISegmentedControl的代码如下-

class ProfileSegmentedControl: UISegmentedControl {
    private lazy var bottomBar = getBottomBar()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }
}

private extension ProfileSegmentedControl {
    func setup() {
        tintColor = .clear
        let normalAttributes: [NSAttributedString.Key: Any] = [
            .foregroundColor: UIColor.white,
            .font: UIFont.systemFont(ofSize: 16, weight: .medium)
        ]
        setTitleTextAttributes(normalAttributes, for: .normal)
        setTitleTextAttributes([.foregroundColor: UIColor(named: "black") as Any], for: .selected)
    }
}

private extension ProfileSegmentedControl {
    func getBottomBar() -> CALayer {
        let bar = CALayer()
        bar.backgroundColor = UIColor(named: "black")?.cgColor
        layer.addSublayer(bar)
        return bar
    }

    func setBarFrame() {
        let barWidth = bounds.width / CGFloat(numberOfSegments)
        let barHeight: CGFloat = 2
        let x = barWidth * CGFloat(selectedSegmentIndex)
        let y = bounds.height - barHeight

        bottomBar.frame = CGRect(x: x, y: y, width: barWidth, height: barHeight)
    }
}

extension ProfileSegmentedControl {
    override func layoutIfNeeded() {
        super.layoutIfNeeded()
        setBarFrame()
    }
}

点击一个选项需要 2 次才能将底部栏移动到预期位置。

谁能指出为什么会这样？谁能指出如何解决这个问题？

编辑- 当第一次加载视图并点击“Segment 0”时，栏会出现在正确的位置，如下所示-

当点击“Segment 1”一次时，条不移动如下图-

当再次点击“Segment 1”时，条形图移动到正确的位置，如下图-

【问题讨论】：

用图片更新问题
你说哪里的酒吧搬家了？
底部栏的边框在“setBarFrame”方法中设置。该方法在“layoutIfNeeded”方法中调用

标签： ios swift uisegmentedcontrol

【解决方案1】：

我认为这种方法行不通，因为在调用layoutIfNeeded() 时尚未设置selectedSegmentIndex。这就是为什么在点击 Seg-1 时会在 Seg-2 下划线，反之亦然。

我建议将您对 layoutIfNeeded() 的覆盖替换为：

extension ProfileSegmentedControl {

    override func layoutSubviews() {
        super.layoutSubviews()
        setBarFrame()
    }

}

然后添加valueChanged 操作：

@IBAction func segmentChanged(_ sender: Any) {
    if let segControl = sender as? ProfileSegmentedControl {
        segControl.setNeedsLayout()
    }
}

据推测，您无论如何都在实施以在点击细分时采取行动。

这具有在控件宽度发生变化时自动调整条形的额外优势 - 例如在设备旋转时。

【讨论】：