このUIViewの幅がストーリーボードよりも長いのはなぜですか？

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) 
      } 
     } 
    } 

} 

、それはレンダリングやコンポーネントを描画した後、それはこのことを示しています

これは正常なようです。他の年のボタンをクリックすると、オレンジ色のセレクターがその年に移動します。 （これはセグメント化されたコントロールと同じです）。

私はそれを実行すると、シミュレータはこれを与える：

これは少し奇妙に思えます。オーナージュセレクタはストーリーボードのものより少し広いです。だから、私は最後のボタン（「2020」）をクリックし、これが結果です：

ああ、私はセレクタは必要な間違った幅を取得しているように見える参照してください。コード内では、正しい幅が得られていることがわかりますが、なんらかの理由でそうではありません。

なぜ間違った幅になっていますか？間違った変数を使って正しい幅を計算していますか？

Answer 1

なぜボタンを強調表示するためのビューを追加していますか？ボタンの選択状態を構成する必要があります。色合いを設定して選択した背景色を設定し、選択した状態のボタンのタイトル色を設定することができます。