flexlayout

MessagesViewController.swift

class MessagesViewController: UIViewController {
    func addButton(text: String) {
        let button = generateButton(from: String(text))
        button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
        self.buttons.append(button)
    }

    func layoutButtons() {
        buttonView?.removeFromSuperview()

        buttonView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
        buttonView?.backgroundColor = UIColor(red:0.97, green:0.97, blue:0.97, alpha:1.0)

        let flexContainer = buttonView?
                                .flex
                                .direction(.row)
                                .alignItems(.center)
                                .alignContent(.start)
                                .justifyContent(.spaceAround)
                                .wrap(.wrap)
                                .width(bottomBarContainer.frame.width)

        flexContainer?.define { (flex) in
            self.buttons.forEach { flex.addItem($0) }
        }

        bottomBarContainer.addSubview(buttonView!)
        bottomBarContainer.bringSubview(toFront: buttonView!)
        buttonView?.snp.makeConstraints { (make) in
            make.bottom.equalTo(inputBarView.snp.top)
            make.left.equalToSuperview()
            make.right.equalToSuperview()
            // この例のlayoutSubviews()と同じように
            // https://github.com/layoutBox/FlexLayout#example-2
            // 高さだけ指定しない状態でlayout()
            // この行を削除するとボタンのエリア(buttonView)が見た目上消えます
            // https://drive.google.com/file/d/1vuN4bt-v1xNicicty1PGAEUcuoXarPnf/view?usp=sharing
            make.height.equalTo(MuBaseConfig.actionButtonHeight)
        }

        bottomBarContainer.snp.updateConstraints { (make) in
            make.height.equalTo(MuBaseConfig.actionButtonHeight + MuBaseConfig.inputBarHeight)
        }

        flexContainer?.layout(mode: .adjustHeight)
        self.buttons.removeAll()
    }
}