LoginSignup
0
0

More than 1 year has passed since last update.

@kannoyohei

9つのボタンでSnapKitを理解する為のメモ

Last updated at Posted at 2022-06-26

はじめに

swiftを触りはじめてsnapkitというライブラリが全く理解出来なかったのでボタンを作成してsnapkitの理解を深める為のメモになります。

snapkitのインストール方法は公式サイトを参考にして行いました。

まだ何もありませんが以下のコードから始めます。

import UIKit
import SnapKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

UIButtonを作成する

import UIKit
import SnapKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let button1 = UIButton()
        button1.setTitle("1", for: .normal)
        button1.setTitleColor(.black, for: .normal)
        button1.layer.shadowOpacity = 0.5
        button1.layer.shadowRadius = 8
        button1.layer.shadowOffset = CGSize(width: 0, height: 0)
        button1.layer.cornerRadius = 35
        button1.backgroundColor = .white
        
        view.addSubview(button1)
        
        //button1に対して制約をつける
        button1.snp.makeConstraints {
            $0.centerX.equalToSuperview()//親viewのx軸に対して中央に配置
            $0.centerY.equalToSuperview()//親viewのy軸に対して中央に配置
            $0.width.equalTo(70)//横幅７０
            $0.height.equalTo(70)//縦幅70
        }
    }
}

プレビュー画像


影つきの丸ボタンを作成しました。
button1.snp.makeConstraintsの部分で制約をつけています。
今回は左右上下の大きさが70のボタンを画面上下左右の中央に配置しました。

②と③のUIButtonを作成する

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let button1 = UIButton()
        button1.setTitle("1", for: .normal)
        button1.setTitleColor(.black, for: .normal)
        button1.layer.shadowOpacity = 0.5
        button1.layer.shadowRadius = 8
        button1.layer.shadowOffset = CGSize(width: 0, height: 0)
        button1.layer.cornerRadius = 35
        button1.backgroundColor = .white
        
        let button2 = UIButton()
        button2.setTitle("2", for: .normal)
        button2.setTitleColor(.black, for: .normal)
        button2.layer.shadowOpacity = 0.5
        button2.layer.shadowRadius = 8
        button2.layer.shadowOffset = CGSize(width: 0, height: 0)
        button2.layer.cornerRadius = 35
        button2.backgroundColor = .white
        
        let button3 = UIButton()
        button3.setTitle("3", for: .normal)
        button3.setTitleColor(.black, for: .normal)
        button3.layer.shadowOpacity = 0.5
        button3.layer.shadowRadius = 8
        button3.layer.shadowOffset = CGSize(width: 0, height: 0)
        button3.layer.cornerRadius = 35
        button3.backgroundColor = .white
        
        view.addSubview(button1)
        view.addSubview(button2)
        view.addSubview(button3)
        
        button1.snp.makeConstraints {
            $0.right.equalTo(button2.snp.left).offset(-30)
            $0.centerY.equalToSuperview()
            $0.width.equalTo(70)
            $0.height.equalTo(70)
        }
        button2.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.centerY.equalToSuperview()
            $0.width.equalTo(70)
            $0.height.equalTo(70)
        }
        button3.snp.makeConstraints {
            $0.left.equalTo(button2.snp.right).offset(30)
            $0.centerY.equalToSuperview()
            $0.width.equalTo(70)
            $0.height.equalTo(70)
        }
    }
}

プレビュー画像


今回は②と③のボタンを作成しました。
ここではbutton2を基準としてbutton1とbutton3を30px離しています。
UIButtonを作成するコードが重複しているので以下の様に部品化します。

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let button1 = createButton("1")
        let button2 = createButton("2")
        let button3 = createButton("3")
        
        view.addSubview(button1)
        view.addSubview(button2)
        view.addSubview(button3)
        
        button1.snp.makeConstraints {
            //button1の右側をbutton2の左側に対して30px離す
            $0.right.equalTo(button2.snp.left).offset(-30)
            $0.centerY.equalToSuperview()
            $0.width.equalTo(70)
            $0.height.equalTo(70)
        }
        button2.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.centerY.equalToSuperview()
            $0.width.equalTo(70)
            $0.height.equalTo(70)
        }
        button3.snp.makeConstraints {
            //button3の左側をbutton2の右側に対して30px離す
            $0.left.equalTo(button2.snp.right).offset(30)
            $0.centerY.equalToSuperview()
            $0.width.equalTo(70)
            $0.height.equalTo(70)
        }
    }
    
    private func createButton(_ text: String) -> UIButton{
        let button = UIButton()
        button.setTitle(text, for: .normal)
        button.setTitleColor(.black, for: .normal)
        button.layer.shadowOpacity = 0.5
        button.layer.shadowRadius = 8
        button.layer.shadowOffset = CGSize(width: 0, height: 0)
        button.layer.cornerRadius = 35
        button.backgroundColor = .white
        return button
    }
}

ボタンの作成をメソッド化することで結構シンプルになりました。

さらに④から⑨のボタンを作成していきます。

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let button1 = createButton("1")
        let button2 = createButton("2")
        let button3 = createButton("3")
        let button4 = createButton("4")
        let button5 = createButton("5")
        let button6 = createButton("6")
        let button7 = createButton("7")
        let button8 = createButton("8")
        let button9 = createButton("9")
        
        view.addSubview(button1)
        view.addSubview(button2)
        view.addSubview(button3)
        view.addSubview(button4)
        view.addSubview(button5)
        view.addSubview(button6)
        view.addSubview(button7)
        view.addSubview(button8)
        view.addSubview(button9)

        button1.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.right.equalTo(button4)
            $0.bottom.equalTo(button2)
        }
        button2.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.centerX.equalToSuperview()
            $0.bottom.equalTo(button4.snp.top).offset(-30)
        }
        button3.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.left.equalTo(button6)
            $0.bottom.equalTo(button2)
        }
        button4.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.right.equalTo(button2.snp.left).offset(-30)
            $0.centerY.equalToSuperview()
        }
        button5.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.centerX.equalToSuperview()
            $0.centerY.equalToSuperview()
        }
        button6.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.left.equalTo(button5.snp.right).offset(30)
            $0.centerY.equalToSuperview()
        }
        button7.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.right.equalTo(button4)
            $0.top.equalTo(button8)
        }
        button8.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.centerX.equalToSuperview()
            $0.top.equalTo(button5.snp.bottom).offset(30)
        }
        button9.snp.makeConstraints {
            $0.height.equalTo(70)
            $0.width.equalTo(70)
            $0.right.equalTo(button6)
            $0.top.equalTo(button8)
        }
    }
    
    private func createButton(_ text: String) -> UIButton{
        let button = UIButton()
        button.setTitle(text, for: .normal)
        button.setTitleColor(.black, for: .normal)
        button.layer.shadowOpacity = 0.5
        button.layer.shadowRadius = 8
        button.layer.shadowOffset = CGSize(width: 0, height: 0)
        button.layer.cornerRadius = 35
        button.backgroundColor = .white
        return button
    }
}

プレビュー画像

九つのボタンを作成できました。
equalToに定数を埋め込んで動的に表現することも出来ます。

ここからは脱線しますが同じ様なコードが目立つのでリファクタリングしていきます。

import UIKit
import SnapKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let buttons: [UIButton]
        
        let button1 = createButton("1")
        let button2 = createButton("2")
        let button3 = createButton("3")
        let button4 = createButton("4")
        let button5 = createButton("5")
        let button6 = createButton("6")
        let button7 = createButton("7")
        let button8 = createButton("8")
        let button9 = createButton("9")
        
        buttons = [button1, button2, button3, button4, button5, button6, button7, button8, button9]
        
        for button in buttons {
            view.addSubview(button)
        }
        
        for button in buttons {
            button.snp.makeConstraints {
                $0.height.equalTo(70)
                $0.width.equalTo(70)
            }
        }

        button1.snp.makeConstraints {
            $0.right.equalTo(button4)
            $0.bottom.equalTo(button2)
        }
        button2.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.bottom.equalTo(button4.snp.top).offset(-30)
        }
        button3.snp.makeConstraints {
            $0.left.equalTo(button6)
            $0.bottom.equalTo(button2)
        }
        button4.snp.makeConstraints {
            $0.right.equalTo(button2.snp.left).offset(-30)
            $0.centerY.equalToSuperview()
        }
        button5.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.centerY.equalToSuperview()
        }
        button6.snp.makeConstraints {
            $0.left.equalTo(button5.snp.right).offset(30)
            $0.centerY.equalToSuperview()
        }
        button7.snp.makeConstraints {
            $0.right.equalTo(button4)
            $0.top.equalTo(button8)
        }
        button8.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.top.equalTo(button5.snp.bottom).offset(30)
        }
        button9.snp.makeConstraints {
            $0.right.equalTo(button6)
            $0.top.equalTo(button8)
        }
    }

    private func createButton(_ text: String) -> UIButton{
        let button = UIButton()
        button.setTitle(text, for: .normal)
        button.setTitleColor(.black, for: .normal)
        button.layer.shadowOpacity = 0.5
        button.layer.shadowRadius = 8
        button.layer.shadowOffset = CGSize(width: 0, height: 0)
        button.layer.cornerRadius = 35
        button.backgroundColor = .white
        return button
    }
}

実行結果は変化なしです。
button1からbutton9に入れてループさせたら少しだけシンプルになりました。
他に良い手段がありそうですがここまでにしておきます。

読んで頂いてありがとうございました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0