0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

SwiftAdvent Calendar 2016

Day 13

Xcodeにおける色の扱いに関する提案

Posted at

Swift Advent Calender 2016 13日目です! ちょうど真ん中らへん。

Xcodeにおいて色の扱いかたが不満なのでやっていることを書きますが、現状もまだまだ不満です。
こんな風にやってるよ!という方は是非コメント下さい。

さて、Xcodeで色を扱うときの不満点は大きく2点あります。

  1. カラーコードが使えない
  2. InterfaceBuilder上で定数として色が扱えない

一つずつ解決していきましょう。

カラーコードを扱えるようにする

こちらは簡単。
Extensionを作れば解決です。

UIColor+Hex.swift
extension UIColor {
  convenience init(hex: UInt) {
    let a = CGFloat((hex & 0xFF000000) >> 24) / 255.0
    let r = CGFloat((hex & 0x00FF0000) >> 16) / 255.0
    let g = CGFloat((hex & 0x0000FF00) >>  8) / 255.0
    let b = CGFloat((hex & 0x000000FF) >>  0) / 255.0
    self.init(red: r, green: g, blue: b, alpha: a)
  }
}

UIntにしているのは、Int型がInt32のときに、桁あふれするからです。

InterfaceBuilder上で定数で色を扱えるようにする

定数で色を扱うようにする

まずは、色を定数化します。あとから変更しても良いようにblueとかは作らないほうが良いと思います。

UIColor+Enum.swift
extension UIColor {
  enum Pallet: String {
    case main
    case veryVeryDark
    case veryDark
    case dark
    case light
    case veryLight
    case danger
    
    var hex: UInt {
      switch self {
      case .main:         return 0xFF14D2EB
      case .veryVeryDark: return 0xFF444444
      case .veryDark:     return 0xFF666666
      case .dark:         return 0xFF909697
      case .light:        return 0xFFBFC7C9
      case .veryLight:    return 0xFFF7F7F7
      case .danger:       return 0xFFFF467A
      }
    }
  }
  
  convenience init(managed: String) {
    self.init(hex: Managed(rawValue: managed)!.hex)
  }

  convenience init(pallet: Pallet) {
    self.init(hex: pallet.hex)
  }
}

InterfaceBuilder上でPalletを使えるようにする

UIView+ManagedColor.swift
extension UIView {
  @IBInspectable var backgroundColorManaged: String {
    set { backgroundColor = UIColor(managed: newValue) }
    get { return "" }
  }

  @IBInspectable var tintColorManaged: String {
    set { tintColor = UIColor(managed: newValue) }
    get { return "" }
  }
}

これで、InterfaceBuilder上でbackgroundColorManagedに"main"とか指定すると色が変更されるようになりました。

現状の不満点

色々無様

  1. backgroundColorManagedはgetterが機能していない。(まぁ使わないけど)
  2. 指定方法が結局文字列。間違った文字列指定するとクラッシュ。AppleさんIBInspectableでenum使わせて下さい。

IB上で色が分からない

@IBDesignableがextensionだと使えないのが悪い。Appleさん使わせて下さい。
そもそも@IBDesignableもうちょっと使い物になるようにして下さい。

extension大量発生

色設定項目全てにextension作る必要がある。
これに関してはもうしょうがない。

感想

R.swiftとか、コード上でやるだけなら良い方法はいくらでもありそうなんですが、
僕はStoryboard大好きっ子なので、なんとかStoryboardで完結したくこういうことをやっています。
もっと良い方法がある気がとてもしているのですが、思いついてません。

参考

明日は同僚の@noppefoxwolf君です!

0
4
0

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
0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?