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


関連記事

swift

[Swift]動画広告を最後まで見たら何かするアレをAPPLOVINでやってみた

1 はじめに1.1 前提条件2 準備3 実装3.1 Xcodeの設定3.2 広告の再生4 テスト設定とかアプリ管理5 さいごに はじめに こんにちは、nukkyです。 今回はタイトルの通り、アプリでよ ...

【Swift】iOS14でブラウザが起動しない。

1 はじめに2 ブラウザの起動について3 原因について4 修正について5 おまけ:メールについて6 さいごに7 おすすめ書籍 はじめに こんにちはsuzukiです。iOS14がリリースされてしばらく経 ...

swift

Swiftの「UIActivityViewController」でTwitterにだけハッシュタグをつけたい!

1 はじめに2 実装2.1 まずはやってみよう2.2 Twitter連携時のみにハッシュタグをつけたい3 さいごに はじめに こんにちわ、nukkyです。 今回はSNSやメール連携したいときに便利な ...

SwiftUIでChartライブラリを使ってみた。

1 はじめに2 Chartsライブラリについて2.1 ライブラリの導入3 wrapper structの作成3.1 描画のための準備3.2 データの取得と更新3.3 コード全体4 さいごに5 おすすめ ...

【Swift】iOS13.1、Xcode11でSceneDelegate周りを触ってみた。

1 はじめに2 SceneDelegateについて3 SceneDelegateの呼ばれる順番3.1 アプリ起動時3.2 アプリバックグラウンド3.3 アプリフォアグラウンド3.4 アプリフォアグラウ ...

フォロー

follow us in feedly

blog-page_side_responsive

2017年7月
 1
2345678
9101112131415
16171819202122
23242526272829
3031 

アプリ情報

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