SeSAC_iOS_Day 54 | TIL


📂 AutoLayout


✔️ Frame Based Layout

  • AutoLayout vs FrameBasedLayout
    AutoLayoutを使用する前に、常にFrame Based Layout(デバイスのサイズと割合がほぼ同じ場合)
  • を使用していました.
  • Frame Based Layout -> AutoLayout -> Adaptive Layout(SizeClass, Trait Collection, Universal Storyboard)
  • ✔️ Autoresizing Mask

  • 機能
  • は、トップビューのサイズが変化した場合に、サブビューを変更することができます.
  • に設定する自動調整maskのレイアウトはConstraintsコード
  • に変換されます.

    ✔️ NSLayoutConstraints, Anchor


    以前ブットキャンプで少し勉強したことがあるので、理解しやすいです!キーワードには、前にアクションで整理したリンクもあります.
  • NSLayoutConstraints
  • Anchor
  • safeArea開発を考える:比較項目にself.view.safeAreaLayoutGuideを記入すれば
  • コードを使用してAutoLayoutを記述する際に考慮しなければならない事項
    -レイアウトを決定する前にaddSubViewを実行する必要があります
    - subView.翻訳自動調整MaskIntoConstraaint=false設定
    :自動調整タスクのConstraintsへの変換を防止
    :このプロパティは、コンストレイントが設定されている場合に自動レイアウトの設定を再試行することはできません.~を覆うことができます
    :IB(Storyboard)ではdefaultがfalse(値を別途変更する必要はありません)、コードではdefaultがtrueのためfalse
  • に再変更する必要があります.
  • 1 1つ以上のビューを同じ設定する必要がある場合は、配列にビューを配置し、forEach文を使用してコード
  • を効率的に整理します.
    [titleLabel, captionLabel, activateButton].forEach { subView in
        subView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(subView)
    }
  • NSLayoutConstraintを適用する場合は、.isActive = trueを1つずつ記入できますが、複数適用する必要がある場合は、view.addConstraints([top, centerX, width, height])を記入して一括適用できます.
  • activateメソッド
  • も使用できます.
    NSLayoutConstraint.activate([
                activateButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
                activateButton.widthAnchor.constraint(equalToConstant: 300),
                activateButton.heightAnchor.constraint(equalToConstant: 50),
                activateButton.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor)
            ])

    ✔️ Snapkit


    ついに伝説のSnapkitを使いました!NSLayoutConstraintは確かにコードが長くなった気がしますが、Snapkitを使うと本当にコードが減った気がします!
  • Snapkitは、ライブラリ内でtranslateAutoresizingMaskIntoConstraintsの値をfalseに設定するため、値を変更する必要はありません.
  • のデフォルトはSubViewです.snp.makeConstraintsメソッドを使用して制約
  • を設定できます.
    moneyLabel.snp.makeConstraints { make in
        make.centerX.equalTo(view)
        make.centerY.equalTo(view)
        make.width.equalTo(300)
        make.height.equalTo(80)
    }
    
    activateButton.snp.makeConstraints {
        $0.leadingMargin.equalTo(view)
        $0.trailingMargin.equalTo(view)
        $0.bottom.equalTo(view.safeAreaLayoutGuide)
        $0.height.equalTo(view).multipliedBy(0.1)
    }
    
    redView.snp.makeConstraints { make in
        // 레이아웃이 덮어쓰기 되겠지~ 라고 생각하면 안됨. 충돌할 확률이 높음
        make.edges.equalToSuperview().inset(100)
        //make.bottom.equalTo(-400)
    }
    
    // 하나의 constraint만 바꾸고싶을 때 updateConstraint 사용
    redView.snp.updateConstraints { make in
        make.bottom.equalTo(-400)
    }
    
    redView.addSubview(blueView)
    blueView.backgroundColor = .blue
    
    blueView.snp.makeConstraints { make in
        // offset은 기존 view에 다 더해주는것... 이동시켜줌..~
        make.edges.equalToSuperview().offset(50)
    }
  • Snapkitを使用する場合のみならず、各ビューの特性を更新する場合には、それらを分離して個別に記述することもできるが、
  • .
    let moneyLabel = UILabel()
    
    override func viewDidLoad() {
    	super.viewDidLoad()
        	moneyLabel.text = "47200원"
        	moneyLabel.backgroundColor = .yellow
    }
  • を生成するとともに、特性を一緒に記入することができる.
  • このときは使いやすいライブラリ2
  • である.
    let moneyLabel: UILabel = {
    	let label = UILabel()
            label.backgroundColor = .yellow
            label.text = "47,200원"
            return label
    }()

    📂 AppDelegate, SceneDelegate


    ✔️ WWDC 19: Architecting Your App for Multiple Windows