SnapKitを使って(画面の幅の1/4,画面の高さの3/4)にUI部品を配置する

## はじめに
以下の画像では赤ボタンを画面の中心に、緑ボタンの座標を(画面の幅の1/4,画面の高さの3/4)に、青ボタンの座標を(画面の幅の3/4,画面の高さの3/4)に設定しています。この記事ではコードでレイアウトが組めるライブラリSnapKitを使って上述した処理を行なっていきます。他に良い方法があればぜひコメントで教えて欲しいです。

![Simulator Screen Shot - iPod touch (7th generation) - 2021-01-06 at 12.03.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/4474d4f2-7039-cb01-9a1c-812a3c165e51.png)

## 前提知識
### centerX,centerY
対象となるオブジェクトの横の中心と縦の中心について制約を定めます。
### offset
配置したオブジェクトをずらします。
### view.bounds.size
ビューの大きさをCGSize型で返してくれます。`.width`、`.height`をつけて横幅、高さを取得するために使っています。

## 画面の中心に配置する
最も基本的な配置だと思います。`setupRedButton()`として諸設定を行い、`viewDidLoad()`の中で`setupRedButton()`を行っています。

```swift
private func setupRedButton() {
        redButton.setTitle("赤", for: .normal)
        redButton.setTitleColor(.white, for: .normal)
        redButton.backgroundColor = .red
        view.addSubview(redButton)
        redButton.snp.makeConstraints {
            $0.width.equalTo(50)//横幅
            $0.height.equalTo(50)//高さ
            $0.centerY.equalToSuperview()//横の中心をどこにするか
            $0.centerX.equalToSuperview()//縦の中心をどこにするか
        }
}
```

## (画面の幅の1/4,画面の高さの3/4)に配置する
上で説明した画面の中心に配置する方法に`offset`を用います。

```swift
private func setupGreenButton() {
        greenButton.setTitle("緑", for: .normal)
        greenButton.setTitleColor(.white, for: .normal)
        greenButton.backgroundColor = .green
        view.addSubview(greenButton)
        greenButton.snp.makeConstraints {
            $0.width.equalTo(50)
            $0.height.equalTo(50)
            $0.top.equalToSuperview().offset(view.bounds.size.height/4)
            $0.centerX.equalToSuperview().offset(-view.bounds.size.width/4)
        }
}
```
一旦親ビューと同じ位置に中心を持ってきた後、画面のサイズの1/4だけずらしています。この時、開始する場所が(0,0)ではなく、画面の中心であることに注意しました。

## (画面の幅の3/4,画面の高さの3/4)に配置する


```swift
private func setupBlueButton() {
        blueButton.setTitle("青", for: .normal)
        blueButton.setTitleColor(.white, for: .normal)
        blueButton.backgroundColor = .blue
        view.addSubview(blueButton)
        blueButton.snp.makeConstraints {
            $0.width.equalTo(50)
            $0.height.equalTo(50)
            $0.centerY.equalToSuperview().offset(view.bounds.size.height/4)
            $0.centerX.equalToSuperview().offset(view.bounds.size.width/4)
        }
}
```
## 全体のソースコード

```swift
import UIKit

class TestViewController: UIViewController {

    var numberOffiles = 0
    var fileName = "新規作成"
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        setupRedButton()
        setupGreenButton()
        setupBlueButton()
    }
    let redButton = UIButton()
    let greenButton = UIButton()
    let blueButton = UIButton()
    private func setupRedButton() {
        redButton.setTitle("赤", for: .normal)
        redButton.setTitleColor(.white, for: .normal)
        redButton.backgroundColor = .red
        view.addSubview(redButton)
        redButton.snp.makeConstraints {
            $0.width.equalTo(50)
            $0.height.equalTo(50)
            $0.centerY.equalToSuperview()
            $0.centerX.equalToSuperview()
        }
    }
    
    private func setupGreenButton() {
        greenButton.setTitle("緑", for: .normal)
        greenButton.setTitleColor(.white, for: .normal)
        greenButton.backgroundColor = .green
        view.addSubview(greenButton)
        greenButton.snp.makeConstraints {
            $0.width.equalTo(50)
            $0.height.equalTo(50)
            $0.top.equalToSuperview().offset(view.bounds.size.height/4)
            $0.centerX.equalToSuperview().offset(-view.bounds.size.width/4)
        }
    }
    private func setupBlueButton() {
        blueButton.setTitle("青", for: .normal)
        blueButton.setTitleColor(.white, for: .normal)
        blueButton.backgroundColor = .blue
        view.addSubview(blueButton)
        blueButton.snp.makeConstraints {
            $0.width.equalTo(50)
            $0.height.equalTo(50)
            $0.centerY.equalToSuperview().offset(view.bounds.size.height/4)
            $0.centerX.equalToSuperview().offset(view.bounds.size.width/4)
        }
    }
}
```