部品を横一直線に並べるための入れ物。部品を横一直線に並べるための入れ物。View(以下、水平スタックビュー)について説明する。水平スタックビューとは、部品を横一直線に並べるための入れ物のことをいう。複数部品を画面に並べて個々の部品に制約を追加した場合、あとで部品を全体的に移動したり、間隔の微調整をするときに再度、個々の部品の制約を更新しなければならない。複数部品を水平スタックビューに格納しておけば、部品を全体的に移動するときはビューの制約のみ修正すればよく、間隔の微調整もビューの設定から変更できる。このように水平スタックビューは制約の数を減らし、直線上に並べる部品の配置を扱いやすくするためのビューである。いつもの流れで水平スタックビューをデバイス画面に配置する。ボタンとラベルとスイッチを水平スタックビューの中に入れる。これで水平スタックビューに部品を格納したことになり、部品が横一直線に並ぶ。水平スタックビューの設定を変更する水平スタッビューに部品を追加しただけだと、部品がピチピチに詰められている。設定画面から位置揃えや間隔の設定ができるのでやってみよう。その前に設定の変更が把握しやすいように水平スタックビューのサイズを変更しておく。View」をクリックしたあとにPinボタン(黄緑枠)を押す。Constraints」ボタンを押して制約を追加する。水平スタックビューのサイズが大きくなるので、画面中央にドラッグ&ドロップで移動する。View」、アトリビュートインスペクタボタン(黄緑枠)の順でクリックする。Spacing(等間隔に配置)」を設定する。結果、水平スタックビューは下図のような外見になった。この状態から水平スタックビューの設定を変更するとどのように変化するかを確認していこう。Horizontal(水平方向)、Vertical(垂直方向)の2択。垂直方向の部品の揃え方。水平方向の部品の揃え方。部品間の距離(px指定)。チェックを入れると、ベースラインからのベースラインまでの距離が間隔の基準になる。(水平方向のスタックビューでは影響無し)設定項目はそれほど多くないが、どのように変更されるのかイメージしずらい選択肢もある。Axis部品を並べる方向をHorizontal(水平方向)、Vertical(垂直方向)の2つから選択する。今回は水平スタックビューの説明なのでHorizontalの設定のままにする。垂直スタックビューについては別の記事で説明する。Alignment垂直方向の部品の揃え方を指定する。Fillは、水平スタックビューの高さに合わせて部品をめいいっぱい広げる。ちなみにUISwitchはサイズを変更できないので、デバイス画面では下図のように大きくなるが、アプリを起動すると普通の大きさで表示される。Topは水平スタックビューの上端に部品を揃える。Centerは水平スタックビューの中央に部品を揃える。Bottomは水平スタックの下端に部品を揃える。Baselineの2種類があるので違いを説明する。Baselineという。Baselineの位置に合わせて部品が整列する。Baselineは部品上端になる。ベースラインで上から部品を押さえつけるようなイメージで、部品全体がビューの下側に配置される。Baselineの位置に合わせて部品が整列する。Baselineは部品下端になる。ベースラインで下から部品を持ち上げるようなイメージで、部品全体がビューの上側に配置される。Distribution水平方向の部品の揃え方を指定する。Centeringの5つから選択する。Fillは、隙間ができないようにめいいっぱい部品の幅が大きくなる。上図の例ではボタンのサイズの幅だけが大きくなった。これはボタンに設定されている巨大化優先度が3つの部品の中で一番高いためである。デバイス画面の部品をクリックしたあとに、下図黄緑枠のサイズインスペクタボタンを押してサイズに関する設定画面を開く。Priorityが巨大化優先度である。この値が最も小さい部品のサイズが変更されることになる。今回の巨大化優先度はボタンは250、ラベルは251、ボタンは253に設定している。Fillは部品の幅がすべて同一になるように、めいいっぱい幅が大きくなる。Proportionallyは、拡大率がすべての部品で同じになるようにしながら、めいいっぱい幅が大きくなる。幅10、20、60の部品が幅126の水平スタックビューに入っているとする。Proportionallyを設定すると部品の幅は14、28、84になる。すべての部品の幅が1.4倍に拡大されたということだ。Spacingは部品と部品の間隔がすべて同じになるように配置される。Centeringは部品の中心から部品の中心まで距離が同じになるように配置される。Spacing部品と部品の間隔を指定する。Proportionally」で部品同士の間隔を無くする設定をしても、ここで指定した間隔は必ず入る。部品を縦一直線に並べるための入れ物。...【Swift】水平スタックビューと垂直スタックビューを組み合わせて使う方法。目標までの進捗率をゲージで表示する。テーブルをビヨーンと引っ張って更新する。Recognizerの使い方。画面端のドラッグを検知する。コメントをキャンセルメールアドレスが公開されることはありません。