[swift] 스택 뷰에서의 테이블 뷰 추가하기

01 Dec 2023

swift

스택 뷰(Stack View)는 iOS 애플리케이션에서 사용자 인터페이스를 구성하는데 유용한 컨테이너 뷰입니다. 스택 뷰를 사용하면 다양한 뷰를 쉽게 정렬하고 관리할 수 있습니다. 스택 뷰에 테이블 뷰를 추가하는 방법을 알아보겠습니다.

1. 스택 뷰 생성하기

먼저, 스토리보드 또는 코드를 통해 스택 뷰를 생성해야 합니다. 스토리보드에서 스택 뷰를 추가하려면 UIStackView를 선택하고 인터페이스 빌더의 화면에 드래그하여 추가할 수 있습니다. 코드로 스택 뷰를 생성하려면 다음과 같이 작성할 수 있습니다.

let stackView = UIStackView()
stackView.axis = .vertical
stackView.spacing = 10
stackView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stackView)

// 스택 뷰의 제약 조건 설정
NSLayoutConstraint.activate([
    stackView.topAnchor.constraint(equalTo: view.topAnchor, constant: 20),
    stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
    stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
    stackView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20)
])

위의 코드에서 스택 뷰의 axis 속성은 수직으로 정렬되도록 설정되어 있습니다. spacing 속성은 뷰들 사이의 간격을 조정하는 역할을 합니다. translatesAutoresizingMaskIntoConstraints 속성은 스택 뷰의 자동 제약 조건 설정을 비활성화하는 역할을 합니다.

2. 테이블 뷰 추가하기

스택 뷰에 테이블 뷰를 추가하려면 다음과 같이 작성할 수 있습니다.

let tableView = UITableView()
stackView.addArrangedSubview(tableView)

addArrangedSubview 메서드를 사용하여 스택 뷰의 정렬된 뷰 목록에 테이블 뷰를 추가합니다.

3. 테이블 뷰 설정하기

이제 테이블 뷰를 설정해보겠습니다. 테이블 뷰의 셀을 표시하기 위해 UITableViewDataSource 프로토콜을 구현해야 합니다. 또한, 테이블 뷰에 셀을 등록하고 데이터를 제공하는 방법을 설정해야 합니다. 예를 들어, 다음과 같이 할 수 있습니다.

class ViewController: UIViewController, UITableViewDataSource {

    // ...

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        cell.textLabel?.text = data[indexPath.row]
        return cell
    }
}

위의 코드에서 data는 테이블 뷰에 표시할 데이터의 배열입니다. cellForRowAt 메서드를 사용하여 셀의 텍스트를 설정하고 반환합니다. dequeueReusableCell(withIdentifier:for:) 메서드를 사용하여 재사용 가능한 셀을 가져옵니다.

4. 결과 확인하기

마지막으로, 애플리케이션을 실행하여 생성한 스택 뷰에 테이블 뷰가 올바르게 표시되는지 확인할 수 있습니다. 스택 뷰의 크기와 테이블 뷰의 크기는 제약 조건을 통해 조정됩니다.

위에서 작성한 코드를 실행해보고 스택 뷰에 테이블 뷰가 추가되는지 확인해보세요.

1. 스택 뷰 생성하기

2. 테이블 뷰 추가하기

3. 테이블 뷰 설정하기

4. 결과 확인하기

참고 자료