読者です 読者をやめる 読者になる 読者になる

CrossBridge Lab

技術ネタ、デバイスネタを...

【Swift3】 Xcode7/iOS9 から追加された StackView を使ってみる

Swift UIStackView Xcode iOS

2016/11/19 修正 サンプルをSwift3対応にしました

はじめに

 本記事では Xcode7/iOS9 から追加された StackView を使ったサンプルを作って動きを確認します。サンプルは GitHub にアップしています。

StackView (UIStackView) とは

 Xcode7/iOS9 から追加された機能でユーザインターフェースの実装やメンテナンスにかかるコストを(うまく使えば)削減させることができます。ざっくり言うと以下の機能を持ちます。

  • View のグループ(行 or 列)を管理する
  • Viewをレイアウトするのに必要な制約が自動で追加される

 注意しなければならないことは StackView は iOS9 以上でないと使うことができないということです。

StackView を使ったサンプルを作ってみる

どんなサンプルにするか?

 StackView の特徴の一つとして、グループ内の View が hidden になると自動でレイアウトの再計算が走るという点があります。ということで UISwitch を1つ配置して StackView 内の View の1つを表示・非表示させることとします。

 前述のとおりStackView は 行と列を管理することができます。今回作るサンプルは端末が縦向き(ポートレート)の時は縦に並べ、端末が横向き(ランドスケープ)の時は横に並べるようにします。

サンプルのダウンロード

 今から作るサンプルは GitHub にアップしているので良ければダウンロードして下さい。スターをもらえると喜びます(単純)

github.com

1. UISwitch と UIView を配置する

 Storyboard 上で UISwitch と UIView x 3 を配置します。UISwitch は Constraint を設定して画面上部のセンターに配置します。UIView はあとで StackView に入れるのでとりあえず縦向きに並べておきます。View にはそれぞれ適当な背景色を設定してそれぞれの View が区別できるようにしておきます。

f:id:crossbridge-lab:20151207224752p:plain

2. Action/Outlet を設定する

 UISwitch には Action を指定し、UIView の一つには Outlet を接続します。UISwitch がオフになったときに Outlet を接続している View を hidden にして、オンになったときに hidden を解除するように実装します。

class ViewController: UIViewController {

    @IBOutlet weak var targetView: UIView!
    
    @IBAction func changeValue(_ sender: UISwitch) {
        if sender.isOn {
            targetView.isHidden = false
        } else {
            targetView.isHidden = true
        }
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

3. View を StackView に入れる

 適当に配置した3つの View を StackView に入れます。StackView に入れるには、3つ全ての View を選択した状態で Stack ボタンをクリックします。

f:id:crossbridge-lab:20151207225624p:plain

 3つの View が StackView の中に入り、下のような表示に変わります。

f:id:crossbridge-lab:20151207225823p:plain

 StackView の Constraint は 以下のように設定しておきます。

f:id:crossbridge-lab:20151207233445p:plain

4. StackView の設定を変更する

 Distribution を Fill Equally 、Spacing を 10 pt に変更します。変更したら Update Frames を実行してどのような表示になるか確認します。3つの View が Spacing で設定した値の隙間を開けて同じサイズで表示されていることを確認しましょう。

f:id:crossbridge-lab:20151207233544p:plain

5. 実行してみる

 実行してみましょう。

f:id:crossbridge-lab:20151207233647p:plain

 UISwitch をオフにするとレイアウトが変更される事が分かります。

f:id:crossbridge-lab:20151207233654p:plain

 次は端末を横にしてみましょう。横にしても Spacing の値を開けて同じサイズで表示されます。

f:id:crossbridge-lab:20151207233709p:plain

6. 横にした時に水平に並べるようにする

 今は横にした時にも垂直に並べて表示されていますが、これを横にした時は水平に並べるように修正します。+ ボタンを押して Size Class を追加します。

f:id:crossbridge-lab:20151207234229p:plain

 Landscape Width を any 、Landscape Height を Compact に設定して追加します。

f:id:crossbridge-lab:20151207234305p:plain

 そして Horizontal に変更します。

f:id:crossbridge-lab:20151207234308p:plain

7. 実行して端末を横にしてみる

 実行して端末を横にしてみましょう。先ほどと異なり横にした時は水平に並ぶようになっています。

f:id:crossbridge-lab:20151207233954p:plain

 お疲れ様でした。サンプルを作って StackView の動きを確認するのはここまでです。

StackView の設定

 ここからは StackView の設定について簡単に解説します。StackView は Aligment、Distribution、Spacing を設定します。

f:id:crossbridge-lab:20151207230436j:plain

f:id:crossbridge-lab:20151207230451j:plain

Alignment の設定

 右寄せ(上寄せ)、左寄せ(下寄せ)などを設定します。

f:id:crossbridge-lab:20151207230603p:plain

f:id:crossbridge-lab:20151207230609p:plain

Distribution の設定

  • Fill:AutoLayoutでグループ内のViewを指定して配置する
  • Fill Equally:グループ内のViewを同じ幅/高さで配置する
  • Fill Proportionally:それぞれのViewに設定した幅/高さの比率を維持したままリサイズして配置する
  • Equals Spacing:グループ内のView同士の余白が均等になるように配置する
  • Equals Center:グループ内のViewの中心座標の間隔が均等になるように配置する

Spacing の設定

 グループ内のView同士の間の幅/高さを指定します。

まとめ

 Xcode7 から追加された StackView は今まで面倒だったレイアウトを手助けしてくれるものです。いろいろ試して使いこなせるようになりたいところです。今回作ったサンプルは以下からダウンロードできます。

github.com