스택 뷰(Stack View)는 iOS 개발에서 인터페이스를 만들 때 유용한 도구입니다. 이번 포스트에서는 스택 뷰를 사용하여 상품 목록을 구성하고, 구매 기능을 구현하는 방법에 대해 알아보겠습니다.
스택 뷰로 상품 목록 구성하기
스택 뷰를 사용하여 상품 목록을 구성하면, 상품들을 일렬로 정렬하거나 그리드 형태로 배치할 수 있습니다. 먼저, 스택 뷰를 인터페이스에 추가하고, 그 안에 상품에 대한 정보를 표시하는 뷰들을 추가해야 합니다.
let stackView = UIStackView()
stackView.axis = .vertical // 세로로 정렬될 수 있도록 설정
stackView.alignment = .fill // 가로로 꽉 찰 수 있도록 설정
stackView.distribution = .fillEqually // 상품들이 동일한 크기로 배치될 수 있도록 설정
for product in productList {
let productView = ProductView()
productView.product = product
stackView.addArrangedSubview(productView)
}
위의 코드에서 ProductView는 상품에 대한 정보를 표시하는 커스텀 뷰입니다. 각 상품에 대한 정보를 설정한 후, addArrangedSubview 메서드를 사용하여 스택 뷰에 추가합니다. 이렇게 하면 스택 뷰 안에 상품뷰들이 추가되어 상품 목록이 구성됩니다.
구매 기능 구현하기
구매 기능을 구현하기 위해서는 각 상품에 대한 구매 버튼을 추가해야 합니다. 버튼을 누르면 해당 상품이 구매되는 기능을 구현할 수 있습니다.
class ProductView: UIView {
// ... 코드 생략 ...
private let buyButton = UIButton()
override init(frame: CGRect) {
super.init(frame: frame)
// ... 상품에 대한 정보를 표시하는 코드 생략 ...
buyButton.setTitle("구매", for: .normal)
buyButton.addTarget(self, action: #selector(buyButtonTapped), for: .touchUpInside)
addSubview(buyButton)
// ... buyButton의 위치와 크기를 설정하는 코드 생략 ...
}
@objc private func buyButtonTapped() {
// 구매 기능을 수행하는 코드 작성
}
// ... 코드 생략 ...
}
위의 코드에서 ProductView 클래스는 각 상품을 표시하는 커스텀 뷰입니다. buyButton은 구매 버튼으로, 버튼을 누르면 buyButtonTapped 메서드가 호출됩니다. 이 메서드에서 실제로 구매 기능을 구현하면 됩니다.
이제 상품 목록이 표시되는 스택 뷰와 구매 기능을 갖춘 상품 뷰를 사용하여, 원하는 형태의 상품 목록을 구성하고, 구매를 할 수 있습니다.
본 포스트에서는 스택 뷰를 사용하여 상품 목록을 구성하고, 각 상품에 대한 구매 기능을 구현하는 방법에 대해 알아보았습니다. 스택 뷰를 활용하면 인터페이스를 유연하게 구성할 수 있어서, 앱을 개발하는 데 도움이 될 것입니다.
참고 자료: