SwiftのAutoLayoutを不等式(≧≦系の制約)を用いてレイアウトを設定する(コードのみ)

# はじめに
どうも@kaneko77です。
今回は不等式を用いてレイアウトを上手い具合に調整してくれる方法を紹介します。
全然関係ないんですけどタイトルの`(≧≦ `が完全に絵文字にしか見えないです笑
それではお話ししていきます~~~

## こんな方対象
- AutoLayoutをコードで実装してるんだけど不等式ってどうやってやるんだ？
- NSLayoutConstraintを使っている方

## 前フリ
インターフェースビルダーを使っていると`≧`とか`≦`を使ってレイアウトを操る時があります。
じゃーAutoLayoutをコードで書く際はどうやってやるの？ってなりますよね。
また`ScrollView`を使わずにコンテンツを表示したい時SEだとちょっと表示できないんだよな...なんてシーンに遭遇すると思います。
大体の人は`ScrollView`使おうってなりますが、`ScrollView`のAutoLayoutめんどくさいとかお客さんがどうしてもスクロールして欲しくないなどの要望が出てくると使えませんよね。
でも大丈夫です今回、不等式の知識を身につけてお客さんにはたまた自分にもう無理だなんて言わせません！

## 紹介
それでは本題
`NSLayoutConstraint`には`greaterThanOrEqualTo`や`lessThanOrEqualTo`なものがあります。
これをうまく操ることでむふふになります。
それでは各々の説明をしていきます。
### greaterThanOrEqualTo
**こちらは最低〇〇確保してあとは好きに調整したい時** に使います。
実際に作ってみましょう。
今回はとりあえず画面いっぱいに適当にコンテンツを作ります。
そこから`testText1`(昨日さ..から始まるテキストですね)に注目していただくと、
bottomは`safeAreaLayoutGuide`から`-50`したコンテンツを表示し
topで最低`１０`を表示し画面サイズにまだ余裕があれば勝手に伸びるという形になります。
以下コードが実装になります。

```swift
private func setConstraint(){
    NSLayoutConstraint.activate([
        testButton.topAnchor.constraint(equalTo: self.safeAreaLayoutGuide.topAnchor, constant: 50),
        testButton.leadingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leadingAnchor, constant: 20),
        testButton.trailingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.trailingAnchor, constant: -20),
        testButton.heightAnchor.constraint(equalToConstant: 40),

        testText.topAnchor.constraint(equalTo: self.testButton.bottomAnchor, constant: 50),
        testText.leadingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leadingAnchor, constant: 20),
        testText.trailingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.trailingAnchor, constant: -20),
        
        testText1.topAnchor.constraint(greaterThanOrEqualTo: self.testText.bottomAnchor, constant: 10),
        testText1.bottomAnchor.constraint(equalTo: self.safeAreaLayoutGuide.bottomAnchor, constant: -50),
        testText1.leadingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leadingAnchor, constant: 20),
        testText1.trailingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.trailingAnchor, constant: -20)
    ])
}
```
こちらが実装した結果の画像です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/cb632677-5582-02c2-2135-a50eab26a76b.png" width="250px">
ヒエラルキを見るとちゃんと`≧`ついてますね。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/4af11d51-256c-dd11-3f03-6596a3de6c5c.png" width="550px">


### lessThanOrEqualTo
**こちらは最高〇〇確保してあとは好きに調整したい時** に使います。
実際に作ってみましょう。
`testText`(隣の客..から始まるテキストですね)に注目していただくと、
bottomは`safeAreaLayoutGuide`から`-50`したコンテンツを表示し
topで最高`5０0`を表示し画面サイズに合わせて勝手に縮むという形になります。
以下コードが実装になります。

```swift
private func setConstraint(){
    NSLayoutConstraint.activate([
        testButton.topAnchor.constraint(equalTo: self.safeAreaLayoutGuide.topAnchor, constant: 50),
        testButton.leadingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leadingAnchor, constant: 20),
        testButton.trailingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.trailingAnchor, constant: -20),
        testButton.heightAnchor.constraint(equalToConstant: 40),

        testText.topAnchor.constraint(lessThanOrEqualTo: self.testButton.bottomAnchor, constant: 500),
        testText.bottomAnchor.constraint(equalTo: self.safeAreaLayoutGuide.bottomAnchor, constant: -50),
        testText.leadingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leadingAnchor, constant: 20),
        testText.trailingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.trailingAnchor, constant: -20),
    ])
}
```
こちらが実装した結果の画像です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/584c7765-7f4d-170e-4baa-21e5a8bb2501.png" width="250px">
ヒエラルキを見るとちゃんと`≦`ついてますね。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/8e27d4cb-ce6a-eb26-618b-b1429a20aabd.png" width="550px">

# 終わりに
今回はAutoLayoutの不等式について触れていきました。
UIScrollViewを使わない場合はかなり重宝すると思いますので是非マスターしてみてください！
ここまで見ていただきありがとうございます！