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]AlertControllerでメモリリークが起きた!便利なMemory Graph

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

swift

[Swift]UITableViewのセルの入れ替えが簡単に実装できるライブラリ「SwiftReorder」

1 はじめに2 準備3 実装4 さいごに はじめに こんにちは、nukkyです。 今回は、UITableViewでセルを入れ替えたい際に、ドラッグ&ドロップ操作を簡単に実装できるライブラリ「S ...

swift

[Swift]ログフレームワーク「CocoaLumberjack」をSwiftで使ってみた

1 はじめに2 準備3 実装3.1 出力先の設定3.2 ログの出力レベルを設定する3.3 ログの出力4 さいごに はじめに こんにちは、nukkyです。 今回はログ管理に便利なライブラリ「CocoaL ...

swift

[Swift]iPadのActionSheet表示でクラッシュする問題

1 はじめに2 エラー内容2.1 エラー原因2.2 まだこれで解決ではない3 さいごに はじめに こんにちは、nukkyです。 私は普段iPhoneアプリの開発を主に行っているのですが 慣れか油断かi ...

[Swift]Alamofireを使ってファイルをDLしてみる

1 はじめに1.1 前提条件2 今回やること3 準備4 実装4.1 DLしたファイルへのアクセス5 さいごに はじめに こんにちは、nukkyです。 みなさんSwiftでの通信ライブラリは何を使ってま ...

フォロー

follow us in feedly

blog-page_side_responsive

2017年7月
 1
2345678
9101112131415
16171819202122
23242526272829
3031 

アプリ情報

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