如何在自定义段控制器中居中文本？迅速

问题描述

我正在制作自定义段控制器。我遇到了以下问题：可选视图中的文本未居中。我想找到一个通用的解决方案，使文本保持在所选段的中心，而不管单元格的数量。求求你了非常感谢！

图片：Example of problem

代码：

@IBDesignable
class CustomSegmentedCntrl: UIControl {
    private var buttons = [UIButton]()
    private var selector: UIView!
    var selectedSegmentIndex = 0
   
    private var segments = [String]() {
        didSet {
            updateView()
        }
    }
    
    @IBInspectable
    var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
    
    @IBInspectable
    var borderColor: UIColor = UIColor.clear {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }

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

    @IBInspectable
    var selectorTextColor: UIColor = .clear {
        didSet {
            updateView()
        }
    }
    
    func configure(with segmentButtons:[String]) {
        self.segments = segmentButtons
    }
    
    
    func setProperties(borderWidth: CGFloat,borderColor: UIColor,textColor: UIColor,selectorColor: UIColor,selectorTextColor: UIColor) {
        self.borderWidth = borderWidth
        self.borderColor = borderColor
        self.selectorColor = selectorColor
        self.textColor = textColor
        self.selectorTextColor = selectorTextColor
    }
    
    
    
    func updateView() {
        buttons.removeAll()
        subviews.forEach { $0.removeFromSuperview()}
        
        let buttonTitles = segments
        
        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(button:)),for: .touchUpInside)
            buttons.append(button)
        }
        
        let selectorWidth = frame.width / CGFloat(buttonTitles.count)
        selector = UIView(frame: CGRect(x: 0,y: 0,width: selectorWidth,height: frame.height))
        selector.layer.cornerRadius = frame.height/2
        selector.backgroundColor = selectorColor
        addSubview(selector)
        
        ///Stack view constraints
        let stackView = UIStackView(arrangedSubviews: buttons)
        stackView.axis = .horizontal
        stackView.alignment = .fill
        stackView.distribution = .fillProportionally
        addSubview(stackView)
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
        stackView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
        stackView.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
        stackView.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
    }
    
    override func draw(_ rect: CGRect) {
        layer.cornerRadius = frame.height/2
    }
    
    @objc func buttonTapped(button: UIButton) {
        for (buttonIndex,btn) in buttons.enumerated() {
            btn.setTitleColor(textColor,for: .normal)
            
            if btn == button {
                print(buttonIndex)
                selectedSegmentIndex = buttonIndex
                let selectorStartPosition = frame.width/CGFloat(buttons.count) * CGFloat(buttonIndex)
                UIView.animate(withDuration: 0.2,animations: {
                    self.selector.frame.origin.x = selectorStartPosition
                })
                btn.setTitleColor(selectorTextColor,for: .normal)
            }
        }
    }
    
}

ViewController 是这样的：

  //View at the storyboard
 @IBOutlet weak var secondSegmentedControll: CustomSegmentedCntrl!

   func installSecondCell() {
       self.secondSegmentedControll.borderColor = .green
       self.secondSegmentedControll.selectorTextColor = .blue
       self.secondSegmentedControll.selectorColor = .red
       self.secondSegmentedControll.configure(with: ["one","two","three","four"])
       self.secondSegmentedControll.borderWidth = 1
   }

 override func viewDidLoad() {
       super.viewDidLoad()
       installSecondCell()
   }

解决方法

解决方案：将这个：stackView.distribution = .fillEqually 添加到 updateView()