9つのボタンでSnapKitを理解する為のメモ

# はじめに

swiftを触りはじめてsnapkitというライブラリが全く理解出来なかったのでボタンを作成してsnapkitの理解を深める為のメモになります。

snapkitのインストール方法は[公式サイト](https://github.com/SnapKit/SnapKit)を参考にして行いました。

まだ何もありませんが以下のコードから始めます。
```swift
import UIKit
import SnapKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}
```
## UIButtonを作成する
```swift
import UIKit
import SnapKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let button1 = UIButton()
        button1.setTitle("1", for: .normal)
        button1.setTitleColor(.black, for: .normal)
        button1.layer.shadowOpacity = 0.5
        button1.layer.shadowRadius = 8
        button1.layer.shadowOffset = CGSize(width: 0, height: 0)
        button1.layer.cornerRadius = 35
        button1.backgroundColor = .white
        
        view.addSubview(button1)
        
        //button1に対して制約をつける
        button1.snp.makeConstraints {
            $0.centerX.equalToSuperview()//親viewのx軸に対して中央に配置
            $0.centerY.equalToSuperview()//親viewのy軸に対して中央に配置
            $0.width.equalTo(70)//横幅７０
            $0.height.equalTo(70)//縦幅70
        }
    }
}
```
### プレビュー画像
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/ad8fe0f9-8e3c-9aed-2b36-69e1bfe54c4a.png", width=30% >
影つきの丸ボタンを作成しました。
**button1.snp.makeConstraints**の部分で制約をつけています。
今回は左右上下の大きさが70のボタンを画面上下左右の中央に配置しました。
***
## ②と③のUIButtonを作成する
```swift
class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let button1 = UIButton()
        button1.setTitle("1", for: .normal)
        button1.setTitleColor(.black, for: .normal)
        button1.layer.shadowOpacity = 0.5
        button1.layer.shadowRadius = 8
        button1.layer.shadowOffset = CGSize(width: 0, height: 0)
        button1.layer.cornerRadius = 35
        button1.backgroundColor = .white
        
        let button2 = UIButton()
        button2.setTitle("2", for: .normal)
        button2.setTitleColor(.black, for: .normal)
        button2.layer.shadowOpacity = 0.5
        button2.layer.shadowRadius = 8
        button2.layer.shadowOffset = CGSize(width: 0, height: 0)
        button2.layer.cornerRadius = 35
        button2.backgroundColor = .white
        
        let button3 = UIButton()
        button3.setTitle("3", for: .normal)
        button3.setTitleColor(.black, for: .normal)
        button3.layer.shadowOpacity = 0.5
        button3.layer.shadowRadius = 8
        button3.layer.shadowOffset = CGSize(width: 0, height: 0)
        button3.layer.cornerRadius = 35
        button3.backgroundColor = .white
        
        view.addSubview(button1)
        view.addSubview(button2)
        view.addSubview(button3)
        
        button1.snp.makeConstraints {
            $0.right.equalTo(button2.snp.left).offset(-30)
            $0.centerY.equalToSuperview()
            $0.width.equalTo(70)
            $0.height.equalTo(70)
        }
        button2.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.centerY.equalToSuperview()
            $0.width.equalTo(70)
            $0.height.equalTo(70)
        }
        button3.snp.makeConstraints {
            $0.left.equalTo(button2.snp.right).offset(30)
            $0.centerY.equalToSuperview()
            $0.width.equalTo(70)
            $0.height.equalTo(70)
        }
    }
}
```
### プレビュー画像
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/05008b23-c40a-8053-ba2e-f6872db9abc7.png", width=30% >
今回は②と③のボタンを作成しました。
ここではbutton2を基準としてbutton1とbutton3を30px離しています。
UIButtonを作成するコードが重複しているので以下の様に部品化します。
```swift
class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let button1 = createButton("1")
        let button2 = createButton("2")
        let button3 = createButton("3")
        
        view.addSubview(button1)
        view.addSubview(button2)
        view.addSubview(button3)
        
        button1.snp.makeConstraints {
            //button1の右側をbutton2の左側に対して30px離す
            $0.right.equalTo(button2.snp.left).offset(-30)
            $0.centerY.equalToSuperview()
            $0.width.equalTo(70)
            $0.height.equalTo(70)
        }
        button2.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.centerY.equalToSuperview()
            $0.width.equalTo(70)
            $0.height.equalTo(70)
        }
        button3.snp.makeConstraints {
            //button3の左側をbutton2の右側に対して30px離す
            $0.left.equalTo(button2.snp.right).offset(30)
            $0.centerY.equalToSuperview()
            $0.width.equalTo(70)
            $0.height.equalTo(70)
        }
    }
    
    private func createButton(_ text: String) -> UIButton{
        let button = UIButton()
        button.setTitle(text, for: .normal)
        button.setTitleColor(.black, for: .normal)
        button.layer.shadowOpacity = 0.5
        button.layer.shadowRadius = 8
        button.layer.shadowOffset = CGSize(width: 0, height: 0)
        button.layer.cornerRadius = 35
        button.backgroundColor = .white
        return button
    }
}
```
ボタンの作成をメソッド化することで結構シンプルになりました。

## さらに④から⑨のボタンを作成していきます。
```swift
class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let button1 = createButton("1")
        let button2 = createButton("2")
        let button3 = createButton("3")
        let button4 = createButton("4")
        let button5 = createButton("5")
        let button6 = createButton("6")
        let button7 = createButton("7")
        let button8 = createButton("8")
        let button9 = createButton("9")
        
        view.addSubview(button1)
        view.addSubview(button2)
        view.addSubview(button3)
        view.addSubview(button4)
        view.addSubview(button5)
        view.addSubview(button6)
        view.addSubview(button7)
        view.addSubview(button8)
        view.addSubview(button9)

        button1.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.right.equalTo(button4)
            $0.bottom.equalTo(button2)
        }
        button2.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.centerX.equalToSuperview()
            $0.bottom.equalTo(button4.snp.top).offset(-30)
        }
        button3.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.left.equalTo(button6)
            $0.bottom.equalTo(button2)
        }
        button4.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.right.equalTo(button2.snp.left).offset(-30)
            $0.centerY.equalToSuperview()
        }
        button5.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.centerX.equalToSuperview()
            $0.centerY.equalToSuperview()
        }
        button6.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.left.equalTo(button5.snp.right).offset(30)
            $0.centerY.equalToSuperview()
        }
        button7.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.right.equalTo(button4)
            $0.top.equalTo(button8)
        }
        button8.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.centerX.equalToSuperview()
            $0.top.equalTo(button5.snp.bottom).offset(30)
        }
        button9.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.right.equalTo(button6)
            $0.top.equalTo(button8)
        }
    }
    
    private func createButton(_ text: String) -> UIButton{
        let button = UIButton()
        button.setTitle(text, for: .normal)
        button.setTitleColor(.black, for: .normal)
        button.layer.shadowOpacity = 0.5
        button.layer.shadowRadius = 8
        button.layer.shadowOffset = CGSize(width: 0, height: 0)
        button.layer.cornerRadius = 35
        button.backgroundColor = .white
        return button
    }
}
```
### プレビュー画像
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920312/3920e7b3-9023-35de-e609-8081505b5b33.png", width=30% >

九つのボタンを作成できました。
**equalTo**に定数を埋め込んで動的に表現することも出来ます。

ここからは脱線しますが同じ様なコードが目立つのでリファクタリングしていきます。

```swift
import UIKit
import SnapKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let buttons: [UIButton]
        
        let button1 = createButton("1")
        let button2 = createButton("2")
        let button3 = createButton("3")
        let button4 = createButton("4")
        let button5 = createButton("5")
        let button6 = createButton("6")
        let button7 = createButton("7")
        let button8 = createButton("8")
        let button9 = createButton("9")
        
        buttons = [button1, button2, button3, button4, button5, button6, button7, button8, button9]
        
        for button in buttons {
            view.addSubview(button)
        }
        
        for button in buttons {
            button.snp.makeConstraints {
                $0.height.equalTo(70)
                $0.width.equalTo(70)
            }
        }

        button1.snp.makeConstraints {
            $0.right.equalTo(button4)
            $0.bottom.equalTo(button2)
        }
        button2.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.bottom.equalTo(button4.snp.top).offset(-30)
        }
        button3.snp.makeConstraints {
            $0.left.equalTo(button6)
            $0.bottom.equalTo(button2)
        }
        button4.snp.makeConstraints {
            $0.right.equalTo(button2.snp.left).offset(-30)
            $0.centerY.equalToSuperview()
        }
        button5.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.centerY.equalToSuperview()
        }
        button6.snp.makeConstraints {
            $0.left.equalTo(button5.snp.right).offset(30)
            $0.centerY.equalToSuperview()
        }
        button7.snp.makeConstraints {
            $0.right.equalTo(button4)
            $0.top.equalTo(button8)
        }
        button8.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.top.equalTo(button5.snp.bottom).offset(30)
        }
        button9.snp.makeConstraints {
            $0.right.equalTo(button6)
            $0.top.equalTo(button8)
        }
    }

    private func createButton(_ text: String) -> UIButton{
        let button = UIButton()
        button.setTitle(text, for: .normal)
        button.setTitleColor(.black, for: .normal)
        button.layer.shadowOpacity = 0.5
        button.layer.shadowRadius = 8
        button.layer.shadowOffset = CGSize(width: 0, height: 0)
        button.layer.cornerRadius = 35
        button.backgroundColor = .white
        return button
    }
}
```

実行結果は変化なしです。
button1からbutton9に入れてループさせたら少しだけシンプルになりました。
他に良い手段がありそうですがここまでにしておきます。

読んで頂いてありがとうございました。