【Swift】UIButtonに背景、外枠、角丸などいろいろ設定してみる

buttonSwift

*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)
    }
}

このコードを実行すると下の画像の様な感じになります

Circle button
スポンサーリンク

ボタンのサブクラスを作る

全てのボタンそれぞれに同じコードを書くと面倒だし読みにくくなったりするので、そんな時はButtonのサブクラスを作ってあげると便利だし余計なコードが省けて便利です

New Fileを選択してCocoa Touch Classを選択

Circle Button

Classの名前は分かり易い適当な名前をつけてください
*SubclassはUIButtonを選択してください

Circle button

無事に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から先ほど作ったクラスを選択できれば完成です!!

どうやってアプリを作っていくのかがとても分かりやすいので初めてアプリを作る方はこちらの書籍ががおすすめです!

以上です!参考になったでしょうか?もし参考になったらボタンひとつ”いいね”をお願いします!!😉

コメント

タイトルとURLをコピーしました