【徒然iOS】気ままにUIKit16〜複数部品でやるならStackVIewを使う方が簡単〜

概要

このマガジンは四十を過ぎたおっさんが、

はじはじアプリ体験メモ

を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。

とまあ、

タイトルに元も子もないことを書いてしまっているが、、、

AutoLayoutにこだわって沼にハマっている人って
そもそも、

【Swift】Horizontal Stack Viewの使い方。部品を横一直線に並べるための入れ物。(Swift 2.1、XCode 7.2) | はじはじアプリ体験メモ

【Swift】Vertical Stack Viewの使い方。部品を縦一直線に並べるための入れ物。(Swift 2.1、XCode 7.2) | はじはじアプリ体験メモ

の存在を知らなかったりするからね。

なぜ？

理由は簡単。
コイツらを使うと作業自体が簡単に出来すぎるからか、

・UIKitの本にあまり紹介されていない
か
・紹介されていてもちょろっとしか紹介されてない
から。

数年前までの市販本の傾向

入門書なのに、ブツ切りで難しいことばかりやらせようとする

からね〜〜〜〜。

AutoLayoutは、

使いこなせる分には、使いこなせて損はないけど、

StackViewControllerが使いこなせれば、あえて使うことはあまりない。
自分が作ったアプリでAutoLayout自体を使ったことがないな。正直。

ただし、制約自体の考え方を理解しておくのはどちらにしても必要なので、あえてやってます！！！

さてと、では。

今回

【Swift】Align制約の使い方。複数部品を整列する制約を追加する。(Swift 2.1、XCode 7.2) | はじはじアプリ体験メモ

をやる〜〜〜！

前準備

1. 念の為、バックアップ

2. 新しいクラス

3. ビューコントローラの追加

4. イニシャルビューの変更

をいつも通りやってから本題へ💃

今回は、こんな感じ

本題

記事の通りにやってみたけど、そのまま書いても混乱するだけだと判断したので、要点だけやるね！

記事から抜粋した設定項目を参考に、、、

今回の記事から抜粋

コイツでやります

⒈LeadingEdge

要は基準のパーツを軸に、左揃え

ボタン１の左辺を基準に

制約を追加

ボタン２の幅が変わって左揃えになった

⒉TrailingEdge

要は、基準のパーツを軸に右揃え

ボタン２の右辺を軸に〜〜〜

制約を追加して〜〜〜

右揃え〜〜〜〜

⒊TopEdges

要は、基準のパーツを軸に上揃え

ボタン１の上辺を軸に〜〜〜

制約を追加して〜〜〜

上揃え〜〜〜

⒋BottomEdges

要は、基準のパーツを軸に下揃え

ボタン２の下辺を軸に〜〜〜

制約を追加して〜〜〜

下揃え〜〜〜

⒌Horizontal Centers

要は、基準のパーツの中央に合わせて横中央揃え

ボタン２の中央を軸に〜〜〜

制約を追加して〜〜〜

はみ出てるけど、横中央揃え〜〜〜

⒍Vertical Centers

要は、基準のパーツの中央に合わせて縦中央揃え

ボタン２の中央を軸に〜〜〜

制約を追加して〜〜〜

縦中央揃えになった〜〜〜

⒎FirstBaselines

要は、文字列のベースラインを軸に上辺を整列させたいとき

ボタン３のベースラインを軸に〜〜〜

制約を追加〜〜〜

文字の高さは違うが、上辺は均一に揃った〜〜〜

【iOS】超入門！AutoLayoutで楽々パーツ配置！！｜ 開発者ブログ ｜ 株式会社アイソルート

も参考にしてみてね。

まとめ

前回の

で書いたとおり、基本の役割だけを理解して、あとは自分で動かしてもらうしかないかな。

なぜなら、

部品の配置、部品ごとの制約、部品間の制約などで、組み合わせが千差万別
👉部品間で起きるコンフリクトも千差万別
＋
Xcodeの環境によっても、参考記事とは既に違う可能性がある
＝全てを解説できるものではない

から。