SnapKit を使用して iOS アプリの制約をプログラムで記述する方法

Xcode で初めてアプリを作成し始めたとき、ストーリーボードは魔法のようなものだと思っていました。サブビューを所定の位置にドラッグ アンド ドロップするのはとても簡単だったので、サブビューなしでビューを構築する方法を理解できませんでした。

最終的に、「マスター プログラマー」になるには、プログラムでビューを構築する方法を学ぶ必要があると判断しました。問題の 1 つは、コードに制約を記述するのが面倒なことです。

let horizontalConstraint = NSLayoutConstraint(   item: newView,    attribute: NSLayoutAttribute.centerX,    relatedBy: NSLayoutRelation.equal,    toItem: view,    attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)

これは、スーパービューの X 軸上でサブビューを中央に配置する水平方向の制約です。書くことは言うまでもなく、すべての制約がすぐに古くなるということは言うまでもありません。それでも、絵コンテはやめたかったので、別の方法を探しました。そんな時、SnapKit を見つけました。

SnapKit には明確で簡潔な API があり、コードに制約を簡単に記述できます。 SnapKit で何ができるかについて、いくつかの非常に基本的な例を見ていきます。

私は行きます：

<オール>

スーパービューでサブビューをレイアウトする

相互に関連するサブビューのレイアウト

制約の更新とアニメーション化

はじめに

プロジェクトに SnapKit をダウンロードしてください。サードパーティのライブラリに Cocoapods を使用しています。

pod 'SnapKit' を追加 Podfile に移動して pod install を実行します . import SnapKit と書く 使用したいファイルの先頭にあります。

スーパービューでサブビューをレイアウトする

まず、サブビューをそのスーパービューの端に固定します:

let subview = UIView()view.addSubview(subview)

subview.snp.makeConstraints { (make) in    make.top.equalTo(view)    make.bottom.equalTo(view)    make.left.equalTo(view)    make.right.equalTo(view)}

これにより、サブビューの上、下、左、および右の端の制約が、定数 0 のスーパービューの対応する端に設定されます。

サブビューの制約を設定する前に、サブビューをスーパービューに追加することに注意してください。スーパービューにまだ追加されていないビューの制約を記述すると、ビューの読み込み時に致命的な実行時エラーがスローされます。

SnapKit 構文は、標準ライブラリよりもはるかに読みやすくなっていますが、短縮することができます。 SnapKit は、ビューをそのスーパービューの端に制限するさらに簡潔な方法を提供します:

let subview = UIView()view.addSubview(subview)

subview.snp.makeConstraints { (make) in    make.top.bottom.left.right.equalTo(view)}

これにより、上記のコードと同じ方法でサブビューがレイアウトされますが、4 行ではなく 1 行になります。

サブビューのサイズを制限することもできます。以下では、サブビューの高さと幅を設定し、スーパービューの中心に設定します:

subview.snp.makeConstraints { (make) in    make.width.equalTo(200)    make.height.equalTo(200)    make.centerX.equalTo(view)    make.centerY.equalTo(view)}

この例は非常に単純ですが、何度も繰り返しました。同じ値を持つ制約を設定する場合、SnapKit を使用すると、次のように制約を連鎖させることができます。

subview.snp.makeConstraints { (make) in    make.width.height.equalTo(200)    make.centerX.centerY.equalTo(view)}

このブロックは、上記と同じ制約になります。 SnapKit がよりクリーンなコードを作成するのに役立つもう 1 つの方法です。

サブビューを相互にレイアウトする

多くのサブビューを 1 つのビューに追加する場合、サブビューを相互に関連させてレイアウトしたい場合があります。この例では、次のことを行います:

<オール>

subview1 を追加 スーパービューの左端に制約します

subview2 を追加 subview1 の右端に制限します

let subview1 = UIView()let subview2 = UIView()view.addSubview(subview1)view.addSubview(subview2)

subview1.snp.makeConstraints { (make) in    make.width.height.equalTo(100)    make.left.equalTo(view)}

