自定义底部栏不在自定义分段控件的正确位置
The custom bottom bar is not at the correct position for a custom segmented control
我正在尝试创建一个自定义 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" 时,条会移动到正确的位置,如下所示-
我认为这种方法行不通,因为调用 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()
}
}
这大概是您正在实施的,以便在点击某个片段时采取行动。
这具有在控件宽度发生变化时(例如设备旋转时)自动调整条形大小的额外优势。
我正在尝试创建一个自定义 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" 时,条会移动到正确的位置,如下所示-
我认为这种方法行不通,因为调用 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()
}
}
这大概是您正在实施的,以便在点击某个片段时采取行动。
这具有在控件宽度发生变化时(例如设备旋转时)自动调整条形大小的额外优势。