【Swift】StackViewで等間隔にViewを配置

iOSアプリ開発時に重要なAutoLayoutを手軽に実装できるStackViewというものがあること知ったので、使ってみた。

 

Storyboardを使わず、SwiftからコードでStackViewを入れ子にする。

以前の投稿で実装した画像３列表示をStackViewを使用し表示してみる。

// 列,行をカウントする変数
var colCnt = 1
var rowCnt = 1

// 親StackView(一覧全体表示用)
var parentStack = UIStackView()
let parStkHeight = CGFloat(self.view.bounds.height) * 0.7
let parStkWidth = CGFloat(self.view.bounds.width) * 0.7
parentStack.frame = CGRectMake(0, 0, parStkWidth, parStkHeight)

parentStack = UIStackView()
parentStack.axis = .Vertical
parentStack.alignment = .Top
parentStack.distribution = .FillEqually
parentStack.spacing = 1

// 行StackView(一覧内の行用)
var rowStack = UIStackView()
// 画像StackView(各画像の画像と名前のセット用)
var imageStack = UIStackView()

// 取得した画像分ループしViewに配置
for i in 0 ..< json.length {

    if (colCnt == 1){
        // １列目のみの処理
        // StackView初期化
        rowStack = UIStackView()
        // 縦・横とも親viewの70%
        let rowStkHeight = CGFloat(self.view.bounds.height) * 0.7
        let rowStkWidth = CGFloat(self.view.bounds.width) * 0.7
        rowStack.frame = CGRectMake(0, 0, rowStkWidth, rowStkHeight)
        
        rowStack.axis = .Horizontal
        rowStack.alignment = .Top
        rowStack.distribution = .FillEqually
        rowStack.spacing = 1
    }
    
    // 画像に付与する名前を生成
    let eijiName = json[i]["eiji_name"].toString()
    let name = UILabel()
    name.text = eijiName
    
    // UIImageView インスタンスの生成
    let imgName = eijiName + Const().PNG_EXTENSION
    let img = UIImage(named: imgName)
    let iconView = UIImageView(image:img)
    // アイコンのサイズを指定
    iconView.bounds.size.width = 60
    iconView.bounds.size.height = 60
    
    // 画像StackViewを生成
    imageStack = UIStackView()
    imageStack.frame = CGRectMake(0, 0, 60, 70)
    
    imageStack.axis = .Vertical
    imageStack.alignment = .Top
    imageStack.distribution = .FillEqually
    imageStack.spacing = 1
    
    // 画像StackViewに追加
    imageStack.addArrangedSubview(iconView)
    imageStack.addArrangedSubview(name)
    
    // StackViewに画像を追加
    rowStack.addArrangedSubview(imageStack)
    
    if (colCnt == 3){
        // ３列目のみの処理
        // 親StackView
        parentStack.addArrangedSubview(rowStack)
        
        // 行を１加算、列をリセット
        rowCnt++
        colCnt = 1
        continue
    }
    colCnt++
}

// スクロールビューに親StackView追加
scrView.addSubview(parentStack)

// 行の数でスクロールの高さを変更
scrView.contentSize = CGSizeMake(240, 80 * CGFloat(rowCnt))

 

下記の参考サイトからコーディングしてみたが、なぜか何も表示されない。

WebでStackViewを入れ子にするコーディングを探してみたが見つからず。

何かAddする方法などが違うのか謎。

どなたか有識者がいましたら、教えてくださいませ。