iOS

【iOS9以上】Storyboardを使わずTinyConstraintsでAutoLayout作成する

XcodeのStoryboardでマウスをぽちぽちやってAutoLayoutで制約を付けていくのってぶっちゃけ面倒くさい。Swift-UIもまだ時期尚早だと思うし・・・

ということで、Storyboardを使わず楽してコードのみで書けるTinyConstraintsというライブラリを使う方法を備忘録として残しておきます。

https://github.com/roberthein/TinyConstraints

CocoaPodsのインストール

インストール済みの場合はここはスキップして下さい。

私は、HomebrewでCocoaPodsをインストールしました。

ターミナルから以下を実行します。

※Homebrewはこちらからインストールできます。

Cocoapodsがインストールできたらセットアップします。

pod --version でバージョンが表示されたらCocoaPodsの準備完了です。

TinyConstraintsのインストール

xcodeで新規にプロジェクトを作成しておきます。

ターミナルで作成したフォルダに移動して、

すると、Podfileが作成されるので使用しているテキストエディタでファイルを開きます。

以下のように、pod "TinyConstraints" と記入してファイルを保存。

ターミナルで以下を実行。

フォルダの中に新しく、

プロジェクト名.xcworkspace

というファイルができるので以降はこのファイルからXcodeを開きます。

いよいよ、TinyConstraintsでViewに部品を配置していきます。

サンプルコードは最近アップデートした電卓アプリをイメージして

3つのビューとボタンを4つ配置してみます。

サイズをSafeAreaを除く親ビューに合わせる

M字ハゲに表示がかからないようにビューを配置します。

とりあえず、Main.storyboard上のViewに構築していきます。

ViewController.swiftの肥大化を防止するため別ファイルに部品の初期化処理を書いておきます。

viewWillAppearにコードを書いていきます。

view.edgesToSuperview(usingSafeArea: true)でM字ハゲを避けてViewを配置してくれます。たったこれだけ!!!

比率で大きさを指定

ビューを3つ配置してみます。

幅・高さを比率で指定するには、multiplierを使います。

to:にどの部品に対しての、multiplier: 比率で指定します。

        view1.width(to: view, multiplier: 1.0)

        view1.height(to: view, multiplier: 0.2)

AutoLayoutには欠かせない超便利機能をこんなに簡単に書けてしまいます。

最後に青いビューにボタンを4つ配置してみます。

各部品の位置指定

位置の指定は部品(ボタン)の左上を何を基準にして合わせるかを指定する感じ。

ボタン1の左位置はSuperviewに合わせる

button1.leftToSuperview()

上位置もSuperviewに合わせる

button1.topToSuperview()

buttonはview3に追加していったのだからボタンのSuperviewはview3(青色)ですね。

 

ボタン2の左位置はボタン1の右側で、

button2.leftToRight(of: button1)

上位置はSuperviewに合わせる

button2.topToSuperview()

leftToRight(of: button1)って直感的でわかりやすい!

 

ボタン3の上位置はボタン1の下

button3.topToBottom(of: button1)

これもわかりやすいですね!

イベント処理

最後にボタンを押した時のイベント処理ですが、InitializationClosure.swiftにbutton1DidTapが呼ばれるように記載しています。

ViewController.swiftの肥大化防止

コードだけでレイアウトしていくとコード量が増えてどんどん肥大化していくのでレイアウトの処理を別ファイルに分割しておきます。

今回は、viewWillAppear に書いたコードをそのまま extension しています。

これで ViewController.swift はスッキリしました。

GitHubにプロジェクトを公開しています
https://github.com/tn-works-jp/tinyconstraints-sample

開発環境:
iMac (Retina 5K, 27-inch, Late 2015)
macOS Catalina Version 10.15.5
Xcode Version 11.5 (11E608c)

-iOS

Copyright© ぽんこつ爺の備忘録 , 2021 All Rights Reserved.