UILabelの動作を理解しようとしています。

Question

Appleの電卓のUIレイアウトを再現しようとしています。

ここに私がこれまで持っていたもののgifがあります。

私が遭遇している問題は、主にUILablesと関係があります。上記GIFに見られるように は、私は、次のような問題を経験しています：デバイスの回転に

• 、ラベル「L1」および「L2」ポップ、代わりに円滑遷移します。

• 茶色のボタンのラベルは、ポートレートに戻るときに消えます。

ラベル「L1」と「L2」については、コンテンツモードと制約を試してみましたが、まだまだトランジションがあります。

消えるラベルについては、スタックビューを非表示にして非表示にする代わりに、スタックビューで制約を使用してトランジションを処理しようとしましたが、結果は残っています同じ。

私もオンラインで見て、いくつかの提案を試みましたが、ほとんどの回答は時代遅れであったか、単純に機能しませんでした。

コードは非常に単純です。主に、ビューとその制約を設定することで構成されています。

extension UIStackView { 
    convenience init(axis: UILayoutConstraintAxis, distribution: UIStackViewDistribution = .fill) { 
     self.init() 
     self.axis = axis 
     self.distribution = distribution 
     self.translatesAutoresizingMaskIntoConstraints = false 
    } 
} 

class Example: UIView { 
    let mainStackView = UIStackView(axis: .vertical, distribution: .fill) 
    let subStackView = UIStackView(axis: .horizontal, distribution: .fillProportionally) 
    let portraitStackView = UIStackView(axis: .vertical, distribution: .fillEqually) 
    let landscapeStackView = UIStackView(axis: .vertical, distribution: .fillEqually) 

    var containerView: UIView = { 
     $0.backgroundColor = .darkGray 
     $0.translatesAutoresizingMaskIntoConstraints = false 
     return $0 
    }(UIView(frame: .zero)) 

    let mainView: UIView = { 
     $0.backgroundColor = .blue 
     $0.translatesAutoresizingMaskIntoConstraints = false 
     return $0 
    }(UIView(frame: .zero)) 

    let labelView: UIView = { 
     $0.backgroundColor = .red 
     $0.translatesAutoresizingMaskIntoConstraints = false 
     return $0 
    }(UIView(frame: .zero)) 

    var labelOne: UILabel! 
    var labelTwo: UILabel! 

    override init(frame: CGRect) { 
     super.init(frame: frame) 
     backgroundColor = .red 
     autoresizingMask = [.flexibleWidth, .flexibleHeight] 

     labelOne = createLabel(text: "L1") 
     labelOne.translatesAutoresizingMaskIntoConstraints = false 
     labelOne.backgroundColor = .darkGray 
     labelTwo = createLabel(text: "L2") 
     labelTwo.translatesAutoresizingMaskIntoConstraints = false 
     labelTwo.backgroundColor = .black 

     landscapeStackView.isHidden = true 

     mainView.addSubview(labelView) 
     labelView.addSubview(labelOne) 
     labelView.addSubview(labelTwo) 
     addSubview(mainStackView) 
     mainStackView.addArrangedSubview(mainView) 

     setButtonStackView() 
     setStackViewConstriants() 
     setDisplayViewConstriants() 
    } 

    required init?(coder aDecoder: NSCoder) { 
     fatalError("init(coder:) has not been implemented") 
    } 

    func setStackViewConstriants() { 
     mainStackView.translatesAutoresizingMaskIntoConstraints = false 
     mainStackView.topAnchor.constraint(equalTo: topAnchor).isActive = true 
     mainStackView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true 
     mainStackView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true 
     mainStackView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true 
    } 

    func setDisplayViewConstriants() { 
     mainView.heightAnchor.constraint(equalTo: heightAnchor, multiplier: 288/667).isActive = true 

     labelView.heightAnchor.constraint(equalTo: mainView.heightAnchor, multiplier: 128/288).isActive = true 
     labelView.centerYAnchor.constraint(equalTo: mainView.centerYAnchor).isActive = true 
     labelView.leadingAnchor.constraint(equalTo: mainView.leadingAnchor, constant: 24).isActive = true 
     labelView.trailingAnchor.constraint(equalTo: mainView.trailingAnchor, constant: -24).isActive = true 

     labelOne.heightAnchor.constraint(equalTo: labelTwo.heightAnchor, multiplier: 88/32).isActive = true 
     labelOne.trailingAnchor.constraint(equalTo: labelView.trailingAnchor).isActive = true 
     labelOne.leadingAnchor.constraint(equalTo: labelView.leadingAnchor).isActive = true 
     labelOne.topAnchor.constraint(equalTo: labelView.topAnchor).isActive = true 

     labelTwo.topAnchor.constraint(equalTo: labelOne.bottomAnchor).isActive = true 
     labelTwo.trailingAnchor.constraint(equalTo: labelView.trailingAnchor).isActive = true 
     labelTwo.leadingAnchor.constraint(equalTo: labelOne.leadingAnchor).isActive = true 
     labelTwo.bottomAnchor.constraint(equalTo: labelView.bottomAnchor).isActive = true 
    } 

