[IOS] SnapKit 사용해보기

오토레이아웃을 코딩으로 구현시 코드를 간결하게 작성하기 위해 SnapKit을 사용해 보겠습니다.

스냅킷은 DSL로 오토레이아웃을 쉽게 사용할 수 있는 기능을 제공합니다.

관련 링크는 하기와 같습니다.

https://github.com/SnapKit/SnapKit

SnapKit/SnapKit

 

변경 작업은 이전에 포스팅했던

https://xmobile.tistory.com/entry/IOS-오토레이아웃-제약조건-코딩으로-사용하기

를 활용 하도록 하겠습니다.

 

변경 전

private func addconstraints() {
        var constraints = [NSLayoutConstraint]()
        
        constraints.append(box1.heightAnchor.constraint(equalToConstant: 100))
        constraints.append(box2.heightAnchor.constraint(equalToConstant: 100))
        constraints.append(box3.heightAnchor.constraint(equalToConstant: 100))
        //box2와 box3 너비 같도록 설정 
        constraints.append(box2.widthAnchor.constraint(equalTo: box3.widthAnchor))
        constraints.append(box3.widthAnchor.constraint(equalTo: box2.widthAnchor))
        
        //box1 left : 뷰콘트롤러뷰의 왼쪽에서 20만큼 떨어진 곳에 box1 left가 위치함
        constraints.append(box1.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20))
        //box1 right : 뷰콘트롤러뷰의 오른쪽에서 20만큼 떨어진 곳에 box1 right가 위치함
        constraints.append(box1.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20))
        //box1 top :  뷰콘트롤러뷰의 위쪽에서 40만큼 떨어진 곳에 box1 top 위치함
        constraints.append(box1.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40))


        //box2 left : 뷰콘트롤러뷰의 왼쪽에서 20만큼 떨어진 곳에 box2 left가 위치함
        constraints.append(box2.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20))
        //box2 top : box1의 아래쪽에서 40만큼 떨어진 곳에 box2 top 위치함
        constraints.append(box2.topAnchor.constraint(equalTo: box1.bottomAnchor, constant: 40))


        //box3 left : box2 오른쪽에서 20만큼 떨어진 곳에 box3 left가 위치함
        constraints.append(box3.leadingAnchor.constraint(equalTo: box2.trailingAnchor, constant: 20))
        //box3 right : 뷰콘트롤러뷰의 오른쪽에서 -20만큼 떨어진 곳에 box3 right가 위치함
        constraints.append(box3.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20))
        //box3 top :  box1의 아래쪽에서 40만큼 떨어진 곳에 box3 top 위치함
        constraints.append(box3.topAnchor.constraint(equalTo: box1.bottomAnchor, constant: 40))


        //Activate(Applying)
        NSLayoutConstraint.activate(constraints)
    }

 

변경 후

private func addconstraints() {
        box1.snp.makeConstraints { (make) -> Void in
            make.height.equalTo(100)
            make.leading.equalToSuperview().offset(20)
            make.trailing.equalToSuperview().offset(-20)
            make.top.equalToSuperview().offset(40)
        }
        
        box2.snp.makeConstraints { (make) -> Void in
            make.height.equalTo(100)
            make.width.equalTo(box3.snp.width)
            make.leading.equalToSuperview().offset(20)
            make.top.equalTo(box1.snp.bottom).offset(40)
        }
        
        box3.snp.makeConstraints { (make) -> Void in
            make.height.equalTo(100)
            make.width.equalTo(box2.snp.width)
            make.leading.equalTo(box2.snp.trailing).offset(20)
            make.trailing.equalToSuperview().offset(-20)
            make.top.equalTo(box1.snp.bottom).offset(40)
        }
    }

위와 같이 소스코드가 간결해 지는것을 확인하였습니다. 

이상입니다.