subview2.snp.makeConstraints { (make) in    make.width.height.equalTo(subview1)    make.left.equalTo(subview1.snp.right)}

これまでは、制約を相対ビューの対応する制約と等しくしたいと考えていました。たとえば、make.left.equalTo(view) では SnapKit は left を設定します subview1 の left に view の .特に指定しない限り、SnapKit は設定した制約に自動的に一致します。

left の場合 subview2 の制約 、 right に設定したい subview1 の端 . make.left.equalTo(subview1) と書いたら SnapKit は left を設定します subview2 の端 left に subview1 の端 .代わりに、right を使用します subview1 の端 subview1.snp.right と書いて取得します .

snp を追加することで、ビューのレイアウトの制約にアクセスできます

subview2 ができたので subview1 の右側 、オフセットを追加して、それらの間にスペースを作成します subview2 へ .

subview2.snp.makeConstraints { (make) in    make.width.height.equalTo(subview1)    make.left.equalTo(subview1.snp.right).offset(50)}

equalTo() の末尾にオフセットを追加できます その制約の定数を変更します。現在 subview2 left の定数は 50 になります

制約の更新とアニメーション化

アプリを誰もが知っている #NextBigThing にしたい場合は、少し工夫する必要があります。 SnapKit は、制約を簡単に更新して動的ビューを作成する方法を提供します。

SnapKit を使用して制約を更新することは、新しいものを追加することとほとんど同じです。ここで、subview1 の制約を更新します。 left を変更して前の例から 0 から 50 までのエッジ制約の定数:

subview1.snp.updateConstraints { (make) in   make.left.equalTo(50)}

以上です！コード ブロックが実行されると、サブビューが新しい制約に更新されます。

あなたはおそらく subview2 に気づいたでしょう subview1 を更新したときに移動しました 制約を更新していないにもかかわらず.subview2 subview1 の右端に制限されます . subview1 の場合 移動します、subview2 subview1 の左制約を引き続き尊重します .

次に、遷移をスムーズにするアニメーションを追加します。以前にビューをアニメーション化したことがある場合、この構文はおなじみです:

UIView.animate(withDuration: 0.3) {    subview1.snp.updateConstraints { (make) in        make.left.equalTo(50)    }        self.view.layoutIfNeeded()}

制約の更新をアニメーション化するときは、layoutIfNeeded() を呼び出す必要があります サブビューの親で。一度に複数のビューをアニメーション化する場合は、layoutIfNeeded() を呼び出す必要があります サブビューの最も近い共通スーパービューで。

updateConstraints() 既存の制約のみを更新できます。まだ設定されていない制約を更新しようとすると、致命的な実行時エラーが発生します。

サブビューに新しい制約を追加する場合は、remakeConstraints() を使用します . remakeConstraints() そのサブビューに設定した既存の制約を削除します 新しいものを追加できるようにします。

deactivate() も使用できます 制約を削除します。以下では、deactivate() を使用して制約を作成、設定、および削除します。 :

var constraint: Constraint!let subview = UIView()

subview.snp.makeConstraints { (make) in    constraint = make.height.equalTo(100).constraint}

constraint.deactivate()

アニメーション ブロック内で制約を非アクティブ化することで、制約の削除をアニメーション化することもできます。

これで、プログラムによる制約の記述の達人になりました。ストーリーボードは今や冗談のように思えますが、ストーリーボードに戻る理由はありませんよね?

あまり。ストーリーボードと nib は、View Controller をまとめる最速の方法であり、開発者以外と作業している場合、ベータ版を送信せずにアプリがどのように見えるかを示す最良の方法です。

個人的には両方使っています。私が作成した最後のアプリでは、SnapKit を使用してコードに制約を追加し、ストーリーボードと nib で Auto Layout を使用して、場合によっては同じビューで制約を追加しました。最終的には、構築しているビューに最適なものを決定する必要があります。

読んでくれてありがとう！この記事が気に入ったら、製品管理、エンジニアリング、設計に関する記事を投稿している Twitter をフォローしてください。