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上だけで実装することが可能なので
かなり便利です。

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

page_footer_300rect




page_footer_300rect




-iOS
-

執筆者:


comment

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

CAPTCHA


関連記事

swift

Swift3 コードでの画面遷移

1 はじめに1.1 環境2 performSegue2.1 事前準備2.2 遷移先を示すSegueを作成2.3 遷移させるイベントを作成2.4 画面遷移させる3 prepare3.1 事前準備3.2 ...

swift

[Swift3] SwitchとEnumを使ってSectionやCellを指定する

1 はじめに1.1 環境2 Enumの用意3 Tableの用意4 Cellの返却にEnumを使用する5 さいごに はじめに どうも、はじめです。 今回はSectionやCellの指定にSwitchとE ...

[Swift]アプリのフォアグラウンドに特定の処理を行う。

1 はじめに2 今回の目標3 画面構成4 通知の設定4.1 通知の送信4.2 通知の受信と削除-BaseController5 それぞれの画面の設定5.1 初期画面(FirstViewControll ...

iOSでFirebase Authenticationを実装してみる その1

1 はじめに2 Firebaseプロジェクトの設定3 新規ユーザー登録4 既存ユーザーのログイン5 匿名ログイン6 エラーメッセージ7 最後に8 おすすめ書籍 はじめに はじめまして、Yossyです。 ...

swift

[Swift3]で直感的にアニメーションが記述できるライブラリ「Cheetah」

1 はじめに2 準備3 実装3.1 準備3.2 移動3.3 回転と拡大3.4 速度調整3.5 繰り返し3.6 アニメーションの終了4 さいごに はじめに こんにちは、nukkyです。 今回は、仕事でV ...

フォロー

follow us in feedly

page_side_300rect

2017年7月
« 6月 8月 »
 1
2345678
9101112131415
16171819202122
23242526272829
3031 

アプリ情報

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