[iOS] Snapkit을 이용한 UI 구성

Snapkit을 이용해서 TableView 구현하기!! 아래와 같은 이미지처럼 TableView를 Snapkit으로 구현해야했었다! (Tabman 라이브러리를 쓰는바람에,,,ㅎㅎ)

1. ListTableViewCell

우선 Cell에 내가 사용해야할 위젯들을 변수로 정의해둔다!

: 위 화면에 맞게 하나의 이미지와 총 6개의 라벨이 필요했다.

static let id = "ListTableViewCell"
    
    lazy var img : Character_UIView = { // 캐릭터 생성
        let view = Character_UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()
    
    lazy var name: UILabel = { // 선언만했음. 메모리에는 아직 안올라가있음
        let label = UILabel()
        label.textAlignment = .center // 가운데 정렬로 변경
        return label
    }()
    
    lazy var location: UILabel = {
        let label = UILabel()
        return label
    }()
    
    lazy var label1: UILabel = {
        let label = UILabel()
        return label
    }()
    
    lazy var label2: UILabel = {
        let label = UILabel()
        return label
    }()
    
    lazy var time: UILabel = {
        let label = UILabel()
        return label
    }()
    
    lazy var content: UILabel = {
        let label = UILabel()
        return label
    }()

또한, 나는 그림자를 주고, 모서리도 둥글게 UI를 그려나가야 했기에 아래와 같이 추가해주었다!

override func layoutSubviews() {
        super.layoutSubviews()
        
        contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 10, left: 10, bottom: 0, right: 10))
        contentView.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.1).cgColor
        contentView.layer.shadowOpacity = 1
        contentView.layer.shadowRadius = 40
        contentView.layer.shadowOffset = CGSize(width: 0, height: 1)
        contentView.layer.masksToBounds = false
        contentView.layer.cornerRadius = 15
        
        contentView.layer.backgroundColor = UIColor(named: "HandsUpRealWhite")?.cgColor
    }

마지막으로, 코드로 cell을 만들면 init을 생성해주어야 한다! init을 해줘야 하는 이유는 인터페이스 빌더에서는 자동으로 초기화를 해주지만, 코드에서는 인터페이스 빌더를 사용하는게 아니기 때문에 초기화를 안해주면 화면에 안보이게 된다,,,! 

contentView에 위젯을 쌓아올리고, 위젯의 위치를 snapKit으로 잡아주었다!!

SnapKit으로 위치 조정을 할 때, 헷갈리던 부분이 있어서 블로그들을 참고하면서 잡아주었던것같다 ! 요 블로그를 가장 많이 참고했다!

https://eunjin3786.tistory.com/202

[SnapKit] 스냅킷 헷갈리는 것 정리 (inset vs offset / left vs leading / translatesAutoresizingMaskIntoConstraints)

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        contentView.addSubview(img)
        contentView.addSubview(name)
        contentView.addSubview(location)
        contentView.addSubview(time)
        contentView.addSubview(content)
        contentView.addSubview(label1)
        contentView.addSubview(label2)
        
        name.snp.makeConstraints { make in
            make.leading.equalTo(img.snp.trailing).offset(27)
            make.top.equalTo(30)
        }
        
        label1.snp.makeConstraints { make in
            make.leading.equalTo(name.snp.trailing).offset(5)
            make.top.equalTo(30)
        }
        
        location.snp.makeConstraints { make in
            make.leading.equalTo(label1.snp.trailing).offset(5)
            make.top.equalTo(30)
            make.trailing.lessThanOrEqualTo(time.snp.leading).offset(-10) // 시간과 겹치지 않도록
        }
        
        label2.snp.makeConstraints { make in
            make.leading.equalTo(location.snp.trailing).offset(5)
            make.top.equalTo(30)
        }
        
        time.snp.makeConstraints { make in
            make.leading.equalTo(label2.snp.trailing).offset(5) // label2의 오른쪽에 간격을 두고 위치
            make.top.equalTo(30)
        }
        
        content.snp.makeConstraints { make in
            make.leading.equalTo(img.snp.trailing).offset(27)
            make.top.equalTo(60)
            make.trailing.equalTo(-15)
        }
        
        img.snp.makeConstraints { make in
            make.leading.top.equalTo(15)
            make.size.width.height.equalTo(75)
        }
        
        location.numberOfLines = 1
        location.snp.makeConstraints { make in
            make.width.lessThanOrEqualTo(100) // 최대 너비 제한
        }
    }
}

 

2. TableViewVC

: TableView에 Cell을 등록해주고, delegate와 datasource 대리자를 위임해준다! 

