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

[Swift]動画撮影にて好きなサイズでプレビュー表示する

1 はじめに1.1 前提条件2 実装3 さいごに はじめに こんにちは、nukkyです。 今回はメインのビューの右上とかに小窓の様なプレビューにカメラの映像を出して、動画撮影するという機能を作成したの ...

swift

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

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

swift

[Swift]UITableViewのカスタムセルをStoryboadで

1 はじめに1.1 前提条件2 実装2.1 Storyboadの準備2.2 UITableViewCellクラスの準備2.3 カスタムセルの表示3 さいごに はじめに こんにちは、nukkyです。 以 ...

swift

[Swift]PDFKitでPDFの表示

1 はじめに1.1 前提条件2 PDKitの概要3 実装3.1 PDFの表示4 さいごに はじめに こんにちは、nukkyです。 以前、PDFKitを使わないでPDFを表示する方法を書きましたが、今回 ...

swift

SwiftでLTMorphingLabelを使ってみた

1 はじめに2 LTMorphingLabelとは3 準備4 実装 はじめに 今回はLTMorphingLabelというライブラリが面白そうなので使ってみました。 LTMorphingLabelとは ...

フォロー

follow us in feedly

AppLink

page_side_300rect

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

アプリ情報

目標を達成したい方を応援する、TODOアプリもリリースしております。 下記のアイコンから無料でダウンロードできます。

Web版MyCoach

私たちはより広い方にコーチングを知ってもらいたいと考えています。 下記のサイトにて、コーチの方々を紹介しておりますので、よろしければご覧ください。