＊Swift5, Xcode ver 12.1
ボタンをいろいろいじって角丸や影、画像とタイトル付きボタンや丸ボタンを作ってみました。
フォントの指定、文字サイズ
button.titleLabel?.font = UIFont(name: "HelveticaNeue", size: 17)
ボタンのタイトルに任意の文字を入れる
button.setTitle("Button", for: .normal)テキストの色
let textColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
// button.setTitleColor(UIColor.blue, for: .normal)
button.setTitleColor(textColor, for: .normal)
文字をはみ出さないようにする
button.sizeToFit()ボタンの外枠の色
let borderColor = UIColor(red: 224/255, green: 255/255, blue: 255/255, alpha: 1.0).cgColor
button.layer.borderColor = borderColorボタンの外枠の線の太さ
button.layer.borderWidth = 3ボタンの外枠を角丸にする
button.layer.cornerRadius = 5ボタンに影をつける
let shadowColor = UIColor(red: 211/255, green: 211/255, blue: 211/255, alpha: 1.0).cgColor
// button.layer.shadowColor = UIColor.lightGray.cgColor
button.layer.shadowColor = shadowColor影の濃さ
button.layer.shadowOpacity = 1.0影のぼかし
button.layer.shadowRadius = 3影の方向
width = 値が増えると”右方向”に影が伸びる, height = 値が増えると”下方向に”影が伸びる
button.layer.shadowOffset = CGSize(width: 8, height: 8)丸ボタン
circleButton.layer.cornerRadius = circleButton.bounds.width / 2
print("height", circleButton.bounds.size.height)
print("corner", circleButton.layer.cornerRadius)
circleButton.clipsToBounds = true画像とタイトル付きボタン
System imageを使う時は
UIImage(systemName: "chevron.right")カスタムイメージ（自分で用意した画像）の時は下記のコードになるので使い分けに要注意です。
UIImage(named: "foo")LTRとかRTLって言われてるやつです。このコードでは画像が左に来るように.forceLeftToRightにしています。もし、右側に画像を配置したい場合は.forceRightToLeftにしてください
semanticContentAttribute = .forceLeftToRightこのコードで画像のどこに空白を設けるかを決めています。今は画像右側に20の空白を設ける設定にしています。
imageEdgeInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 20.0) let image = UIImage(systemName: "chevron.right")
imageButton.setImage(image, for: .normal)
let imageColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
imageButton.tintColor = imageColor
imageButton.semanticContentAttribute = .forceLeftToRight
imageButton.imageEdgeInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 20.0)コード全体
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var button: UIButton!
@IBOutlet weak var circleButton: UIButton!
@IBOutlet weak var imageButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// フォント、文字サイズを指定
button.titleLabel?.font = UIFont(name: "HelveticaNeue", size: 17)
// ボタンのタイトルに任意の文字を入れる
button.setTitle("Button", for: .normal)
// テキストの色
let textColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
// button.setTitleColor(UIColor.blue, for: .normal)
button.setTitleColor(textColor, for: .normal)
// 文字をはみ出さないようにする
button.sizeToFit()
// ボタンの背景
let backGroundColor = UIColor(red: 250/255, green: 240/255, blue: 245/255, alpha: 1.0)
// button.backgroundColor = UIColor.blue
button.backgroundColor = backGroundColor
// ボタンの外枠の色
let borderColor = UIColor(red: 224/255, green: 255/255, blue: 255/255, alpha: 1.0).cgColor
button.layer.borderColor = borderColor
// ボタンの外枠の線の太さ
button.layer.borderWidth = 3
// ボタンの外枠を角丸にする
button.layer.cornerRadius = 5
// ボタンに影をつける
let shadowColor = UIColor(red: 211/255, green: 211/255, blue: 211/255, alpha: 1.0).cgColor
// button.layer.shadowColor = UIColor.lightGray.cgColor
button.layer.shadowColor = shadowColor
// 影の濃さ
button.layer.shadowOpacity = 1.0
// 影のぼかし
button.layer.shadowRadius = 3
// 影の方向(width = 値が増えると”右方向”に影が伸びる, height = 値が増えると”下方向に”影が伸びる)
button.layer.shadowOffset = CGSize(width: 8, height: 8)
// 丸ボタン
// フォント、文字サイズを指定
circleButton.titleLabel?.font = UIFont(name: "HelveticaNeue", size: 17)
// ボタンのタイトルに任意の文字を入れる
circleButton.setTitle("Circle Button", for: .normal)
// テキストの色
let circleTextColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
// button.setTitleColor(UIColor.blue, for: .normal)
circleButton.setTitleColor(circleTextColor, for: .normal)
// ボタンの背景
let circleBackGroundColor = UIColor(red: 250/255, green: 240/255, blue: 245/255, alpha: 1.0)
// button.backgroundColor = UIColor.blue
circleButton.backgroundColor = circleBackGroundColor
// ボタンの外枠の色
let circleBorderColor = UIColor(red: 224/255, green: 255/255, blue: 255/255, alpha: 1.0).cgColor
circleButton.layer.borderColor = circleBorderColor
// ラベルの外枠の線の太さ
circleButton.layer.borderWidth = 3
circleButton.layer.cornerRadius = circleButton.bounds.width / 2
print("height", circleButton.bounds.size.height)
print("corner", circleButton.layer.cornerRadius)
circleButton.clipsToBounds = true
///Image button
// フォント、文字サイズを指定
imageButton.titleLabel?.font = UIFont(name: "Helvetica Neue Bold", size: 17)
// ボタンのタイトルに任意の文字を入れる
imageButton.setTitle("Button", for: .normal)
// テキストの色
let imageTextColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
// button.setTitleColor(UIColor.blue, for: .normal)
imageButton.setTitleColor(imageTextColor, for: .normal)
// 文字をはみ出さないようにする
// imageButton.sizeToFit()
// ボタンの背景
// let imageBackGroundColor = UIColor(red: 250/255, green: 240/255, blue: 245/255, alpha: 1.0)
// button.backgroundColor = UIColor.blue
// imageButton.backgroundColor = imageBackGroundColor
// ボタンの外枠の色
let imageBorderColor = UIColor(red: 224/255, green: 255/255, blue: 255/255, alpha: 1.0).cgColor
imageButton.layer.borderColor = imageBorderColor
// ボタンの外枠の線の太さ
imageButton.layer.borderWidth = 3
// ボタンの外枠を角丸にする
imageButton.layer.cornerRadius = 5
// ボタンに影をつける
let imageShadowColor = UIColor(red: 211/255, green: 211/255, blue: 211/255, alpha: 1.0).cgColor
// button.layer.shadowColor = UIColor.lightGray.cgColor
imageButton.layer.shadowColor = imageShadowColor
// 影の濃さ
imageButton.layer.shadowOpacity = 1.0
// 影のぼかし
imageButton.layer.shadowRadius = 3
// 影の方向(width = 値が増えると”右方向”に影が伸びる, height = 値が増えると”下方向に”影が伸びる)
imageButton.layer.shadowOffset = CGSize(width: 8, height: 8)
//System imageの時はUIImage(systemName: "pencil")
//カスタムイメージの時はUIImage(named: "foo")
let image = UIImage(systemName: "chevron.right")
imageButton.setImage(image, for: .normal)
let imageColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0)
imageButton.tintColor = imageColor
imageButton.semanticContentAttribute = .forceLeftToRight
imageButton.imageEdgeInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 20.0)
}
}
このコードを実行すると下の画像の様な感じになります
ボタンのサブクラスを作る
全てのボタンそれぞれに同じコードを書くと面倒だし読みにくくなったりするので、そんな時はButtonのサブクラスを作ってあげると便利だし余計なコードが省けて便利です
New Fileを選択してCocoa Touch Classを選択
Classの名前は分かり易い適当な名前をつけてください
＊SubclassはUIButtonを選択してください
無事にFileができたら下記のコードを記述しましょう
import UIKit
class CustomButton: UIButton {
override init(frame: CGRect) {
super.init(frame: frame)
customDesign()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
customDesign()
}
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
customDesign()
}
private func customDesign() {
layer.borderColor = UIColor(red: 224/255, green: 255/255, blue: 255/255, alpha: 1.0).cgColor
layer.borderWidth = 2
layer.cornerRadius = 5
layer.backgroundColor = UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1).cgColor
layer.shadowOpacity = 2
layer.shadowRadius = 3
layer.shadowColor = UIColor.gray.cgColor
layer.shadowOffset = CGSize(width: 4, height: 4)
setTitleColor(UIColor(red: 129/255, green: 216/255, blue: 208/255, alpha: 1.0), for: .normal)
titleLabel?.font = UIFont(name: "Helvetica Neue", size: 24)
}
}
最後にStoryboardで適用させたいボタンを選択し、Custom Classから先ほど作ったクラスを選択できれば完成です！！
どうやってアプリを作っていくのかがとても分かりやすいので初めてアプリを作る方はこちらの書籍ががおすすめです！
以上です！参考になったでしょうか？もし参考になったらボタンひとつ”いいね”をお願いします！！😉
コメント