Layoutをコードベースで定義して、使って行こうと思います。参考UIアイコンや背景色などコンテンツが必要な箇所は実装できないので、省略しています。LayoutとはViewの相関関係に基づいて制約をすることによってレイアウトする手法です。なんで大事なの一言でまとめるとレスポンシブのためです。iOSデバイスは昔と違って、いろんな大きなの種類があります。それら一つ一つにレイアウトを決めても効率が悪いので、まとめてレイアウトしようというわけです。Layoutに用いるインターフェースオブジェクトの位置や大きさの関係性のことです。横12pxで中央揃えして」といったようなことが制約に当たります。制約式とは制約式とは制約を実際のコードで定義したものです。Layoutでは、このような制約式の連立方程式を解いて、レイアウトを定めています。他のインターフェースオブジェクト以外にも、親クラスsuperviewなども参照することができます。制約を定義するには以下の二つの方法があります。NSLayoutAnchorNSLayoutLayoutとは、iOS9から追加された制約を制定するためのクラスで、開発者が明示的に制約オブジェクトを生成します。詳しくは知りませんが、昔はNSLayoutConstrainだったみたいですが、利便性と安全性を備えたものに進化したみたいです。公式ページは以下のようにのなっています。良記事は以下のものです。Sizeとは、あらかじめオブジェクトの持つコンテンツによって決定される制約の定義方法です。二つのUITextFieldのテキストフィールドを作ったとしてひとつはaでもう一つはaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaとすると、二つ目の方が小さくなります。xibファイルxibファイルとはApple独自のxmlフォーマットでStoryBoardと同等の役割をします。配置は考えずにフォームを作成まず、フォームを作成します。Layoutを使うので、コードベースで生成したいと思います。インターフェースオブジェクトを生成します。helpでヘルプを見ることができます。Referenceで見ることができます。UIButtonには以下のようなプロパティを持つ。装飾までを含めた大きさここでCGReck型で指定することになります。ここで自分のviewの中央に配置したいので、self.view.bounds.width/2などと定義します。ここでboundsとframeの違いが大事なので以下の記事を参考にしてください。自身の座標からみての自分つまり必ずbounds.origin.xは0であり、y座標も然りです。デフォルトでは、背景もUIColor.white、文字色もUIColor.whiteなので、初期画面では何も見えません。それはCGRectの仕様で、以下のように座標をとるからです。引用ボタンを配置まで、できあがったコードが以下の通りです。}}ビルドすると以下のようになってます。ここまでは目的通りです。ここでUITextFieldを作っていきます。UIButtonと全く一緒です。それぞれにプレースホズダーを設定しました。次にUIImageをロゴ用に配置したいと思います。無料でロゴを作れるサービス「hatchful」を使いました。hatchful.shopify.com他のものと同様に制約を課してみます。Catalogに追加します。UIImageは「画像がない」のケースがあるので初期化するとオプショナル型が返ってきます。一応、オプショナルの使い方は以下の通りです。するとこのようになりました。self.[オブジェクト].frameとするとCGRectを渡すことになるので、CGSizeで高さと横幅だけ指定しておきます。すべて原点にあるので、以下のようになります。制約を課す制約に関しての公式サイトは以下の通りです。developer.apple.com以下のような構成にしたいと思っています。コンテンツはすべて中央揃えにしたいです。以下のように制約をかけたいオブジェクトのプロパティとしてAnchorを指定します。すべてのUIViewを継承しているオブジェクトは使うことができます。以下のようの種類を指定できます。//UILayoutGuideにはない以下の画像が参考になります。縦medium.com一応、補足のためにもう一つ、付け足すとすると以下の画像です。テキストの最後の行のbaseline以下のような画像がわかりやすいです。NSLayoutConstraint!となっています。addSubViewを追加してからじゃないと制約はかけることができないみたいです。trueのようにすると以下のようになります。制約をつけるどの制約が勝つかを定義しなければ、おなじ優先度ならば競合してしまうでしょう。AutoLayoutのデバッグ以下のサイトでデバック方法がかかれてあります。レイアウト崩れの例レイアウトが崩れるのは以下の二つがあります。以下で曖昧なものがあるかを調べられます。コンフリクトを確認する以下のようにエラーが出ればコンフリクトしています。まとめ特に、StoryBoardを見ながら開発していると、macbookでは小さく感じてしまうことがありました。エンジニアとしても宣言することは非常に価値があるので、これからもコードでしっかり書いていこうと思います。次回予告translatesAutoresizingMaskIntoConstraintsやレイアウトの階層などをまとめたいと思います。参考文献**以下の文献はかなり古いので、注意が必要です。»プロフィール学生エンジニア。忘れてしまうので備忘録です。flaskでServerlessにホストするTelepresence概論スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。