Edited at

コードでUIを作る際に、いい感じにコンポーネント化したかった

More than 3 years have passed since last update.

最近になって、UIを全てコードで書くことをやっています。

初めは、Storyboardよりも差分わかりやすくていいやーとノリノリでしたが

ファイル数が膨大になってきて、同じような記述をまとめたくなりました。

あと、はやりのReactっぽさをネイティブアプリでも行うことを見越して、Component化することを試したくなりました。


やってみたこと

Component.swiftをつくり、その中で各UIのまとまりをstructで定義してます。

メソッドチェインでUIButtonのプロパティを設定したかった

こちらの記事で教えてもらったThenを使って記述しています。


Component.swift

import UIKit

struct ButtonComponent {

var buttonS = UIButton().then {
$0.frame = CGRectMake(0, 0, 90, 60)
$0.backgroundColor = UIColor.orangeColor()
$0.tintColor = UIColor.lightGrayColor()
$0.titleLabel!.font = UIFont(name:"HelveticaNeue-Bold",size:17)
$0.layer.borderColor = UIColor.lightGrayColor().CGColor
$0.layer.borderWidth = 1.0
$0.layer.cornerRadius = 3.0
}

var buttonM = UIButton().then {
$0.frame = CGRectMake(0, 0, 210, 60)
$0.imageEdgeInsets = UIEdgeInsets(top: 0, left: -40, bottom: 0, right: 40)
$0.titleLabel!.font = UIFont(name:"HelveticaNeue-Bold",size:17)
$0.backgroundColor = UIColor.greenColor()
$0.tintColor = UIColor.whiteColor()
$0.layer.cornerRadius = 3.0
}

var buttonL = UIButton().then {
$0.frame = CGRectMake(0, 0, 300, 60)
$0.imageEdgeInsets = UIEdgeInsets(top: 0, left: -40, bottom: 0, right: 40)
$0.titleLabel!.font = UIFont(name:"HelveticaNeue-Bold",size:17)
$0.backgroundColor = UIColor.blueColor()
$0.tintColor = UIColor.whiteColor()
$0.layer.cornerRadius = 3.0
}
}


Viewでは、ボタンのタイトルやイメージを設定するくらいで使いまわしてます。


HogeView.swift

import UIKit

class HogeView: UIView {

var editButton = ButtonComponent().buttonL.then {
$0.setTitle("編集する", forState: .Normal)
}

required init(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}

init() {
super.init(frame: CGRectMake(0, 0,
UIScreen.mainScreen().bounds.width,
UIScreen.mainScreen().bounds.height))
backgroundColor = UIColor.whiteColor()
addSubview(editButton)
}

override func layoutSubviews() {
super.layoutSubviews()

let maxX = self.frame.width
let maxY = self.frame.height

editButton.center = CGPoint(maxX/2, maxY/2)
}
}


たぶん本来は、CustomButtonとかクラス作るのが正しいのかな?

ファイル数が増えるのは避けたいですが

もっとより良い汎用的なComponentの管理方法があったら、ご教授お願い致します。m(_ _)m