【swfit4/autolayout】FlexLayoutの使い方。サンプルコード実装

メインストリーボード無しで実装してるとどうしてもオートレイアウトが少し面倒くさい。

というか僕は、ずっとCartographyというライブラリを使っていた。

しかしながら、tableviewでカスタムセルを作ろうとしてもうまくかず、、できたとしても綺麗にかけず、、(removeFromSuperviewとか使ってた。。)

個人のアプリだし、まあいっかと思いつつもモヤモヤしていた。
そこでいろいろ検索してるとFlexLayoutに出会った。まだゴリゴリに書いてるわけではないけど、選択肢の一つとしては全然ありかなと思うので簡単なサンプルコードを書いてみた。

ので、探してる人に向けて参考になれば良いかなと思う。

FlaxLayoutのサンプルコード

とにもかくもサンプルコードを載せとく。

cssをかじっている人なら関数名を見ればなんとなくやりたいことはわかると思う。

ひたすらメソッドチェーンでつないでいってクロージャでviewを返すイメージ。


import UIKit
import FlexLayout

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.view.backgroundColor = UIColor.white

        let sampleLabel = UILabel()
        sampleLabel.text = "aaa"
        
        let view1 = UIView()
        view1.backgroundColor = UIColor.red
        view1.addSubview(sampleLabel)
        
        let view2 = UIView()
        view2.backgroundColor = UIColor.blue
        view2.addSubview(sampleLabel)

        let view3 = UIView()
        view3.backgroundColor = UIColor.green
        view3.addSubview(sampleLabel)

        self.view.flex.justifyContent(.center).padding(10).define { (flex) in
            flex.addItem(view1).height(40)
            flex.addItem(view2).height(50).marginTop(30)
            flex.addItem(view3).height(100).marginTop(50)
        }
    }
    
    override func viewDidLayoutSubviews() {
        // Then let the flexbox container layout itself
        self.view.flex.layout()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}


もっとサンプルを見たい人は、ライブラリをに見に行くといいかと思います