コードでAutoLayout

#はじめに

練習でコードでviewのレイアウトを作ってみました。


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">単純なサンプルで制約の考え方を押さえるところから <a href="https://t.co/SpHQf82ZHc">pic.twitter.com/SpHQf82ZHc</a></p>&mdash; 崎山圭@iOSエンジニアな工学博士でプログラミング講師 (@sakiyamaK) <a href="https://twitter.com/sakiyamaK/status/1390907845793619968?ref_src=twsrc%5Etfw">May 8, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



上のグリーンのviewがブルーのviewのところで止まるレイアウトをコードで作りました。

インターフェースビルダーで実装するやり方はこちらのZennの記事に詳しく書いてありました。

https://t.co/MK0xhmLLbI?amp=1

#ちょっと困ったこと

`centerYAnchor`で`multiplier`を設定しようとしたら下の書き方ではエラーが出てダメだった。

```.swift
redView.centerYAnchor.constraint(equalTo: contentsView.centerYAnchor, multiplier: 0.5).isActive = true
```

ので次のような書き方でやり過ごした。

```.swift
NSLayoutConstraint(item: redView, attribute: .centerY, relatedBy: .equal, toItem: contentsView, attribute: .centerY, multiplier: 0.5, constant: 0).isActive = true
```

また`Priority`を設定するのは

```.swift
let greenViewCenterYAnchorConstraint = greenView.centerYAnchor.constraint(equalTo: redView.centerYAnchor)
        greenViewCenterYAnchorConstraint.priority = UILayoutPriority(rawValue: 750)
```

こんな感じです。

#ソースコード

```.swift
import UIKit

class CordLayoutViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let blueView = UIView()
        blueView.backgroundColor = .systemBlue
        blueView.frame = view.frame
        blueView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(blueView)
        
        blueView.heightAnchor.constraint(equalToConstant: 100).isActive = true
        blueView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: 50).isActive = true
        blueView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
        blueView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
        
        
        let scrollView = UIScrollView()
        scrollView.frame = view.frame
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(scrollView)
        
        scrollView.topAnchor.constraint(equalTo:self.view.safeAreaLayoutGuide.topAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true
        scrollView.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor).isActive = true
        scrollView.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor).isActive = true
        
        
        let contentsView = UIView()
        //contentsView.backgroundColor = .red
        contentsView.isOpaque = false
        contentsView.frame = scrollView.frame
        contentsView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(contentsView)
        
        contentsView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor).isActive = true
        contentsView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor).isActive = true
        contentsView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor).isActive = true
        contentsView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor).isActive = true
        contentsView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor).isActive = true
        contentsView.heightAnchor.constraint(equalTo: scrollView.frameLayoutGuide.heightAnchor, multiplier: 2).isActive = true
        
        
        
        let redView = UIView()
        redView.backgroundColor = .systemRed
        redView.frame = contentsView.frame
        redView.translatesAutoresizingMaskIntoConstraints = false
        contentsView.addSubview(redView)
        
        redView.heightAnchor.constraint(equalToConstant: 100).isActive = true
        redView.widthAnchor.constraint(equalTo: contentsView.widthAnchor, multiplier: 0.8).isActive = true
        redView.centerXAnchor.constraint(equalTo: contentsView.centerXAnchor).isActive = true
        //redView.centerYAnchor.constraint(equalTo: contentsView.centerYAnchor, multiplier: ).isActive = true
        NSLayoutConstraint(item: redView, attribute: .centerY, relatedBy: .equal, toItem: contentsView, attribute: .centerY, multiplier: 0.5, constant: 0).isActive = true
        
        
        let greenView = UIView()
        greenView.backgroundColor = .systemGreen
        greenView.frame = view.frame
        greenView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(greenView)
        
        greenView.widthAnchor.constraint(equalToConstant: 80).isActive = true
        //aspect ratio 1:1
        greenView.heightAnchor.constraint(equalTo: greenView.widthAnchor).isActive = true
        greenView.centerXAnchor.constraint(equalTo: redView.centerXAnchor).isActive = true
        greenView.topAnchor.constraint(greaterThanOrEqualTo: blueView.topAnchor).isActive = true
        let greenViewCenterYAnchorConstraint = greenView.centerYAnchor.constraint(equalTo: redView.centerYAnchor)
        greenViewCenterYAnchorConstraint.priority = UILayoutPriority(rawValue: 750)
        greenViewCenterYAnchorConstraint.isActive = true
    }
}
```

##参考にした記事
https://qiita.com/jamestong/items/47ef1ce3cb81c60326ee

https://qiita.com/dddisk/items/8001598ea7951bcdcc30

https://qiita.com/samekard/items/31407a3c2a1aac191008

https://shiba1014.medium.com/コードで作るauto-layoutまとめ-274f14043393

#最後に
LGTM、ストックしてくださると泣いて喜びます。