LoginSignup
15
14

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-06-01

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

15
14
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
14