Swift

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

こんにちは!KON(@pippi_kon)です。

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

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

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

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

なお、ラベルに色や枠などの装飾をつけたい場合は以下の記事をご覧ください。

あわせて読みたい
【Swift】ラベルに装飾!背景色や角丸枠などをつける方法 storyboardに配置したラベル(Label)は、初期状態だとテキストのみのボタンです。 なんだか味気ないですよね。 ...
バージョン情報

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

Xcode:9.2

Swift:4.0.3(Swift4)

初期状態のボタン

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



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

一見これだとボタンなのか「Button」という文字列なのかがわからないですよね。

 

装飾後のボタン

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



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

 


ボタン装飾方法

ボタンの装飾はプログラム(ソースコード)を書くことで行えます。

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

Xcodeの設定で装飾する方法もありますが、プログラムで行う方が使い回しもできるし便利だと思います。

 

ソースコード

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

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

 

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

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

紐付けすることによって、ソースコードからstoryboardのボタンの外見や処理を制御できるようになります。

 

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

 

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

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

 

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

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

 

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

 

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

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

 

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

 


最後に

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

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

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

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