Constraints with Code #1

19327 ワード
iOS テキストリンク
Constraints with Code #0で作成された
NSLayoutConstraintとNSLayoutAnchorを使用して画面を直接構成します.

まず、画面を半分に分けて、コードでコンストレイントを作成し、下のビューを上のビューと同じ出力にします。



まず、NSLayoutConstraintとNSLayoutAnchorをテストし、extensionを使用してそれぞれ関数を作成します.
  • layoutWithInitializer() -> NSLayoutConstraint
  • layoutWithAnchor() -> NSLayoutAnchor

    • NSLayoutConstraintの使用方法

    extension FillParentViewController {
   func layoutWithInitializer() {
    blueView.translatesAutoresizingMaskIntoConstraints = false // #1
    
    let leading = NSLayoutConstraint(item: blueView, attribute: .leading, relatedBy: .equal, toItem: bottomContainer, attribute: .leading, multiplier: 1.0, constant: 0)
    let top = NSLayoutConstraint(item: blueView, attribute: .top, relatedBy: .equal, toItem: bottomContainer, attribute: .top, multiplier: 1.0, constant: 0)
    let trailing = NSLayoutConstraint(item: blueView, attribute: .trailing, relatedBy: .equal, toItem: bottomContainer, attribute: .trailing, multiplier: 1.0, constant: 0)
    let bottom = NSLayoutConstraint(item: blueView, attribute: .bottom, relatedBy: .equal, toItem: bottomContainer, attribute: .bottom, multiplier: 1.0, constant: 0)
    
    NSLayoutConstraint.activate([leading,top,trailing,bottom])
   }
}

  • NSLayoutConstraintを使用して必要な制約を作成し、activateメソッドで制約を有効にします.

  • このactivateメソッドは、アクティブ化するコンストレイントを配列に渡し、自動的に正しい位置に追加します.
    • !! ここでの注意事項
    #1のコードを書かないと、私が欲しくない結果が出力されます.
    why??

  • ViewControllerでは、BlueViewはコードで制約を生成する前に制約がないためです.

  • この場合、インタフェースビルダーは、NSA u t o R i z i n g MaskLayoutConstraintに従って自動的に制約を追加します.

  • これは、私が作成して適用した制約と、N a n s t o R i z i z i n g MaskLayoutConstraintに基づいて自動的に追加された制約が競合するためです.
    • この問題を解決するために、1のコードのように、T r a n s l a t e s A u t R e z i z ingMaskIntoConstraintsを使用しないことを宣言することができます.
    blueView.translatesAutoresizingMaskIntoConstraints = false // #1

    NSLayoutAnchorの使い方

    extension FillParentViewController {
   func layoutWithAnchor() {
    blueView.translatesAutoresizingMaskIntoConstraints = false
    
    blueView.leadingAnchor.constraint(equalTo: bottomContainer.leadingAnchor).isActive = true// #1
    blueView.trailingAnchor.constraint(equalTo: bottomContainer.trailingAnchor).isActive = true
    blueView.topAnchor.constraint(equalTo: bottomContainer.topAnchor).isActive = true
    blueView.bottomAnchor.constraint(equalTo: bottomContainer.bottomAnchor).isActive = true
   }
}
    NSLayoutConstraintを使うよりずっと簡単です!

  • 各コンストレイントは、Viewが持つAnchorプロパティとして指定できます.

  • 各Anchorプロパティには、さまざまな方法があります.

  • 1に示すように、SuperViewに必要なAnchorプロパティをconstraintメソッドに渡し、関係が等しく定数が0の制約を追加します.
    • NSLayoutConstraint方式と同様に、NSLayoutAnchorも翻訳自動調整MaskIntoConstraintを使用しないと宣言する必要があります.
    blueView.translatesAutoresizingMaskIntoConstraints = false

    結果画面



    2つの方法を比較しますハハハ


    同じ画面を構成するために同じ制約を作成しましたが、2つの方法のコード実装を見ると、

    NSLayoutConstraint

    extension FillParentViewController {
   func layoutWithInitializer() {
    blueView.translatesAutoresizingMaskIntoConstraints = false // #1
    
    let leading = NSLayoutConstraint(item: blueView,
                                      attribute: .leading, 
                                      relatedBy: .equal,
                                      toItem: bottomContainer, 
                                      attribute: .leading,
                                      multiplier: 1.0, 
                                      constant: 0)
    let top = NSLayoutConstraint(item: blueView, 
                                  attribute: .top, 
                                  relatedBy: .equal,
                                  toItem: bottomContainer,
                                  attribute: .top, 
                                  multiplier: 1.0, 
                                  constant: 0)
    let trailing = NSLayoutConstraint(item: blueView, 
                                        attribute: .trailing, 
                                        relatedBy: .equal,
                                        toItem: bottomContainer,
                                        attribute: .trailing,
                                        multiplier: 1.0,
                                        constant: 0)
    let bottom = NSLayoutConstraint(item: blueView, 
                                      attribute: .bottom, 
                                      relatedBy: .equal,
                                      toItem: bottomContainer,
                                      attribute: .bottom,
                                      multiplier: 1.0, 
                                      constant: 0)

    NSLayoutConstraint.activate([leading,top,trailing,bottom])
   }
}

    NSLayoutAnchor

    extension FillParentViewController {
   func layoutWithAnchor() {
    blueView.translatesAutoresizingMaskIntoConstraints = false
    
    blueView
    .leadingAnchor
    .constraint(equalTo: bottomContainer.leadingAnchor)
    .isActive = true// #1
    blueView
    .trailingAnchor
    .constraint(equalTo: bottomContainer.trailingAnchor)
    .isActive = true
    blueView
    .topAnchor
    .constraint(equalTo: bottomContainer.topAnchor)
    .isActive = true
    blueView
    .bottomAnchor
    .constraint(equalTo: bottomContainer.bottomAnchor)
    .isActive = true
   }
}
    火魚の毒性もよく、簡単に体現できます!
    Django(M.V.T) , CRUD(2)
    バックアップの削除中に削除できません