iOS

Swift3 StoryBoard上でUIButtonやUILabel、UIViewのcornerを変更する

投稿日:2017年7月26日 更新日:

はじめに

どうもはじめです。
StoryBoard上で角丸のLabelを実装したいと思っていたら
大先生にStoryBoardの拡張ができることを教えて頂いたので、
備忘録も兼ねて今回書いてみることにしました。

例題として今回はUILabelとUIButton、UIViewのcornerRadiusの設定を
してみようと思います。

前提条件

Swift 3.1

 

StoryBoardの準備

StoryBoard上にUILabel,UIButton,UIViewを配置します。
角丸をStoryBoard上で表示することが目的なので、
cornerの変更がわかりやすいようにそれぞれに背景色を設定しておきます。
設置後のStoryBoardは以下のようになります。

 

カスタムクラスの作成

まずはじめにCustomeClass.swiftというファイルを作成します。

完成後のファイルは以下のようになります。

 

class ~について

class名と何に対するカスタムクラスなのかを指定します。

 

@IBDesignableを記述すると

「Live Rendering」という機能を有効にすることができます。

Live Renderingとは

Attributes inspectorで設定したデザインをアプリのビルドを行わずに
リアルタイムでStoryBoardに反映させることができる機能です。

 

@IBInspectableを記述すると

@IBInspectableで指定した項目がAttributes inspectorに追加されます。

var cornerRadius

「var cornerRadius」のcornerRadisに当たる部分が項目名になります。

CGFloat = 0

「CGFloat = 0」は通常の変数と同じで変数の型と初期値です。

didSet {}

「didSet {}」の中はAttributes inspector上で値を変更した際に実行される処理となります。
今回はcornerRadiusの値を入力し、それぞれのcornerRadiusに設定しています。
※UILabelのcornerRadiusを変更したい場合は
clipsToBoundsをtrueに設定する必要があるためdidSetの中に記述しています。

 

カスタムクラスの指定

あとは各UIに対して対応するカスタムクラスを指定するだけで完了です。

StoryBoard上に配置しているUILabelを選択します。
Custome Classに先ほど作成したclassのclass名を設定します。
同じようにButtonとUIViewにもclassを設定します。

 

以上で完了です。
それぞれにcornerRadiusの設定をした後のイメージが以下の画像になります。

 

さいごに

LiveRenderingを使い始めてからUIの設定をするのが楽しくなりました。
毎回ビルドをする必要もないので時間も短縮されると思います。
これを応用すると複雑なUIもStoryBoard上だけで実装することが可能なので
かなり便利です。

最後まで見て頂きありがとうございました。
この記事が何かの参考になると幸いです。

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

【iOS14】新機能WidgetKitへの挑戦【実践編】

1 はじめに2 Today Extensionとの違い3 ターゲットの追加4 StaticConfiguration4.1 TimelineProvider4.1.1 getSnapshot4.1.2 ...

[Swift]AlertControllerでメモリリークが起きた!便利なMemory Graph

1 はじめに2 今回の問題2.1 deinitの調査2.2 原因の調査3 解決策4 Memory Graphについて5 さいごに6 おすすめ書籍 はじめに こんにちは、suzukiです。この記事の結論 ...

[Swift]忘れられがちなSFSafariViewControllerについて

1 はじめに1.1 前提条件2 SFSafariViewControllerとは2.1 SFSafariViewControllerの特徴2.2 iOS11からのCookie同期について3 SFSaf ...

swift

【Swift】switch文でタプルを使う

1 はじめに2 タプルとは3 タプルを使うswitch文について4 テストコード5 さいごに はじめに こんにちはsuzukiです。本日で投稿が2回目となります。 今後ともよろしくお願い致します。 最 ...

swift

SwiftでTTTAttributedLabelの文字列からリンク表示

1 はじめに2 TTTAttributedLabelとは3 CocoaPodsでインストール4 実装4.1 Labelの表示4.2 タップの検知5 さいごに はじめに こんにちは。 はじめましてnuk ...

フォロー

blog-page_side_responsive

2017年7月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。