[ Swift ] Table View Cell 에 stack View 를 추가해보자.

결과물

일단 UIView의 Anchor를 설정하는 함수(setAnchor)를 사용하기 위해 extension을 작성해줍니다.

extension UIView {
    func setAnchor(top: NSLayoutYAxisAnchor?, left: NSLayoutXAxisAnchor?, bottom: NSLayoutYAxisAnchor?, right: NSLayoutXAxisAnchor?,
                   paddingTop: CGFloat, paddingLeft: CGFloat, paddingBottom: CGFloat, paddingRight: CGFloat) {
        self.translatesAutoresizingMaskIntoConstraints = false
        
        if let top = top {
            self.topAnchor.constraint(equalTo: top, constant:  paddingTop).isActive = true
        }
        if let left = left {
            self.leftAnchor.constraint(equalTo: left, constant:  paddingLeft).isActive = true
        }
        if let bottom = bottom {
            self.bottomAnchor.constraint(equalTo: bottom, constant: -paddingBottom).isActive = true
        }
        if let right = right {
            self.rightAnchor.constraint(equalTo: right, constant:  -paddingRight).isActive = true
        }
    }
}

그 다음 이제 우리는 cell을 만들어 줄거에요 !

class BandCell: UITableViewCell {

    let cellView: UIView = {
        let view = UIView()
        view.backgroundColor = UIColor.red
        return view
    }()
    
    let stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = .horizontal
        stackView.spacing = 10
        stackView.distribution = .fillEqually
        return stackView
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?){
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setup()
        setStackView()
    }
    func setStackView() {
        addSubview(stackView)

        stackView.leftAnchor.constraint(equalTo: leftAnchor, constant: 20).isActive = true
        stackView.topAnchor.constraint(equalTo: topAnchor, constant: 10).isActive = true
        stackView.rightAnchor.constraint(equalTo: rightAnchor, constant: -20).isActive = true
        stackView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -10).isActive = true
        let redView = UIView()
        redView.backgroundColor = .blue
        let yellowView = UIView()
        yellowView.backgroundColor = .yellow
        let blackView = UIView()
        blackView.backgroundColor = .black
        stackView.addArrangedSubview(redView)
        stackView.addArrangedSubview(yellowView)
        stackView.addArrangedSubview(blackView)
    }
    func setup() {
        addSubview(cellView)
        cellView.setAnchor(top: topAnchor, left: leftAnchor, bottom: bottomAnchor, right: rightAnchor, paddingTop: 4, paddingLeft: 8, paddingBottom: 4, paddingRight: 8)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz
zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz
zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz
zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz	zzzzzzzzzz

빨간색 zzzzzzzzzz뷰 안에 스텍뷰가 들어갔어요 .

 

아 그리고 addSubView함수 대신에 addArrangedSubView를 써줘야 되는데 

이유는 저도 모르겠습니다.

체크해두고 다음에 알아보도록 하겠습니다.

 

그 다음 tableView를 짭시다 !

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    let tableView: UITableView = {
        let tv = UITableView()
        tv.separatorStyle = .none
        tv.allowsSelection = false
        return tv
    }()
    
    let bandCellId = "bandCellId"
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTableView()
    }
    
    func setupTableView() {
        tableView.delegate = self
        tableView.dataSource = self
        
        tableView.register(BandCell.self, forCellReuseIdentifier: bandCellId)

        view.addSubview(tableView)
        
        tableView.setAnchor(top: view.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0)
        
    }
    //Section의 갯수
    func numberOfSections(in tableView: UITableView) -> Int {
        return 2
    }
    //table 한 섹션당 cell의 갯수
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    //table의 cell을 정해주는것(?)
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: bandCellId, for: indexPath) as! BandCell
        return cell
    }
    //Cell height
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return   100  }
    //Cell title 제목 설정
    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        if section == 1 {
            return "Top Songs"
        }
        return "Top Brands"
    }
}

 

 

요로코롬 나온답니다..

 

그럼 우린 이제 이걸 가지고 버튼도 넣고... 텍스트도 넣고 여러가지 많이 넣어 봅시다 !!