【iOS】SnapKitの概要と実装例

Advent Calendar 2022

この記事はレコチョク Advent Calendar 2022の18日目の記事となります。

はじめに

はじめまして。株式会社レコチョクの長島と申します。
2022年4月に新卒で入社し、6ヶ月の研修期間を経て、今はiOSアプリの開発に携わっています。
音楽はダンスミュージックを中心に、最近は電音部という音楽原案キャラクタープロジェクトの曲をよく聞いています。よろしくお願いします。

現在はOJTとして既存アプリのモックを作成する課題を行っているのですが、その際にSnapKitと呼ばれるライブラリを用い、Interface Builderなしで画面を実装する必要があり、一体SnapKitがどういうものなのかを調べる機会がありました。

今回はそれらを調査して得られた結果として、SnapKitの概要と実装例を記事にしようと思います。

動作環境

  • Xcode 14.0.1
  • SnapKit 5.6.0

SnapKitについて

概要

SnapKitはUIKitのAuto Layoutを簡単に実装することができるDSL(Domain Specific Language)です。標準の記法として用いられる NSLayoutConstraintNSLayoutAnchorと比較して、制約の記述を簡略化できます。

以下の図は widthheightが100pxの UIViewを画面の中央に配置したものです。 NSLayoutAnchorとSnapKitそれぞれでの制約の付け方の比較を行いました。
実際のコードを見れば、SnapKitを使用した場合、 NSLayoutAnchorと比べて明らかにコードの記述量が少なくなることがわかります。

SnapKitSample

導入方法

今回は導入方法としてSwift Package Managerを利用します。Xcodeのバージョンによっては導入方法が異なる場合があるのでご注意ください。

1.メニューバー上の「File」を開き、「Add Packages…」を押下します。

InstallingSnapKit1

2.画面右上にある検索バーにSnapKitのGitHub URLを入力し、「Add Package」を押下します。

InstallingSnapKit2

3.SnapKitのパッケージが追加され、import可能になります。

実装方法

SnapKitでは makeConstraints()というメソッドを用い、クロージャの中に制約を記載します。
基本となる書き方は以下のようになります。

対象Viewの属性には、以下のものが用意されています。

制約の設定方法には、以下のような式が用意されています。

実際に上記の式を組み合わせることで、以下のように制約を設定できます。

これらの記述の後に、 offset()inset()を設定できます。

また、メソッドチェーンという方法で、複数の属性に同時に制約を設定できます。

実例

以下の図のような UICollectionViewCellを作成してみます。

SnapKitCellSample.png

楽曲の情報が入っている UICollectionViewCellであり、以下のような構造になります。

SnapKitCellSample2.png

  • 横方向 UIStackView(Horizontal): hStackView
    • 曲ジャケット UIImageView: jacketImageView
    • 縦方向の楽曲情報格納 UIStackView(Vertical): infoStackView
      • タイトル UILabel: titleLabel
      • アーティスト UILabel: artistLabel
      • ハイレゾ UILabel: hiResLabel
    • メニュー UIButton: menuButton

それぞれの要素を作成し、制約を以下のように設定した場合、このようなコードとなりました。

  • hStackView
    • topbottomに、親Viewの topbottomと同じ位置を設定する
    • leftrightに、親Viewの leftrightに対して16pxの insetが追加された位置を設定する
  • jacketImageView
    • sizeを50pxに設定する
  • menuButton
    • sizeを50pxに設定する

おわりに

SnapKitを用いることで、コードのみで直感的に制約を設定する方法を記載し、実際に UIStackViewとの併用を含めたレイアウトを実装しました。
結果として、以下のような特徴があることがわかりました。

  • makeConstraints()を用いることで、クロージャの中に制約をまとめて記載できる
  • offsetinsetを上記の式に続ける形で記載できる
  • メソッドチェーンで複数の属性に一度に制約を記載できる

今回の記事を見て、SnapKitの概要と基本的な実装に関して理解が進みましたら幸いです。

明日のレコチョク Advent Calendarは19日目 【Swift】Widgetの作り方 〜iOS 16対応版〜です。お楽しみに!

参考資料

この記事を書いた人

長島大和
長島大和
最近書いた記事