テクノロジー

IBDesignable、IBInspectableを使ってStoryboardでデザインする方法

iOSアプリ開発をStoryboardを使って開発している方も増えてきていると思います。Storyboardを使って開発することでアプリをグラフィカルに開発することができますよね。UIのパーツなどを実装していると、コードでもっと細かく調整してStoryboard上で確認したいということがあるかと思います。

今回は、Storyboard上でUIを細かく調整して、反映・確認する方法を紹介します。

IBDesignableとIBInspectableとは

IBInspectableとIBDesignableは、Storyboard上のUIをコードと連携してグラフィカルに設定できる機能です。この機能を利用することで、角丸や行間の設定などをコード上で設定してもStoryboard上で確認できるようになる機能です。
IBInspectableは、クラスに持たせたプロパティをStoryboard上で設定できるようにします。

IBInspectableを使ってみる

IBInspectableを設定するとStoryboard上からパラメーターを設定できるようにする機能です。今回は、UIButtonのcornerRadiusを変更する処理を書いて行きます。

1. DesignableButtonを実装して角丸を設定できるようにする

DesignableButtonというUIButtonを拡張したクラスを作り、角丸を設定できるようにします。

2. 実装したDesignableButtonをStoryboardで使ってみる

Storyboard上にUIButtonを設置しクラスをDesignableButtonに変更します。ボタンの色は適宜変更してください。

次に右側のインスペクタのタブの真ん中をクリックしてすると、cornerRadiusがパラメータに追加されているので設定したい角丸の半径を設定します。今回は、ボタンの高さが76なので半分の38を設定しました。
設定したらビルドしてみましょう。すると角丸が反映されていることがわかりますね。IBInspectableでStoryboard上から、パラメータを設定することができました。

IBDesignableを使ってみる

IBDesignableは、IBInspectableなどで設定したパラメータを反映した形でStoryboard上に表示することができます。使い方は簡単で、classの上に@IBDesignableを設定するだけです。

設定したら確認してみます。すると、先ほどシミュレータで確認した角丸がStoryboard上反映されていることがわかりますね。

IBDesignableを使えばStoryboard上でデザインを確認しながら進めていくことも可能です。

工夫次第で、シャドウをつけたりボーダーを引いたりすることも可能です。

できないこと

IBInspectableやIBDesignableを使っても、出来ない事や不便な事がいくつかあります。

  1. Viewの高さを元にデザインを反映できない
  2. パラメータにclassやenumを使うことができない
  3. 設定中にクラッシュしてしまうことがある

今挙げたようなことに対応するためには、やはりコードベースになってしまうことが少々デメリットとなってしまいます。それでも、まだアプリ開発に慣れていない人にとってはとても強力な武器になります。

まとめ

Xcodeで提供されているStoryboard機能は、iOSアプリ開発をしていく中でとても便利で力を発揮します。必ずしもコードで書く必要がないものやAutoLayoutが使える部分では、積極的に採用していくことで効率よく開発を進めることができるようになります。

Related post

  1. テクノロジー

    ReactiveXで使うStreamとObserverとは?RxJSでわかりやすく解説

    前回は、ReactiveXとは?RxJSの入門と導入手順について話しま…

  2. Pythonでスクレイピング

    スクレイピングでヘッダー情報を付与する方法とその目的

    今回は、前回試したスクリプトにヘッダー情報を加えたリクエストを投げれる…

  3. デザイン

    デザインで参考になる配色と3つの効果

    Webサイトやポスターを作る際に、どんな色を使ってどのように配置すれば…

  4. Pythonでスクレイピング

    BeautifulSoup4でid, classを持つDOMを取得して効率化しよう!

    前回は、"スクレイピングでヘッダー情報を付与する方法とその目的"を紹介…

  5. テクノロジー

    今週のITニュースハイライト 6/25 – 7/1

    Twitterの@nagami_hiroでは毎日きになるITニュースや…

  6. iOSアプリ開発

    iOSアプリ初心者が覚えておきたい10のUIクラス

    iOSアプリを開発したいけど、最初は何を知っていたら開発できるのかわか…

  1. テクノロジー

    Appleの新しいMessagesで何ができるのか。
  2. 英語

    MBA受験や留学など、世界で使われている英語の資格7選!
  3. Pythonでスクレイピング

    Pythonスクレイピングの導入と利用の注意ポイント
  4. テクノロジー

    今週のITニュースハイライト 6/25 – 7/1
  5. デザイン

    Sketchチュートリアルから学ぶ「アートボード」「マスク」「シンボル」
PAGE TOP