【Swift4】ボタンに装飾!背景色や角丸枠などをつける方法

こんにちは!コンです。

storyboardに配置したボタンは、初期状態だとテキストのみのボタンです。

なんだか味気ないですよね。

このままだと、テキストなのかボタンなのか見分けがつきづらいです。

そこで今回は、ボタンに色や枠などの装飾をつける方法についてご紹介します。

スポンサーリンク

バージョン

この記事は以下のバージョンで記載しています。

Xcode:9.2

Swift:4.0.3

初期状態のボタン

storyboardに配置したてのボタンはこのようになっています。



テキストのみのボタンです。

スポンサーリンク

装飾後のボタン

初期状態のボタンに、枠線・背景色・文字色を装飾したボタンがこちらです。



ただのテキストだったボタンが、装飾することでボタンらしくなりました。

装飾方法

ボタンの装飾はプログラムを書くことで行えます。

そんなに難しくはありませんのでご安心ください。

スポンサーリンク

ソースコード

まずはソースコード全文のご紹介です。

それでは、ボタン装飾に関する部分の説明をします。

5行目は、storyboardのボタンをソースコードに紐づけている処理です。

storyboardのボタンを「controlキー」を押しながらソースコードにドラッグ&ドロップすることで紐付けできます。

12〜17行目が実際にボタンを装飾している部分です。

ボタン背景色を変数に代入し、13行目で変数値を使ってボタン背景色を設定しています。

変数を使わずに、13行目で直接UIColor()を指定しても問題ありません。

ボタンの枠線の幅(太さ)を設定しています。

数値が大きいほど枠線が太くなります。

ボタンの枠線の色を設定しています。

ボタンの枠線を角丸に設定しています。

数値が大きいほど丸くなります。

ボタンのタイトルの色を設定しています。

最後に

いかがだったでしょうか?

今回は、storyboardに配置したボタンに文字色や背景色、角丸の枠などの装飾をつける方法についてご紹介しました。

ボタンはアプリを作る上で欠かせない必須アイテムです。

ボタンを装飾して自分だけのオリジナルボタンを作成しましょう!

スポンサーリンク