iOS - CollectionView

앞에 dynamic TableViewCell 에 CollectionView 를 추가했다

 

 

메인 VC와  CollectionVC 를 만들었다  

네비게이션 스텍을 쌓지 않아 아래에서 위로 올라오는 방식으로 화면이 표시된다 

 

네비게이션 스택을 쌓아준다.

 

 

 

 

앞의 테이블뷰에서는 셀을 따로 구성했지만 이번엔 콜렉션뷰 내에서 바로 셀을 구성해 따로 등록 해줄 필요가 없다

 

 

extension MyCollectionVC : UICollectionViewDataSource {
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.systemImageNameArray.count
    }
    // 각 콜렉션뷰의 셀에 대한 설정
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        // 셀 아이디를 바꿈?
        let cellId = String(describing: MyCollectionViewCell.self)
        
        
        //메모리 재활용 하기 위해서
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! MyCollectionViewCell
        
        // 데이터에 따른 셀의 UI 변경
        // 이미지에 대한 설정
        cell.profileImg.image = UIImage(systemName: self.systemImageNameArray[indexPath.item])
        // 레이블에 대한 설정
        cell.profileLable.text = self.systemImageNameArray[indexPath.item]
        
        return cell
    }
    
    
}

 

배열의 이미지 데이터와 레이블 값을 가져오고 셀의 UI를 데이에 맞춰 바꿔줌

 

 

 

컬렉션 뷰 셀을 컴포지셔널 레이아웃으로 정리해보자 

좀더 복잡한 UI를 구성 할 수있다.

 

대충 이런느낌이다 item 부터 group, section 의 크기 간격 갯수를 정해준다

 

extension MyCollectionVC{
   // 컴포지셔널 레이아웃 설정
    fileprivate func createCompositionalLayout() -> UICollectionViewLayout {
        //콤포지셔널 레이아웃 설정 섹션-> 그룹 -> 아이템
        let layout = UICollectionViewCompositionalLayout {
            (sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) ->
            NSCollectionLayoutSection? in
            
            // 아이템에 대한 사이즈 - absolute 는 고정값 , estimate 는 추측, fraction 퍼센트
            let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1/3), heightDimension: .absolute(100))
            //위에서 만든 아이템 사이즈로 아이템 만들기
            let item = NSCollectionLayoutItem(layoutSize:  itemSize)
            // 아이템 간격 설정
            item.contentInsets = NSDirectionalEdgeInsets (top: 2, leading: 2, bottom: 2, trailing: 2)
            // 그룹사이즈
            let grouSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: itemSize.heightDimension)
            //그룹사이즈로 그룹 만들기
            let group = NSCollectionLayoutGroup.horizontal(layoutSize: grouSize, subitem: item , count: 1)
            // 그룹으로 섹션 만들기
            let section = NSCollectionLayoutSection(group: group)
            //section.orthogonalScrollingBehavior = .continuous
            //섹션에 대한 간격
            section.contentInsets = NSDirectionalEdgeInsets(top: 20, leading: 20, bottom: 20, trailing: 20)
            
            return section
            
        }
        return layout
    }
    
}