08월 01일: 수업 내용 요약

6강 UIKit 프레임워크 2

[수업 목표]

• UIScrollView
• UIKickerView
• UITableView
• UICollectionView

<UIPickerView>

여러 선택지에서 값을 선택할 수 있는 컴포넌트 

여러 개의 열(column)과 행(row)로 구성

    //UIPickerViewDataSource, UIPickerViewDelegate 를 상속받아줘야 사용 가능
    pickerView.dataSource = self
    pickerView.delegate = self
        
    view.addSubview(pickerView)
        
    
    //UIPickerViewDataSource, UIPickerViewDelegate 를 상속받으면 당연히 사용해야 하는 함수
    //프로토콜은 필수항목 이란 느낌이기 때문에, 반드시 구현해줘야 하는 것들이 있다!
    
    //pickView의 열의 갯수를 정해주는 함수
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return data.count
    }
    
    //1열에서 몇 개의 행을 보여줄지 정해주는 함수
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    //각 행에서 보여줄 타이틀
    //이 함수를 구현하지 않으면 ? 라고만 출력된다
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return data[row]
    }
    
    //각 행을 선택했을 때 어떤 액션을 할지 정해주는 함수
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        let selectedValue = data[row]
        print("픽커뷰 \(selectedValue)")
    }

 

<UITableView>

리스트 형태의 데이터를 표시해주는 컴포넌트

UIScrollView의 서브 클래스로 다양한 데이터를 효과적으로 표시

 

UITabelDataSource, UITableDelegate

 

여러 개의 섹션을 가질 수 있고 각 세션은 여러 개의 행을 가질 수 있음 

뷰의 재활용을 통해서 메모리의 사용량 관리가 용이 

    //tableView
    tabelView = UITableView(frame: view.bounds, style: .plain)
    tabelView.delegate = self
    tabelView.dataSource = self
        
    view.addSubview(tabelView)
    
    //각 행을 선택했을 때 어떤 액션을 할지 정해주는 함수
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        let selectedValue = data[row]
        print("픽커뷰 \(selectedValue)")
    }
    
    
    //각각의 섹션에 대해 행이 몇 개 들어가는지 설정
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }
    
    //각각의 행에는 cell이라는 기본틀이 존재하고, 그 기본틀을 정의해주는 함수
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .default, reuseIdentifier: "Cell")
        cell.textLabel?.text = data[indexPath.row]
        return cell
    }
    
    //선택되었을 때 어떤 액션을 할지 정해주는 함수
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("테이블 뷰 \(data[indexPath.row])")
    }

 

<UICollectionView>

그리드 형태로 데이터를 표시

테이블뷰와 마찬가지로 셀을 재사용하여 메모리 관리를 할 수 있음

 

 보충 뷰 : header, footer 을 말함 섹션을 나눠 줌 관리는 레이아웃 객체가 함 

셀 : 화면에 보여줄 컨텐츠를 표시하는 뷰 

 

데코레이션뷰 : (뒤에 파란 배경뷰) 배경을 꾸밀 때 사용 

 

레이아웃 객체 : 켈력션 뷰의 아이템 배치 및 시각적 스타일을 정리 (한 행에 셀 몇 개 표시, 간격은 어떻게 등등)

 

데이터 소스

컨텐츠를 관리하고 해당 컨텐츠를 어떻게 표시할지 등을 정의함 

 

델리게이트 

사용자와의 상호작용에 대한 어떤 액션을 실행할지를 정하는 프로토콜 

내가 이미 만들어둔 프로토콜(함수)가 있으니까 너는 이 함수에 구현부만 추가하면 됨!!

 

delegate 의미가 위임하다 

 

 

CollectionVIew 에러 

 

Thread 1: "Unable to activate constraint with anchors <NSLayoutYAxisAnchor:0x600002a0ec00 \"UICollectionView:0x124821600.top\"> and <NSLayoutYAxisAnchor:0x600002a0e840 \"UIView:0x1245083c0.top\"> because they have no common ancestor. Does the constraint or its anchors reference items in different view hierarchies? That's illegal."

 

 

에러 원인

UICollectionView와 UIView 의  NSLayoutYAxisAnchor제약조건을 활성화할 수 없다 

왜냐면 공통 조상이 없기 때문입니다. 제약 조건 또는 해당 앵커가 다른 뷰 계층 구조의 항목을 참조합니까?

 

계층적으로 유아이뷰가 가장 아래에 그리고 그 위에 콜렉션뷰가 자리잡고 있는 형태로 해야함

그런데 콜렉션뷰를 유아이뷰에 addSubView해주지 않았기 때문에 두 뷰 사이에는 계층 구조가 이루어지지 않은 상태

이런 상태에서 레이아웃 앵커에 접근하려고 하니까 하니까, 너네 계층구조가 어떻게 되는거니? 지금 이상한데? 라는 에러가 발생! 

 

콜렉션뷰 뿐만 아니라, 다른 컴포넌트에서도 계층구조를 제대로 설정하지 않은 상태에서 레이아웃을 변경하려고 할 때 쉽게 발생할 수 있는 에러

 

에러 발생 부분

        //컬렉션뷰 생성
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
        
        //컬렉션뷰에 셀 등록
        collectionView.register(MyCollectionViewCell.self, forCellWithReuseIdentifier: "MyCell")

        
        // 컬렉션 뷰 레이아웃 설정
        let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout
        layout?.minimumInteritemSpacing = 50
        layout?.minimumLineSpacing = 80
        layout?.itemSize = CGSize(width: 100, height: 100)

        // 컬렉션 뷰 위치 및 크기 설정
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: view.topAnchor),
            collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
        view.addSubview(collectionView)

 

해결 방법 

        //컬렉션뷰 생성
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
        
        //컬렉션뷰에 셀 등록
        collectionView.register(MyCollectionViewCell.self, forCellWithReuseIdentifier: "MyCell")


    //콜렉션뷰를 뷰에 먼저 연결시켜서 접근할 수 있도록 해준다
    view.addSubview(collectionView)
        
        
        // 컬렉션 뷰 레이아웃 설정
        let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout
        layout?.minimumInteritemSpacing = 50
        layout?.minimumLineSpacing = 80
        layout?.itemSize = CGSize(width: 100, height: 100)

        // 컬렉션 뷰 위치 및 크기 설정
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: view.topAnchor),
            collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])