【Swift】水平スタックビューと垂直スタックビューを組み合わせて使う方法。【Swift】水平スタックビューと垂直スタックビューを組み合わせて使う方法。View(垂直スタックビュー)について説明してきた。水平スタックビューは横一直線に部品を並べる入れ物、垂直スタックビューは縦一直線に部品を並べる入れ物である。これだけでも便利なビューではあるが、この2つを組み合わせて複雑な画面レイアウトをスタックビューで作り上げることができる。そこで本記事では、スタックビューを組み合わせて画面レイアウトを構築する手順を説明する。今までの説明してきた内容の組み合わせなので、それほど難しい作業ではないので安心して欲しい。スタックビューの組み合わせ方を考える目標の画面レイアウトを下図とする。茶色と灰色部分はラベル。青色部分は詳細を確認するためのボタンとする。大きく見ると、2つの領域(仮名、AとB)が横に並んでいることが分かる。これは水平スタックビューで実現できそうだ。次にBの領域の中を見てみると、3つの領域(仮名、C、D、E)が縦に並んでいることが分かる。これは垂直スタックビューで実現できそうだ。次にCの領域の中を見てみると、2つの領域(仮名、F、G)が横に並んでいることが分かる。これは水平スタックビューで実現できそうだ。Dも同じように考えることができる。このように全体を掘り下げながら見てみると、スタックビューを入れ子にすることで目標の画面レイアウトを実現できることが分かる。ちなみに、把握するときは全体から見始めるが、作るときは一番深いところから作ったほうがやりやすい。スタックビューに部品を格納するまずはデバイス画面にラベルを配置し(下図赤枠)、アトリビュートインスペクタボタン(黄緑枠)を押して設定画面を開く。Textに「投稿日」、Alignmentは中央、Backgroundは茶色を設定する。次にラベルの角をドラッグ&ドロップで運んでサイズを少し大きくする。Constraints」ボタンを押す。この流れで日付のラベルも作成する。次に、水平スタックビューをデバイス画面に配置し、その中に先ほど作ったラベルを入れる。次に、名前を格納するための水平スタックビューを作る。投稿日のスタックビューと構造が同じなので、デバイス画面にラベルを配置するところから始めるのでは無く、スタックビューを複製して作った方が楽だ。Vキーと入力すると同じスタックビューが現れる。ラベルのテキストのみを変更するのだ。スタックビューの中にスタックビューを入れる「今年も花見の...」のラベルも同じように作成したあと、デバイス画面に垂直スタックビューを配置し、その中にラベルと水平スタックビューを入れる。ちなみに、スタックビューをドラッグ&ドロップで運ぶとき、デバイス画面にあるスタックビューをクリックしても中の部品が邪魔でなかなか選択できない。View」をクリックしてスタックビューを選択状態にしてからデバイス画面にあるスタックビューをドラッグ&ドロップしたほうがやりやすい。垂直スタックビューに入れた部品は隙間無くピチピチに詰まっているのでスペースを入れたい。View」をクリックしたあとに、アトリビュートインスペクタボタン(黄緑枠)を押して設定画面を開き、Spacingを5に変更する。スタックビューの中にスタックビューを入れる確認ボタンもラベルと同じように作成したあと、デバイス画面に水平スタックビューを配置し、作ったボタンと垂直スタックビューを入れる。水平スタックビューの中の部品がピチピチに詰まっているので、スペースを入れたい。View」をクリックしたあとにアトリビュートインスペクタボタン(黄緑枠)を押して設定画面を開く。Alignmentを「Top」、Spacingを5に設定すると下図のようになる。スタックビューに位置の制約を追加する一番外側の水平スタックビューに位置の制約を追加しよう。水平スタックビューをいい感じの場所に移動したあとAlignボタン(下図赤枠)を押して吹き出しの設定画面を表示させる。Containerにチェックを入れたあとに右の▼をクリックする。」を選ぶと現在位置になる。Constraints」ボタンを押して制約の追加が完了。このように、沢山の部品を追加したにもかかわらず、位置の制約がたった1個で済んでしまうところがスタックビューの大きな利点である。アクションを追加するせっかくなので、確認ボタンを押したら本文のラベルを大きくして全文が表示される動きを追加しよう。ボタンとソースコードとのコネクションを確立しよう。下図赤枠のアシスタントエディタボタンを押してソースコードを表示する。続いて、Ctrlキーを押しならがボタンをドラッグ&ドロップでソースコードまで運ぶ。吹き出しの設定画面が表示されるので、Connectionに「Action」、Nameに「openMessage」を入力してConnectボタンを押す。次にラベルとソースコードのコネクションを確立しよう。Ctrlキーを押しながらラベルをドラッグ&ドロップでソースコードまで運ぶ。吹き出しの設定画面が表示されるので、Connectionに「Outlet」、Nameに「messageLabel」を入力してConnectボタンを押す。これでソースコードとのコネクションの確立は完了。以下の青枠部分をソースコードに追記する。ボタンが押されたらラベルの高さを本文に合わせる処理をするコードである。ボタンが押されたらラベルの高さをメッセージに合わせる。//ラベルの行数を無制限にする。//ラベルの高さを本文に合わせる。ボタンが押されたらラベルの高さをメッセージに合わせる。{//ラベルの行数を無制限にする。0//ラベルの高さを本文に合わせる。部品を横一直線に並べるための入れ物。部品を縦一直線に並べるための入れ物。Controllerの使い方。レイアウト変更をアニメーションさせる。スペースを調整してバーにアイコンを並べる。Controlの使い方。7.2)前回の記事に続いて、Swiftで使える部品の確認を行う。コメントをキャンセルメールアドレスが公開されることはありません。