Edited at

SnapKitを使ってみた。


Snapkitとは?

簡単にいうとコードでAutolayoutがさくっと出来てしまうもの。


使い方

①addSubView(Viewに配置するものを追加)

②基本となる書き方

    "配置するもの".snp.makeConstraints { make in

make."どこを?"."なにに?".offset("どのくらい?")
}


とりあえず適当に配置

//controllers

self.testView.snp.makeConstraints { make in
make.edges.equalToSuperview()
}

//views
func setView() {
self.addSubview(button1)
self.addSubview(button2)
self.addSubview(button3)
self.addSubview(button4)
self.addSubview(button5)

button1.snp.makeConstraints { make in
make.centerX.equalToSuperview()
make.centerY.equalToSuperview()
make.width.equalTo(50)
make.height.equalTo(50)
}
button2.snp.makeConstraints { make in
make.width.equalTo(50)
make.height.equalTo(50)
make.centerX.equalToSuperview()
make.bottom.equalTo(button1.snp.top).offset(-50)
}
button3.snp.makeConstraints { make in
make.width.equalTo(50)
make.height.equalTo(50)
make.centerY.equalToSuperview()
make.right.equalTo(button1.snp.left).offset(-50)
}
button4.snp.makeConstraints { make in
make.width.equalTo(50)
make.height.equalTo(50)
make.centerX.equalToSuperview()
make.top.equalTo(button1.snp.bottom).offset(50)
}
button5.snp.makeConstraints { make in
make.width.equalTo(50)
make.height.equalTo(50)
make.centerY.equalToSuperview()
make.left.equalTo(button1.snp.right).offset(50)
}
}

Simulator Screen Shot - iPhone 8 Plus - 2018-12-03 at 18.07.02.png


コード解説

   //controllerにてviewのインスタンスを生成済み

//testViewの配置
self.testView.snp.makeConstraints { make in
//Superviewのtop,left,bottom,rightに合わせて
make.edges.equalToSuperview()
}

//views
//ボタン1の配置
button1.snp.makeConstraints { make in
//横軸を中心に(どこを?→中心を、なにに?→Superviewに)
make.centerX.equalToSuperview()
//縦軸を中心に(上と同じ)
make.centerY.equalToSuperview()
//どこを?→横幅を、どのくらい?→50pxに
make.width.equalTo(50)
//どこを?→縦幅を、どのくらい?→50pxに
make.height.equalTo(50)
}

//ボタン2の配置
button2.snp.makeConstraints { make in
//省略
make.width.equalTo(50)
make.height.equalTo(50)
make.centerX.equalToSuperview()
//どこを?→下を 何に?→ボタン1のトップに どこくらい?→-50px
make.bottom.equalTo(button1.snp.top).offset(-50)
}

他は同じようなことをしているので省略

これは・・・簡単!!

ちなみにoffset()以外にもメソッドが用意されている。

multipliedBy()→入力した数値の積の利用

dividedBy→入力した数値の商を利用

inset→paddingを設定

また補足として

make.centerX.equalToSuperview()

make.centerY.equalToSuperview()
//centerX+centerY
make.center.equalToSuperview()

と書ける。


動的な動きにも対応

nameTitleLabel.snp.makeConstraints { make in

make.top.equalToSuperview().offset(300)
make.left.equalToSuperview().offset(28)
}
nameLabel.snp.makeConstraints { make in
make.top.equalTo(nameTitleLabel.snp.top)
make.left.equalTo(nameTitleLabel.snp.right).offset(24)
}
ditailTitleLabel.snp.makeConstraints { make in
make.top.equalTo(nameLabel.snp.bottom).offset(50)
make.top.greaterThanOrEqualTo(nameTitleLabel.snp.bottom).offset(50)
make.left.equalTo(nameTitleLabel.snp.left)
}
ditailLabel.snp.makeConstraints { make in
make.top.equalTo(ditailTitleLabel.snp.top)
make.left.equalTo(ditailTitleLabel.snp.right).offset(24)
}

名前入力
名前""
名前改行

Simulator Screen Shot - iPhone 8 Plus - 2018-12-04 at 10.24.29.png
Simulator Screen Shot - iPhone 8 Plus - 2018-12-04 at 10.24.39.png
Simulator Screen Shot - iPhone 8 Plus - 2018-12-04 at 10.24.11.png


コード解説

//名前

nameTitleLabel.snp.makeConstraints { make in
//Superviewのtopから300px,leftから28pxの位置
make.top.equalToSuperview().offset(300)
make.left.equalToSuperview().offset(28)
}
//キー太郎
nameLabel.snp.makeConstraints { make in
//topを名前のtopと合わせる。 キー太郎leftを名前rightから24px離れた位置に
make.top.equalTo(nameTitleLabel.snp.top)
make.left.equalTo(nameTitleLabel.snp.right).offset(24)
}
//自己紹介
ditailTitleLabel.snp.makeConstraints { make in
//topをキー太郎のbottomから50px離れた位置に
make.top.equalTo(nameLabel.snp.bottom).offset(50)
//topを最低でも名前bottomから50px離れた位置に
make.top.greaterThanOrEqualTo(nameTitleLabel.snp.bottom).offset(50)
//省略
make.left.equalTo(nameTitleLabel.snp.left)
}
//qiitaに聞いた(省略)
ditailLabel.snp.makeConstraints { make in
make.top.equalTo(ditailTitleLabel.snp.top)
make.left.equalTo(ditailTitleLabel.snp.right).offset(24)
}

便利なメソッドとして自己紹介にあるgreaterThanOrEqualTo

これは上記で記載しましたが、最低でもこのくらいと指定できる。

これを使った理由として

①nameTitleのbottomに合わせるとnameが改行されたとき、被ってしまう。

②nameのbottomに合わせると、nameが""のとき合わせる対象がなくなってしまう。

つまりnameに入る内容が""でなく改行されない場合でないと対応ができない。

なので最低でもnameTitleから50pxは離してほしいが、nameからの50pxを忘れないでね!

みたいにかける。

ちなみにこれと対称なメソッドとしてlessThanOrEqualToがある。

// 50 <= top <= 500 最低でも50は離して欲しいが500は超えないでね

make.top.greaterThanOrEqualTo(nameTitleLabel.snp.bottom).offset(50)
make.top.lessThanOrEqualTo(nameTitleLabel.snp.bottom).offset(500)


まとめ

SnapKitには他にも便利なメソッドがまだまだあります。

AutoLayout嫌だ!って人にはおすすめ。

少しでも興味持っていただけたかたがいれば嬉しいですね!!

参考資料