self.view.addConstraint(NSLayoutConstraint(item: self.myTableView,
                                                   attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top,
                                                   multiplier: 1.0, constant: 0))
        self.view.addConstraint(NSLayoutConstraint(item: self.myTableView,
                                                   attribute: .bottom, relatedBy: .equal, toItem: self.view,
                                                   attribute: .bottom, multiplier: 1.0, constant: 0))
        self.view.addConstraint(NSLayoutConstraint(item: self.myTableView,
                                                   attribute: .leading, relatedBy: .equal, toItem: self.view,
                                                   attribute: .leading, multiplier: 1.0, constant: 0))
        self.view.addConstraint(NSLayoutConstraint(item: self.myTableView,
                                                   attribute: .trailing, relatedBy: .equal, toItem: self.view,
                                                   attribute: .trailing, multiplier: 1.0, constant: 0))

그리고 위와 같은 코드를 통해 constraint을 조정해준다! 

override func viewDidLoad() {
        super.viewDidLoad()
        
        // Do any additional setup after loading the view.
        self.myTableView.dataSource = self
        self.myTableView.delegate = self
        
        self.view.addSubview(self.myTableView)
        
        self.myTableView.register(ListTableViewCell.self,
                                  forCellReuseIdentifier: "ListTableViewCell")
        
        myTableView.separatorStyle = .none
        
        myTableView.backgroundColor = UIColor(red: 0.975, green: 0.975, blue: 0.975, alpha: 1)
        
        self.myTableView.translatesAutoresizingMaskIntoConstraints = false
        
        self.view.addConstraint(NSLayoutConstraint(item: self.myTableView,
                                                   attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top,
                                                   multiplier: 1.0, constant: 0))
        self.view.addConstraint(NSLayoutConstraint(item: self.myTableView,
                                                   attribute: .bottom, relatedBy: .equal, toItem: self.view,
                                                   attribute: .bottom, multiplier: 1.0, constant: 0))
        self.view.addConstraint(NSLayoutConstraint(item: self.myTableView,
                                                   attribute: .leading, relatedBy: .equal, toItem: self.view,
                                                   attribute: .leading, multiplier: 1.0, constant: 0))
        self.view.addConstraint(NSLayoutConstraint(item: self.myTableView,
                                                   attribute: .trailing, relatedBy: .equal, toItem: self.view,
                                                   attribute: .trailing, multiplier: 1.0, constant: 0))
        myTableView.contentInset.bottom = 120
    }

또한, 높이 지정을 하기 위해, 아래와 같이 추가해주었다!

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 120
    }

cf) UIkit으로 tableView의 높이 지정 하고싶다면?

https://minzombie.github.io/ios/selfSizing/

[iOS] TableView 셀프 사이징 사용법

아래와 같이 지정한 Cell에 맞게 값을 입력해주고! 

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: ListTableViewCell.id, for: indexPath) as? ListTableViewCell else {
            return UITableViewCell()
        }
        
        let filteredList = HomeList.filter {($0.tag == "전체" || $0.tag == "Talk" || $0.tag == "밥" || $0.tag == "스터디" || $0.tag == "취미" || $0.tag == "여행") }
        let item = filteredList[indexPath.row]
        
        cell.name.text = item.nickname
        cell.name.font = UIFont(name: "Roboto-Regular", size: 14)
        cell.name.textColor = UIColor(red: 0.454, green: 0.454, blue: 0.454, alpha: 1)
        
        // ... 등등 본인이 지정한 cell에 맞게 구현
        
        return cell
    }

개수만큼 return해주면 끝! 

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        let filteredList = HomeList.filter {($0.tag == "전체" || $0.tag == "Talk" || $0.tag == "밥" || $0.tag == "스터디" || $0.tag == "취미" || $0.tag == "여행") } // 태그에 맞는 요소만 필터링하여 새로운 배열 생성
        return filteredList.count
    }

아 추가로! 아래처럼 프로토콜을 꼭 채택해주어야한다! 

class ListFirstTabVC: ListVC, UITableViewDelegate, UITableViewDataSource {
}

 

 

[참고]

https://shark-sea.kr/entry/iOS-TableView-Code%EB%A1%9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

iOS :: TableView Code로 구현하기

https://minnit-develop.tistory.com/21

[Swift] UIButton 코드로 직접 구현하기 (Create UIButton programmatically in Swift )

https://baechukim.tistory.com/24

[iOS] 오토레이아웃(Auto Layout)의 모든 것 - 5 / 스냅킷(SnapKit), then 예제

https://junsangkwon.tistory.com/17

[iOS] SnapKit 사용해보기