코드베이스 _ SnapKit 라이브러리

 

스탠다드반 강의
스파르타 코딩클럽

스탠다드반 강의 자료

 

SnapKit 라이브러리를 사용하면 codebase로 구현할 때 더 깔끔하고, 간결하게 코딩할 수 있다

translatesAutoresizingMaskIntoConstraints = false 도 따로 해줄 필요 없음 !

 

스냅킷 사용 전 import SnapKit 잊지 않기 !

//textLabel.translatesAutoresizingMaskIntoConstraints = false
//textLabel.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 30).isActive = true

// SnapKit 사용
textLabel.snp.makeConstraints { make in 
    make.top.equalTo(view.safeAreaLayoutGuide).offset(30)
}

SnapKit을 사용하니 더 짧고, 간결하게 코드를 작성할 수 있다

 

전에 codebase 공부했을 때 실습했던 부분을 이런 식으로 SnapKit을 사용하여 적어줄 수 있다 !

여기서 equalToSuperview()는 해당 뷰의 부모 뷰를 통해 제약 조건을 설정한다는 의미 

 

* make 생략

이 코드를 보면 make가 반복되는 것을 볼 수 있는데

textLabel.snp.makeConstraints {
    $0.top.equalTo(view.safeAreaLayoutGuide).offset(30)
    $0.leading.equalToSuperview().offset(20)
    $0.trailing.equalToSuperview().offset(-20)
    $0.height.equalTo(50)  
}

이렇게 또 줄여줄 수 있음 !

 

* 여러 앵커 한 번에 연결

textLabel2.snp.makeConstraints {
    //여러 앵커 한번에 연결
    $0.top.leading.equalToSuperview().offset(30) 
    $0.bottom.trailing.equalToSuperview().offset(-30) 
}

 

* top + bottom = verticalEdges (위, 아래 한꺼번에), leading + trailing = horizontalEdges (양 옆 한꺼번에)

textLabel2.snp.makeConstraints {
    //여러 앵커 한번에 연결
    $0.verticalEdges.equalToSuperview().offset(30) 
    $0.horizontalEdges.equalToSuperview().offset(30) 
}

그런데 여기서 offset(30)을 주면 bottom과 trailing의 경우 화면을 빠져나간 30을 주게 된다..

해결방법으로는 inset을 주면 됨. ( inset : bottom, trailing 등 마이너스 처리를 포함해서 안 쪽을 향하도록 한다 )

//offset
myTableView.snp.makeConstraints {
    $0.top.equalToSuperview().offset(10)
    $0.leading.equalToSuperview().offset(10)
    $0.trailing.equalToSuperview().offset(-10)
    $0.bottom.equalToSuperview().offset(-10)
}

//inset
myTableView.snp.makeConstraints {
    $0.top.equalToSuperview().inset(10)
    $0.leading.equalToSuperview().inset(10)
    $0.trailing.equalToSuperview().inset(10)
    $0.bottom.equalToSuperview().inset(10)
}

inset을 활용해서 축약하면 더 간단하게 축약할 수 있음

myTableView.snp.makeConstraints {
    $0.top.leading.trailing.bottom.equalToSuperview().inset(10)
}

여기에 edges(top, leading, trailing, bottom)을 사용해서 더 짧게 축약 가능!

myTableView.snp.makeConstraints {
    $0.edges.equalToSuperview().inset(10)
}

 

간단하게 실습 ,, ! ( 매우 매우 간단... ) 

 

 

이제 실제로 코드베이스를 사용해서 강의 과제인 동영상 앱 만들기를 해보자.. !