Zenn
📐

【swift】SnapKitの基本の使い方

2024/03/22に公開
Swift
tech

SnapKitとは

AutoLayoutの実装が簡単にできるライブラリ
NSLayoutAnchorやNSLayoutConstraintの代わりになるようなもので、コードとしても見やすくてわかりやすい

SnapKitで設定できる制約の種類

位置の指定
center 中央
centerX 水平方向の中央
centerY 垂直方向の中央
left 左辺
right 右辺
top 上辺
bottom 下辺
edges 4辺まとめて設定 (top, bottom, left, right)
leading 文字列の先頭側 (日本語では左、アラビア語などでは右)
Trailing 文字列の末尾側 (日本語では右、アラビア語などでは左)

サイズの指定
size 横幅と縦幅まとめて設定
width 横幅
height 縦幅

その他
multipliedBy 指定された値で掛けたサイズにする
dividedBy 指定された値で割ったサイズにする
offset 指定された値分ずらす

SnapKitの使い方

導入（SPM)

Swift Package Managerでの導入方法

  1. File > Add Packages... をクリック


2. snapKitのGitHubのURLを入力し、Add Packageをクリックする "https://github.com/SnapKit/SnapKit"

3. SnapKit にチェックを入れて Add Packageをクリック


5. Package DependenciesにSnapKitが追加されたら完了！！！　

記述

  • 親のViewを基準にして配置を決定する場合
    例：labelAのサイズは200×200で、親Viewの中央に配置する
        labelA.snp.makeConstraints { make in
            make.center.equalToSuperview()
            make.size.equalTo(200)
        }

  • 親view以外の要素を基準にして配置を決定する場合
    例：labelBのサイズは100×100で、水平方向はlabelAに接するように、垂直方向はLabelAの下辺と同じになるように配置する

            labelB.snp.makeConstraints { make in
          make.left.equalTo(labelA.snp.right)
          make.bottom.equalTo(labelA.snp.bottom)
          make.size.equalTo(100)
      }

  • 基準の要素から少し離して配置をしているする場合
    例：labelCのサイズは80×80で、水平方向はlabelAから10離して、垂直方向はLabelBの上辺から30離して配置する

            labelC.snp.makeConstraints { make in
          make.left.equalTo(labelA.snp.right).offset(10)
          make.bottom.equalTo(labelB.snp.top).offset(-30)
          make.size.equalTo(80)
      }

    • 基準の要素に対してサイズを変更する場合
      例：labelCのサイズをlabelAの1/2にする
          labelD.snp.makeConstraints { make in
          make.right.equalTo(labelA.snp.left)
          make.bottom.equalTo(labelA.snp.bottom)
          make.size.equalTo(labelA.snp.size).dividedBy(2)
      }

Discussion