Swift

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

こんにちは、コンジ(@pippi_kon)です。

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

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

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

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

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

【Swift】ラベルに装飾!背景色や角丸枠などをつける方法_サムネ
【Swift】ラベルに装飾!背景色や角丸枠などをつける方法『storyboardに配置したラベルの文字色や背景色、角丸の枠などの装飾をつける方法』についてご紹介します。...

初期状態のボタン

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

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

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

 

装飾後のボタン

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

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

 


ボタン装飾方法

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

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

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

 

ソースコード

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

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

 

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

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

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

 

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

 

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

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

 

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

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

 

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

 

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

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

 

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

 


最後に

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

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

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

初心者向け!Swift入門にオススメの参考書_サムネ
【2020年版】初心者向け!Swift入門にオススメの参考書『Swift初心者にオススメしたいSwiftプログラミング参考書』をご紹介します。...
無料体験あり!初心者におすすめの人気プログラミングスクール3選_サムネ
無料体験あり!初心者におすすめの人気プログラミングスクール3選『プログラミングを学ぶことができる人気のプログラミングスクール』についてご紹介します。...
ABOUT ME
コンジ
コンジ
自分のやりたいことでお金を稼げる生活に憧れて脱サラ。 アプリ開発やブログ運営をしながらのんびり暮らしています。