Help us understand the problem. What is going on with this article?

[iOS] Storyboardで角丸やボーダーを設定したい! そんなあなたに贈るUIView拡張ライブラリ「EXTView」

More than 3 years have passed since last update.

問題意識

単純なプロトタイプ作成まではStoryboardだけで済んだのに。。。アプリ開発が本格化してきてデザイナーさんから上がってきたデザイン案を元にViewの作り込みを始めると「う、ここでViewに角丸がいるのか。。」「おっと、このViewにはボーダー表示入れないと。。」という状況が増え、それまでStoryboardのみで調整してきたViewもソースコード上から見た目の修正を入れなければならないシーンが増えますよね。

角丸やボーダー程度のちょっとした見た目調整なら、できればStoryboard上で行いたい! そんな希望を叶えるのが今回紹介するUIView拡張ライブラリ「EXTView」です。

利用準備

「EXTView」のgithubのアドレスは以下です。

  https://github.com/recruit-mtl/EXTView
  (ぜひ★starで支援いただけると嬉しいです^^)

CocoaPodsに対応していますので、以下の設定をプロジェクトのPodfileに追加するだけで利用できるようになります。

use_frameworks!

pod "EXTView"

pod tryにも対応しているので、もっと簡単に試したい場合は、コマンドラインから以下のコマンドを打って試してみましょう。

pod try EXTView

利用方法

EXTViewはUIView群を継承したクラスとして実装されています。具体的にはStoryboard上に配置したUIViewをカスタムクラス指定でEXTView系統に置き換えることで、角丸やボーダーが指定できるようになります。

  1. まずはViewをStoryboard上に配置します。例ではUIButtonを配置しています。
    Added a UIButton

  2. 次に「Identity Inspector」を開いて、カスタムクラスとして EXTView系統のクラス名を指定します。例ではUIButtonを配置しましたので、カスタムクラスとして 「EXTButton」を指定します。
    Set EXTView class name

  3. カスタムクラスをEXTView系統に指定した後に、「Attributes Inspector」を開くと、ボーダー、角丸、背景のグラデーションが追加で指定できるようになります。
    design EXTView's Attributes


    Rendered a EXTView in IB

拡張されたUIViewクラス一覧

EXTViewライブラリでは以下のUIViewクラスが拡張されています。

継承元クラス名 拡張クラス名
UIView EXTView
UILabel EXTLabel
UIButton EXTButton
UISegmentedControl EXTSegmentedControl
UITextField EXTTextField
UISlider EXTSlider
UISwitch EXTSwitch
UIActivityIndicatorView EXTActivityIndicatorView
UIProgressView EXTProgressView
UIPageControl EXTPageControl
UIStepper EXTStepper
UITableView EXTTableView
UIImageView EXTImageView
UICollectionView EXTCollectionView
UICollectionViewCell EXTCollectionViewCell
UICollectionReusableView EXTCollectionReusableView
UITextView EXTTextView
UIScrollView EXTScrollView
UIPickerView EXTPickerView
UINavigationBar EXTNavigationBar
UIToolbar EXTToolbar
UITabBar EXTTabBar
UISearchBar EXTSearchBar

実装解説

今回のStoryboardの拡張はXcode 6から導入されたIB_DESIGNABLE / IBInspectableという機能を利用して実現されています。IB_DESIGNABLE / IBInspectableの機能を利用すると、今回のようにStoryboardの設定を拡張することができるため、見た目でデザインを管理・調整できる範囲が広がり、ソースコードで見た目調整するよりメンテナンシビリティ向上に貢献できる場合があります。ぜひ有用なシーンで活用してみてください。

street-academy
教えたいと学びたいをつなぐまなびのマーケット「ストアカ 」を運営するスタートアップ
https://www.street-academy.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした