Swift

SnapKitでAutolayoutがコードで簡単に書ける![Swift3]


 

今回はコードで簡単にAutolayoutが書ける『SnapKit』というライブラリをご紹介します!

『そもそもAutolayoutってコードで書くの???』

確かに入門書などを見てみるとAutolayoutはMain.Storyboardなどを開いてinterfacebuilderで設定していくものが多いです。

コードで設定する入門書はほぼないと思います。

しかし、実務では複数人で開発する場合、interfacebuilderで設定すると面倒なことが起こりえます。

だいたいGithubなどのバージョン管理サービスを使用するのですが、
interfacebuilderとバージョン管理ツール(Gitなど)の親和性が低いことが原因で起こるコンフリクトがめっさ面倒なのです。。。

 

なのでinterfacebuilderを使わずに、コードでAutolayoutを設定していくのが人気なのです!!

SnapKitの導入方法

SnapKitはcocoapodsで楽々導入することができます。
Cocoapodsをご存知でない方はこちら!

 

podfileを開けたら、

pod ‘SnapKit’
と記述しましょう。

 

そしてターミナルで
pod install

ですね!

 

これで導入は終了です!

使用方法

中心に置く方法

こちらの画像のように青いラベルを中心に配置したいと思います。

コードはこのようになっています。

import UIKit
import SnapKit // 追加

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let label = UILabel()
        label.text = "中心に置くテキスト"
        label.textColor = UIColor.white // 見やすいように色を変えます
        label.backgroundColor = UIColor.blue // 見やすいように色を変えます
        view.addSubview(label)
        
        // SnapKit
      // autolayoutの対象.snp.makeConstraints
        label.snp.makeConstraints{ (make) in // このスコープ内にautolayoutを記述する
            make.center.equalTo(view.snp.center) //make.項目.どのように(何処と)
        }
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }


}

 

label(autolayoutの対象).snp.makeConstraints

こちらのコードで大切な部分は、SnapKit特有の記述がされている

label.snp.makeConstraintsからの3行のコードです!

label.snp.makeConstraintsによってautolayoutを記述するスコープを作成し、

その中にmakeから始まるautolayoutを記述します。

make.どの項目を.どのように(何処と)

のように記述するルールです。

今回は、

make.center(中心を).equalTo(等しく)(viewの中心と)

といったように設定しました。

viewはデフォルトのviewです。snapkit特有のものではありません。

 

 

左から40、上から40のところに置く方法

こちらのコードはこのようになっています。

上と大して変化がないので、viewDidLoadないの記述だけを載せます。

 

override func viewDidLoad() {
        super.viewDidLoad()
        
        let label = UILabel()
        label.text = "左から40、上から40のところに置く"
        label.textColor = UIColor.white // 見やすいように色を変えます
        label.backgroundColor = UIColor.blue // 見やすいように色を変えます
        view.addSubview(label)
        
        // SnapKit
      // autolayoutの対象.snp.makeConstraints
        label.snp.makeConstraints{ (make) in // このスコープ内にautolayoutを記述する
            make.left.equalTo(view.snp.left).offset(40) //make.項目.どのように(何処と)
            make.top.equalTo(view.snp.top).offset(40)
        }
    }

 

注目していただきたいのは、

make.left.equalTo(view.snp.left).offset(40)

make.right.equalTo(view.snp.right).offset(40)

の2行です。

make.left(左を).equalTo(等しく)(viewの左と).offset(40離して)

make.right(左を).equalTo(等しく)(viewの右と).offset(40離して)

みたいな感じです。

offset(数)によって微調整をすることができます。

これを連結していくとこのようにレイアウトを組むことができます。

コードはこちらのです。

 

override func viewDidLoad() {
        super.viewDidLoad()
        
        let label = UILabel()
        label.text = "左から40、上から40のところに置く"
        label.textColor = UIColor.white // 見やすいように色を変えます
        label.backgroundColor = UIColor.blue // 見やすいように色を変えます
        view.addSubview(label)
        
        // SnapKit
      // autolayoutの対象.snp.makeConstraints
        label.snp.makeConstraints{ (make) in // このスコープ内にautolayoutを記述する
            make.left.equalTo(view.snp.left).offset(40) //make.項目.どのように(何処と)
            make.top.equalTo(view.snp.top).offset(40)
        }
        
        let label2 = UILabel()
        label2.text = "右から40、上から40のところに置く"
        label2.textColor = UIColor.white // 見やすいように色を変えます
        label2.backgroundColor = UIColor.blue // 見やすいように色を変えます
        view.addSubview(label2)
        label2.snp.makeConstraints{ (make) in
            make.right.equalTo(view.snp.right).offset(-40)
            make.top.equalTo(label.snp.bottom).offset(40)
        }
    }

新しく追加したlabel2は右から40、上から40のところに起きました。

先ほどと違うのが、

・上を指定するときにviewからではなく、一つ上のlabelから距離を図っていること。

・右を指定するときのoffsetがマイナスで指定されていることです。マイナスの理由は、原点が左上にあるためです。

 

下から40、左右の中心

こんな感じのレイアウトのコードはこちらです。

見た目の変化は色だけですが、LabelではなくButtonを使用しています。

使用方法はLabelとButtonは全く同じです。

 

override func viewDidLoad() {
        super.viewDidLoad()
        
        let label = UILabel()
        label.text = "左から40、上から40のところに置く"
        label.textColor = UIColor.white // 見やすいように色を変えます
        label.backgroundColor = UIColor.blue // 見やすいように色を変えます
        view.addSubview(label)
        
        // SnapKit
      // autolayoutの対象.snp.makeConstraints
        label.snp.makeConstraints{ (make) in // このスコープ内にautolayoutを記述する
            make.left.equalTo(view.snp.left).offset(40) //make.項目.どのように(何処と)
            make.top.equalTo(view.snp.top).offset(40)
        }
        
        let label2 = UILabel()
        label2.text = "右から40、上から40のところに置く"
        label2.textColor = UIColor.white // 見やすいように色を変えます
        label2.backgroundColor = UIColor.blue // 見やすいように色を変えます
        view.addSubview(label2)
        label2.snp.makeConstraints{ (make) in
            make.right.equalTo(view.snp.right).offset(-40)
            make.top.equalTo(label.snp.bottom).offset(40)
        }
        
        let button = UIButton()
        button.setTitle("下から40,左右の中心", for: .normal)
        button.backgroundColor = UIColor.orange
        button.setTitleColor(UIColor.white, for: .normal)
        view.addSubview(button)
        button.snp.makeConstraints{ (make) in
            make.centerX.equalTo(view.snp.centerX)
            make.bottom.equalTo(view.snp.bottom).offset(-40)
        }
    }

 

centerX

新しいところはcenterXですね。

これはX軸のcenter(中心)を定めるときに使用します。

今回はbuttonのcenterXをviewのcenterXと同じ座標に設定しました。

 

比率

ある程度複雑なレイアウトを設定する場合、比率の計算をする必要があります。

特に、割り切ることができない「3分割」などは設定が難しいため、比率での計算が必須です。

このようなレイアウトのコードはこちらです。

override func viewDidLoad() {
        super.viewDidLoad()

        let label3 = UILabel()
        label3.text = "左"
        label3.backgroundColor = UIColor.red
        label3.textColor = UIColor.white
        view.addSubview(label3)
        label3.snp.makeConstraints{ (make) in
            make.centerY.equalTo(view.snp.centerY)
            make.width.equalTo(view.snp.width).dividedBy(3)
            make.left.equalTo(view.snp.left)
        }
        
        let label4 = UILabel()
        label4.text = "中心"
        label4.backgroundColor = UIColor.blue
        label4.textColor = UIColor.white
        view.addSubview(label4)
        label4.snp.makeConstraints{ (make) in
            make.centerY.equalTo(view.snp.centerY)
            make.width.equalTo(view.snp.width).dividedBy(3)
            make.left.equalTo(label3.snp.right)
        }
        
        let label5 = UILabel()
        label5.text = "右"
        label5.backgroundColor = UIColor.green
        label5.textColor = UIColor.white
        view.addSubview(label5)
        label5.snp.makeConstraints{ (make) in
            make.centerY.equalTo(view.snp.centerY)
            make.width.equalTo(view.snp.width).dividedBy(3)
            make.left.equalTo(label4.snp.right)
        }
    }

 

dividedBy()

新しい部分はdividedBy()だけですね。

これによって比率の計算をすることができます。

make.width.equalTo(view.snp.width).dividedBy(3) は

widht(横幅)をviewのwidthを3分割するした値に設定という意味になります。

 

最後に

まだまだ複雑なレイアウトを組めるとても便利なライブラリなので、

是非お試しください!!


ABOUT ME
ささお
3年目iOSエンジニア。 スタートアップで働いておりやす。 プログラミングスクールとエンジニアのキャリアを考えたい。 作ったアプリ - https://apps.apple.com/us/app/loverprofile/id1463563845?l=ja&ls=1