    func createLabel(text: String) -> UILabel { 
     let label = UILabel(frame: .zero) 
     label.text = text 
     label.font = UIFont.init(name: "Arial-BoldMT", size: 60) 
     label.textColor = .white 
     label.textAlignment = .right 
     label.contentMode = .right 
     label.minimumScaleFactor = 0.1 
     label.adjustsFontSizeToFitWidth = true 
     label.numberOfLines = 0 
     label.translatesAutoresizingMaskIntoConstraints = false 
     return label 
    } 

    func createButton(text: String) -> UIButton { 
     let button = UIButton(type: .custom) 
     button.setTitle(text, for: .normal) 
     button.setTitleColor(.white, for: .normal) 
     button.layer.borderColor = UIColor.white.cgColor 
     button.layer.borderWidth = 1 
     button.titleLabel?.font = UIFont.init(name: "Arial-BoldMT", size: 60) 
     button.titleLabel?.minimumScaleFactor = 0.1 
     button.titleLabel?.adjustsFontSizeToFitWidth = true 
     button.titleLabel?.translatesAutoresizingMaskIntoConstraints = false 
     button.titleLabel?.leadingAnchor.constraint(equalTo: button.leadingAnchor).isActive = true 
     button.titleLabel?.trailingAnchor.constraint(equalTo: button.trailingAnchor).isActive = true 
     button.titleLabel?.topAnchor.constraint(equalTo: button.topAnchor).isActive = true 
     button.titleLabel?.bottomAnchor.constraint(equalTo: button.bottomAnchor).isActive = true 
     button.titleLabel?.textAlignment = .center 
     button.titleLabel?.contentMode = .scaleAspectFill 
     button.titleLabel?.numberOfLines = 0 
     return button 
    } 

    func setButtonStackView() { 
     for _ in 1...5 { 
      let stackView = UIStackView(axis: .horizontal, distribution: .fillEqually) 
      for _ in 1...4 { 
       let button = createButton(text: "0") 
       button.backgroundColor = .brown 
       stackView.addArrangedSubview(button) 
      } 
      landscapeStackView.addArrangedSubview(stackView) 
     } 

     for _ in 1...5 { 
      let stackView = UIStackView(axis: .horizontal, distribution: .fillEqually) 
      for _ in 1...4 { 
       let button = createButton(text: "0") 
       button.backgroundColor = .purple 
       stackView.addArrangedSubview(button) 
      } 
      portraitStackView.addArrangedSubview(stackView) 
     } 

     subStackView.addArrangedSubview(landscapeStackView) 
     subStackView.addArrangedSubview(portraitStackView) 
     mainStackView.addArrangedSubview(subStackView) 
    } 

    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) { 
     if UIDevice.current.orientation.isLandscape && landscapeStackView.isHidden == true { 
      self.landscapeStackView.isHidden = false 
     } 
     if UIDevice.current.orientation.isPortrait && landscapeStackView.isHidden == false { 
      self.landscapeStackView.isHidden = true 
     } 
     self.layoutIfNeeded() 
    } 
} 

Answer 1

概要：

• 以下のソリューションは唯一のラベルL1およびL2用で別々の部品/ビューコントローラ（デバッグが容易）
• でインクリメンタルに物事を行います。
• 電卓ボタンの場合は、UICollectionViewControllerを使用することをお勧めします。 （私はそれを実装していない、子ビューコントローラとして追加）

コード：

private func setupLabels() { 

    view.backgroundColor = .red 

    let stackView   = UIStackView() 
    stackView.axis   = .vertical 
    stackView.alignment  = .fill 
    stackView.distribution = .fill 

    stackView.translatesAutoresizingMaskIntoConstraints = false 

    view.addSubview(stackView) 

    stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true 
    stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true 
    stackView.topAnchor.constraint(equalTo: view.topAnchor, constant: 20).isActive = true 


    let label1 = UILabel() 
    label1.text    = "L1" 
    label1.textColor  = .white 
    label1.backgroundColor = .darkGray 
    label1.textAlignment = .right 
    label1.font = UIFont.preferredFont(forTextStyle: .title1) 


    let label2 = UILabel() 
    label2.text    = "L2" 
    label2.textColor  = .white 
    label2.backgroundColor = .black 
    label2.textAlignment = .right 
    label2.font = UIFont.preferredFont(forTextStyle: .caption1) 

    stackView.addArrangedSubview(label1) 
    stackView.addArrangedSubview(label2) 
}