【Swift】SnapKitの制約まとめ

## 中央
```swift
// 「label」を画面の中央に配置
label.snp.makeConstraints { make in
    make.center.equalToSuperview()
}
```
![スクリーンショット 2022-10-10 22.31.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/85aeb26d-674b-833a-19ce-ee0bbf2339e7.png)


## X中央
```swift
// 「label」をXの中央に配置
label.snp.makeConstraints { make in
    make.centerX.equalToSuperview()
}
```
![スクリーンショット 2022-10-10 22.32.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1dd239fa-34dd-807f-995a-7ee93735a03b.png)


## Y中央
```swift
// 「label」をYの中央に配置
label.snp.makeConstraints { make in
    make.centerY.equalToSuperview()
}
```
![スクリーンショット 2022-10-10 22.33.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/a07b76a2-13b9-bf00-f87f-ed9ad45d772f.png)

## セーフエリアを無視する
```swift
// セーフエリアを無視する
label.snp.makeConstraints { make in
    make.edges.equalToSuperview()
}
// or

// セーフエリアを無視する
label.snp.makeConstraints { make in
    make.directionalEdges.equalToSuperview()
}
```
![スクリーンショット 2022-10-10 22.34.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/bac158e0-c13a-a35f-9e31-91777185436e.png)


## 上下のセーフエリアを無視する
```swift
// 上下のセーフエリアを無視する
label.snp.makeConstraints { make in
    make.verticalEdges.equalToSuperview()
}
// or

// 上下のセーフエリアを無視する
label.snp.makeConstraints { make in
    make.directionalVerticalEdges.equalToSuperview()
}
```
![スクリーンショット 2022-10-10 22.36.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/fc58dec0-5f5a-b32f-f4f1-c739b8c00a0e.png)

## 左右のセーフエリアを無視する
```swift
// 左右のセーフエリアを無視する
label.snp.makeConstraints { make in
    make.horizontalEdges.equalToSuperview()
}
// or

// 左右のセーフエリアを無視する
label.snp.makeConstraints { make in
    make.directionalHorizontalEdges.equalToSuperview()
}
```
![スクリーンショット 2022-10-10 22.37.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/5aa0f76f-7f9f-83a9-2d01-e1a1e9d8a816.png)

## 1番上に配置
```swift
// 1番上に配置
label.snp.makeConstraints { make in
    make.top.equalToSuperview()
}
```
![スクリーンショット 2022-10-10 22.37.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/13b8ae04-c713-9c35-2b28-797d8f5ed43c.png)

## 1番下に配置
```swift
// 1番下に配置
label.snp.makeConstraints { make in
    make.bottom.equalToSuperview()
}
```
![スクリーンショット 2022-10-10 22.38.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/dcb3adfd-dee7-be0d-2b17-2e57c137ed37.png)

## 1番左に配置
```swift
// 1番左に配置
label.snp.makeConstraints { make in
    make.left.equalToSuperview()
}
// or

// 1番左に配置
label.snp.makeConstraints { make in
    make.leading.equalToSuperview()
}
```
![スクリーンショット 2022-10-10 22.38.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/53dcc98b-2e09-35e0-d3c2-f94b3ed74905.png)

## 1番右に配置
```swift
// 1番右に配置
label.snp.makeConstraints { make in
    make.right.equalToSuperview()
}
// or

// 1番右に配置
label.snp.makeConstraints { make in
    make.trailing.equalToSuperview()
}
```
![スクリーンショット 2022-10-10 22.39.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/674bd897-a426-9985-6318-9d96dd4cb46d.png)



## サイズを変更する
```swift
// 幅と高さを200に設定する
label.snp.makeConstraints { make in
    make.size.equalTo(100)
}
```
![スクリーンショット 2022-10-10 22.39.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1e0dd7d4-a16e-546a-d4d8-d68a21c22b6b.png)

## 幅を変更する
```swift
// 幅を200に設定する
label.snp.makeConstraints { make in
    make.width.equalTo(200)
}
```
![スクリーンショット 2022-10-10 22.40.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/05953035-1680-8228-b318-d657dbfa99d2.png)

## 高さを変更する
```swift
// 高さを200に設定する
label.snp.makeConstraints { make in
    make.height.equalTo(200)
}
```
![スクリーンショット 2022-10-10 22.41.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/4e2d835e-10be-2400-9a5a-f048818bc642.png)

## 上からの位置調整
```swift
// 「label」の上を(100)動かす
label.snp.makeConstraints { make in
    make.top.equalTo(100)
}
```
![スクリーンショット 2022-10-10 22.42.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/198bd9c2-725c-756b-0d4c-e5dba5eb11ad.png)

:::note info
**ポイント**
このように指定することもできます
```swift
// 「label」の上が「button」の下と同位置
label.snp.makeConstraints { make in
    make.top.equalTo(button.snp.bottom)
}
```
:::


## 下からの位置調整
```swift
// 「label」の下を(-100)動かす
label.snp.makeConstraints { make in
    make.bottom.equalTo(-100)
}
```
![スクリーンショット 2022-10-10 22.43.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/28780da4-f07f-df29-1979-dee6ce9c56e5.png)

:::note info
**ポイント**
このように指定することもできます
```swift
// 「label」の下が「button」の上と同位置
label.snp.makeConstraints { make in
    make.bottom.equalTo(button.snp.top)
}
```
:::

## 左からの位置調整
```swift
// 「label」の左を(100)動かす
label.snp.makeConstraints { make in
    make.left.equalTo(100)
}
// or

// 「label」の左を(100)動かす
label.snp.makeConstraints { make in
    make.leading.equalTo(100)
}
```
![スクリーンショット 2022-10-10 22.43.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/48f51ccf-9d9d-e896-a07c-7b881f20e9e0.png)

:::note info
**ポイント**
このように指定することもできます
```swift
// 「label」の左が「button」の右と同位置
label.snp.makeConstraints { make in
    make.left.equalTo(button.snp.right)
}
```
:::

## 右からの位置調整
```swift
// 「label」の右を(-100)動かす
label.snp.makeConstraints { make in
    make.right.equalTo(-100)
}

// or

// 「label」の右を(-100)動かす
label.snp.makeConstraints { make in
    make.trailing.equalTo(-100)
}
```
![スクリーンショット 2022-10-10 22.45.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/49697664-6a73-cefe-2d03-768fd302fea5.png)

:::note info
**ポイント**
このように指定することもできます
```swift
// 「label」の右が「button」の左と同位置
label.snp.makeConstraints { make in
    make.right.equalTo(button.snp.left)
}
```
:::

# ずらす
```swift
// 中心から(100, 100)すらす
label.snp.makeConstraints { make in
    make.center.equalToSuperview().offset(100)
}
```
![スクリーンショット 2022-10-10 22.46.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/ea5cf1da-0c58-0290-4e92-3b694d87bd24.png)

# おわり
まだあると思います
使い始めたばかりなのでコメントでこういうのもあるよって教えてくれると嬉しいです。
新しく見つけたら追加してきます。