오늘 시도해 본 것들!

어제에 이어 UICollectionView를 활용하는 화면 구성을 계속 시도해보았다.

CustomView를 활용하여 하나의 디자인된 Cell를 만들어 재사용하기 위해, 어제와 유사하게 코드를 구현하였다.

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var CoffeeListSelector: UISegmentedControl!
    @IBOutlet weak var CoffeListCollection: UICollectionView!
    
    let coffeeDataSet = [
        ["name": "아메리카노", "image": "coffee1.jpg", "price": "2500"],
        ["name": "카페라떼", "image": "coffee2.jpg", "price": "4000"],
        ["name": "에스프레소", "image": "coffee3.jpg", "price": "2000"]
    ]

    let teaDataSet = [
        ["name": "케모마일티", "image": "tea1.jpg", "price": "4000"],
        ["name": "아이스티", "image": "tea2.jpg", "price": "3500"],
        ["name": "레몬티", "image": "tea3.jpg", "price": "4000"],
        ["name": "그린티", "image": "tea4.jpg", "price": "3500"]
    ]

    let cakeDataSet = [
        ["name": "블루베리치즈케익", "image": "cake1.jpg", "price": "6000"],
        ["name": "바스크 치즈케익", "image": "cake2.jpg", "price": "5500"],
        ["name": "당근 케익", "image": "cake3.jpg", "price": "6500"]
    ]

    var currentDataSet: [[String : String]] = []
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        CoffeeListSelector.addTarget(self, action: #selector(segmentedControlValueChanged(_:)), for: .valueChanged)
        
        CoffeListCollection.isHidden = false
        
        currentDataSet = coffeeDataSet
    }
    
    
    @objc func segmentedControlValueChanged(_ sender: UISegmentedControl) {
        switch sender.selectedSegmentIndex {
        case 0:
            currentDataSet = coffeeDataSet
        case 1:
            currentDataSet = teaDataSet
        case 2:
            currentDataSet = cakeDataSet
        default:
            break
        }
        CoffeListCollection.reloadData()
    }
}



extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return currentDataSet.count
    }
    
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CoffeeListCollectionCell
        
        let item = currentDataSet[indexPath.item]
        
        if let imageName = item["image"], let image = UIImage(named: imageName) {
            cell.coffeeImage.image = image
        }
        
        if let name = item["name"] {
            cell.coffeeLabel.text = name
        }
        
        return cell
    }

}

// Custom Cell
import UIKit

class CoffeeListCollectionCell: UICollectionViewCell {
    @IBOutlet weak var coffeeImage: UIImageView!
    @IBOutlet weak var coffeeLabel: UILabel!
}

위 코드를 기반으로 StoryBoard의 UI요소와 ViewController와의 연결을 문제없이 구성하였다!

하지만... 왜인지 UICollectionView는 동작을 하였지만, Cell은 출력되지 않았다...

위 그림처럼 각각의 요소마다 BackGroundColor를 적용하여 결과를 확인해보니, Cell만 출력되지 않는 것을 확인할 수 있었다... 🥲

그래서 일단은 UICollectionView를 활용하는 방법은 잠시 포기하고 다른 방법을 찾아보기로 하였다.

참고 자료 : [iOS - swift] 13. 컬렉션 뷰(Collection View)

---

UIStackView로 대체해보기!

UICollectionView가 안되더라도 과제는 구현해야 하니, UIStackView를 활용하여 과제를 구성해보기로 하였다.

위 그림처럼 일단은 반쯤 성공하였는데, 나중에 각 Cell마다 이미지와 가격 정보를 추가하면 될 듯하다!

그래도 주문 가격을 저장해서 사용자에게 출력해주는 기능은 구현하였다!