[iOS] 키오스크 상단 카테고리 영역 만들기

2024년 4월 8일 월요일

 

지난 주 만들었던 키오스크 화면 상단 카테고리 영역에 대해 기록 겸 정리합니다.

---

 

내가 구현한 키오스크 사용자가 제품을 선택하는 과정은 크게 아래의 두 단계로 나눌 수 있다:

1) 최상단의 카테고리 선택과 2) 그에 따른 제품군 선택 (제품군을 클릭하면 아래에 제품 이미지와 가격 정보가 펼쳐진다.)

 

 

 

 

최상단은 Button + Label로, 그 밑의 제품군은 Label로 만들었는데 stack으로 만들거나 아예 처음부터 코드로 짜는 편이 낫다는 조언들도 주셔서(이어지는 뒤의 작업들을 고려할 때) 초기 진행부터 선택의 어려움이 있었지만, 한 개의 ViewController에서 나를 포함한 세 명이 함께 코드를 짜고 있었기에 코드의 conflict를 최소화하기 위해 storyboard를 활용하기로 결정했다.

 

카테고리 영역에서 Button과 Label을 함께 사용한 이유는 사용자가 최상단 Button 클릭 시 allign되어 변경되는 하단의 정보와 버튼 내 디자인 정렬 등을 맞추기에 Button에서 제공되는 속성으로는 한계가 있기 때문이다. 이미지와 텍스트, 그리고 컬러 반전 이 세 요소를 동시에 조건에 따라 변경할 수 있도록 하기 위해 Button과 Label의 inspector 내의 속성에 대해 충분히 경험해 보고 익숙해지는 시간이 필요하다는 것을 깨달았다. (특히 Button 내 style에서 custom과 plain 세팅에 따른 추후 코드 적용 결과에 차이가 있어 이 지점에서 여러 번 테스트가 필요했다.)

 

storyboard에서 아래와 같이 IBOutlet으로 각 버튼과 레이블의 이름을 지어 선언해 주고, (+ drag & drop 연결)

@IBOutlet weak var macButton: UIButton!
@IBOutlet weak var iPhoneButton: UIButton!
@IBOutlet weak var iPadButton: UIButton!
@IBOutlet weak var watchButton: UIButton!

@IBOutlet weak var allButton: UIButton!
@IBOutlet weak var macBookButton: UIButton!
@IBOutlet weak var iMacButton: UIButton!
@IBOutlet weak var macMiniButton: UIButton!

@IBOutlet weak var macLabel: UILabel!
@IBOutlet weak var iPhoneLabel: UILabel!
@IBOutlet weak var iPadLabel: UILabel!
@IBOutlet weak var watchLabel: UILabel!

 

 

맨 처음 카테고리 선택에 있어 사용자는 macButton, iPhoneButton, iPadButton, watchButton 중 하나를 클릭하여 원하는 카테고리를 선택하는데 이때 didTappedCategoryBtn 함수가 호출되며, 선택된 버튼에 따라 UI의 색상이 변경되고, 하단의 제품 버튼(allButton, macBookButton, iMacButton, macMiniButton)의 타이틀이 해당 카테고리에 맞게 업데이트 된다. 예를 들어, iPhone 버튼을 클릭하면 제품 버튼들이 iPhone 관련 제품으로 변경된다. 

@IBAction func didTappedCategoryBtn(_ sender: UIButton) {
    
    let buttonLabelPairs: [(UIButton, UILabel)] = [
        (macButton,macLabel),(iPhoneButton,iPhoneLabel),(iPadButton,iPadLabel),(watchButton,watchLabel)
    ]
    
    buttonLabelPairs.forEach {
        $0.0.backgroundColor = .white
        $0.0.tintColor = .black
        $0.1.textColor = .black
    }
    
    let selectedButtonLabelPair = buttonLabelPairs.filter { $0.0 == sender }
    
    selectedButtonLabelPair[0].0.backgroundColor = .black
    selectedButtonLabelPair[0].0.tintColor = .white
    selectedButtonLabelPair[0].1.textColor = .white
    
    if sender == macButton {
        selectedbtn = 1
        macMiniButton.isHidden = false
        allButton.setTitle("전체", for: .normal)
        macBookButton.setTitle("MacBook", for: .normal)
        iMacButton.setTitle("iMac", for: .normal)
        macMiniButton.setTitle("Mac Mini", for: .normal)
        didTappedProductBtn(allButton)
        
    } else if sender == iPhoneButton {
        selectedbtn = 2
        macMiniButton.isHidden = false
        allButton.setTitle("전체", for: .normal)
        macBookButton.setTitle("iPhone 15 Pro", for: .normal)
        iMacButton.setTitle("iPhone 15", for: .normal)
        macMiniButton.setTitle("iPhone SE", for: .normal)
        didTappedProductBtn(allButton)
        
    } else if sender == iPadButton {
        selectedbtn = 3
        macMiniButton.isHidden = false
        allButton.setTitle("전체", for: .normal)
        macBookButton.setTitle("iPad Air", for: .normal)
        iMacButton.setTitle("iPad", for: .normal)
        macMiniButton.setTitle("iPad Pro", for: .normal)
        didTappedProductBtn(allButton)
        
    } else if sender == watchButton{

        selectedbtn = 4
        allButton.setTitle("전체", for: .normal)
        macBookButton.setTitle("Series 9", for: .normal)
        iMacButton.setTitle("Ultra 2", for: .normal)
        macMiniButton.isHidden = true
        didTappedProductBtn(allButton)
    }
}

 

 

카테고리 선택 후 연관된 제품 선택을 위해 사용자는 업데이트된 제품 버튼 중 하나를 클릭하여 원하는 제품을 선택할 수 있다. 이때 didTappedProductBtn 함수가 호출되며, 선택된 버튼의 배경색과 텍스트 색상이 변경된다. 또한, 선택된 버튼에 따라 chooseButton 또는 chooseButton2 함수가 호출되어, 선택된 제품에 대한 추가적인 처리가 이루어질 수 있다.

@IBAction func didTappedProductBtn(_ sender: UIButton) {
    let productBtns: [UIButton] = [allButton, macBookButton, iMacButton, macMiniButton]
    
    for button in productBtns {
        button.backgroundColor = UIColor.white
        button.titleLabel?.textColor = .black
        button.setTitleColor(.black, for: .normal)
    }
    
    sender.backgroundColor = UIColor.black
    sender.setTitleColor(.white, for: .normal)
    sender.titleLabel?.textColor = .white
    
    let names = ["Mac", "iPhone", "iPad", "Watch"]
    
    switch sender {
        case allButton:
            chooseButton(variety: names[selectedbtn-1])
            break
        case macBookButton:
            chooseButton2(rank: 1, variety: names[selectedbtn-1])
            break
        case iMacButton:
            chooseButton2(rank: 2, variety: names[selectedbtn-1])
            break
        case macMiniButton:
            chooseButton2(rank: 3, variety: names[selectedbtn-1])
            break
        default:
            break
    }

    middleCollectionView.reloadData()
}
    
var itemArray: [appleItem] = []
var newitemArray: [appleItem] = []
var testitemArray: [appleItem] = []
var myDataManager = DataManager()
var midPageCount = 2

@IBOutlet weak var middleCollectionView: UICollectionView!
@IBOutlet weak var bottomTableView: UITableView!
@IBOutlet weak var cancelButton: UIButton!
@IBOutlet weak var payButton: UIButton!
@IBOutlet weak var totalPrice: UILabel!
@IBOutlet weak var bottomView: UIView!