最近になって、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