我正在创建自己的自定义分段控制器。我正在关注这个视频(https://www.youtube.com/watch?v=xGdRCUrSu94)。这是自定义组件的代码:为什么这个UIView的宽度比故事板长?
//
// 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)
}
}
}
}
在故事板,它呈现并提请组件后,就说明这一点:
这似乎是正常的。你应该有能力,当你点击任何其他年份按钮时,橙色选择器将移动到那一年。 (这与分段控制相似)。
当我运行它,模拟器给出了这样:
这似乎有点奇怪。 ornage选择器看起来比storybaord中的更宽一些。所以,我点击了最后一个按钮(“2020”),这是结果:
啊,我看的选择似乎得到它所需要的宽度不正确。在代码中,你可以看到它获得了正确的宽度,但由于某种原因,事实并非如此。
为什么它得到错误的宽度?我是否使用错误的变量来计算正确的宽度?
我不会合并自动布局和帧操作。你应该尽力而为。 – Paulw11