スポンサーリンク
こんにちは、コン（@pippi_kon）です。
storyboardに配置したボタンは、初期状態だとテキストのみのボタンです。
なんだか味気ないですよね。
このままだと、テキストなのかボタンなのか見分けがつきづらいです。
そこで今回は、『ボタンに色や枠などの装飾をつける方法』についてご紹介します。
なお、ラベルに色や枠などの装飾をつけたい場合は以下の記事をご覧ください。
【Swift】ラベルに装飾！背景色や角丸枠などをつける方法『storyboardに配置したラベルの文字色や背景色、角丸の枠などの装飾をつける方法』についてご紹介します。...
スポンサーリンク
初期状態のボタン
storyboardに配置したてのボタンはこのようになっています。
テキストのみのボタンです。
一見これだとボタンなのか「Button」という文字列なのかがわからないですよね。
装飾後のボタン
初期状態のボタンに、枠線・背景色・文字色を装飾したボタンがこちらです。
ただのテキストだったボタンが、装飾することでボタンらしくなりました。
スポンサーリンク
ボタン装飾方法
ボタンの装飾はプログラム（ソースコード）を書くことで行えます。
そんなに難しくはありませんのでご安心ください。
Xcodeの設定で装飾する方法もありますが、プログラムで行う方が使い回しもできるし便利だと思います。
ソースコード
まずはソースコード全文のご紹介です。
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var button: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// ボタンの装飾
let rgba = UIColor(red: 255/255, green: 128/255, blue: 168/255, alpha: 1.0) // ボタン背景色設定
button.backgroundColor = rgba // 背景色
button.layer.borderWidth = 0.5 // 枠線の幅
button.layer.borderColor = UIColor.black.cgColor // 枠線の色
button.layer.cornerRadius = 5.0 // 角丸のサイズ
button.setTitleColor(UIColor.white, for: UIControlState.normal) // タイトルの色
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
それでは、ボタン装飾に関する部分の説明をします。
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var button: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// ボタンの装飾
let rgba = UIColor(red: 255/255, green: 128/255, blue: 168/255, alpha: 1.0) // ボタン背景色設定
button.backgroundColor = rgba // 背景色
button.layer.borderWidth = 0.5 // 枠線の幅
button.layer.borderColor = UIColor.black.cgColor // 枠線の色
button.layer.cornerRadius = 5.0 // 角丸のサイズ
button.setTitleColor(UIColor.white, for: UIControlState.normal) // タイトルの色
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
5行目は、storyboardに配置したボタンをソースコードに紐づけている処理です。
storyboardのボタンを「controlキー」を押しながらソースコードにドラッグ＆ドロップすることで紐付けできます。
紐付けすることによって、ソースコードからstoryboardのボタンの外見や処理を制御できるようになります。
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var button: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// ボタンの装飾
let rgba = UIColor(red: 255/255, green: 128/255, blue: 168/255, alpha: 1.0) // ボタン背景色設定
button.backgroundColor = rgba // 背景色
button.layer.borderWidth = 0.5 // 枠線の幅
button.layer.borderColor = UIColor.black.cgColor // 枠線の色
button.layer.cornerRadius = 5.0 // 角丸のサイズ
button.setTitleColor(UIColor.white, for: UIControlState.normal) // タイトルの色
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
12〜17行目が実際にボタンを装飾している部分です。
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var button: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// ボタンの装飾
let rgba = UIColor(red: 255/255, green: 128/255, blue: 168/255, alpha: 1.0) // ボタン背景色設定
button.backgroundColor = rgba // 背景色
button.layer.borderWidth = 0.5 // 枠線の幅
button.layer.borderColor = UIColor.black.cgColor // 枠線の色
button.layer.cornerRadius = 5.0 // 角丸のサイズ
button.setTitleColor(UIColor.white, for: UIControlState.normal) // タイトルの色
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
ボタン背景色を変数に代入し、13行目で変数値を使ってボタン背景色を設定しています。
変数を使わずに、13行目で直接UIColor()を指定しても問題ありません。
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var button: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// ボタンの装飾
let rgba = UIColor(red: 255/255, green: 128/255, blue: 168/255, alpha: 1.0) // ボタン背景色設定
button.backgroundColor = rgba // 背景色
button.layer.borderWidth = 0.5 // 枠線の幅
button.layer.borderColor = UIColor.black.cgColor // 枠線の色
button.layer.cornerRadius = 5.0 // 角丸のサイズ
button.setTitleColor(UIColor.white, for: UIControlState.normal) // タイトルの色
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
ボタンの枠線の幅（太さ）を設定しています。
数値が大きいほど枠線が太くなります。
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var button: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// ボタンの装飾
let rgba = UIColor(red: 255/255, green: 128/255, blue: 168/255, alpha: 1.0) // ボタン背景色設定
button.backgroundColor = rgba // 背景色
button.layer.borderWidth = 0.5 // 枠線の幅
button.layer.borderColor = UIColor.black.cgColor // 枠線の色
button.layer.cornerRadius = 5.0 // 角丸のサイズ
button.setTitleColor(UIColor.white, for: UIControlState.normal) // タイトルの色
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
ボタンの枠線の色を設定しています。
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var button: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// ボタンの装飾
let rgba = UIColor(red: 255/255, green: 128/255, blue: 168/255, alpha: 1.0) // ボタン背景色設定
button.backgroundColor = rgba // 背景色
button.layer.borderWidth = 0.5 // 枠線の幅
button.layer.borderColor = UIColor.black.cgColor // 枠線の色
button.layer.cornerRadius = 5.0 // 角丸のサイズ
button.setTitleColor(UIColor.white, for: UIControlState.normal) // タイトルの色
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
ボタンの枠線を角丸に設定しています。
数値が大きいほど丸くなります。
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var button: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// ボタンの装飾
let rgba = UIColor(red: 255/255, green: 128/255, blue: 168/255, alpha: 1.0) // ボタン背景色設定
button.backgroundColor = rgba // 背景色
button.layer.borderWidth = 0.5 // 枠線の幅
button.layer.borderColor = UIColor.black.cgColor // 枠線の色
button.layer.cornerRadius = 5.0 // 角丸のサイズ
button.setTitleColor(UIColor.white, for: UIControlState.normal) // タイトルの色
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
ボタンのタイトルの色を設定しています。
スポンサーリンク
最後に
今回は、『storyboardに配置したボタンに文字色や背景色、角丸の枠などの装飾をつける方法』についてご紹介しました。
ボタンはアプリを作る上で欠かせない必須アイテムです。
ボタンを装飾して自分だけのオリジナルボタンを作成しましょう！
【2020年版】初心者向け！Swift入門にオススメの参考書『Swift初心者にオススメしたいSwiftプログラミング参考書』をご紹介します。...
無料体験あり！初心者におすすめの人気プログラミングスクール3選『プログラミングを学ぶことができる人気のプログラミングスクール』についてご紹介します。...
スポンサーリンク
スポンサーリンク
