[Swift-UIkit] 명상 컨텐츠 리스트 - UICollectionView을 활용한 명상 컨텐츠 목록 구현 방법 , 버튼 클릭시 타이틀 변경 , 셀에 곡선

명상 컨텐츠 리스트

구현해야 하는 기능

1. collectionview 를 통해서 스크롤이 가능하게 제작
2. 셀에 따라서 높이가 달라지게
3. 버튼 tap 시에 추천 리스트 변경

file

리스트 및 그리드를 만들기 위해서는 크게 3가지 작업이 필요하다.

1. Presentation : 데이터를 어떻게 표현 ?

• UI를 구성하는 부분으로, 화면에 표시되는 내용과 사용자의 상호작용을 관리
• UI 컴포넌트, 이벤츠 처리, 화면 전환 등을 담당한다.
• 사용자에게 보여지는 부분을 담당한다.

var datasource = UICollectionViewDiffableDataSource <Section, Item>!

datasource 에 대한 선언을 해준다. UICollectionViewDiffableDataSource 를 이용해 데이터 소스를 설정하기 위함. 기본적으로 section 과 item이 필요하다.

데이터 소스는 UICollectionView의 데이터를 업데이트 하는 데 필요한 기능을 제공한다.

datasoucre = UICollectionViewDiffableDataSource<Section,Item> 
(collectionView: collectionView, cellProvider: { 
collectionView, indexPath, item in
     guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "FocusCell", for: indexPath) 
            as? FocusCell else {
          return nil
     }
      cell.configure(item)
      return cell
})

UICollectionViewDiffableDataSource는 제네릭(Generic)으로 Section과 Item 타입을 받는다. Section과 Item은 UICollectionView의 section 과 item 의 타입이다.

코드 구성 요소	설명
UICollectionViewDiffableDataSource<Section,Item>	UICollectionViewDiffableDataSource 클래스의 인스턴스를 생성한다.. 제네릭으로 Section과 Item 타입을 사용
(collectionView: collectionView, cellProvider: { ... })	데이터 소스에 대한 설정을 제공하는 기능. collectionView는 해당 데이터 소스가 연결될 UICollectionView의 인스턴스, cellProvider는 셀을 제공하는 클로저
guard let cell = ...	셀을 가져오고, FocusCell로 캐스팅한다. 가져온 셀이 FocusCell이 아닌 경우, nil반환
cell.configure(item)	캐스팅된 FocusCell을 사용하여 아이템을 구성합니다.
return cell	구성된 셀을 반환합니다.

Focus Cell 의 구성

func configure(_ item : Focus )
    {
        titleLabel.text = item.title
        descriptionLabel.text = item.description
        thumbnailImageView.image = UIImage(systemName:item.imageName)?.withRenderingMode(.alwaysOriginal)
        // 항상 원래 색으로 하겠다.
    }

ContentView 안의 모든 요소는 Cell 안에 연결되어 있으며, Focus 라는 데이터 배열에서 데이터를 가져온다.

2. Data : snapshot

• 어플리케이션에서 사용되는 정보나 데이터를 관리한다.
• 데이터의 저장, 검색, 수정, 삭제를 담당한다.
• 주로 데이터베이스, 서버와의 통신, 파일 입출력 등과 관련된 작업을 처리한다.

func updateSnapshot ()
    {
        var snapshot = NSDiffableDataSourceSnapshot<Section, Item>() // section , item 추가한다.
        snapshot.appendSections([.main])
        snapshot.appendItems(items, toSection: .main) // items 을 main section 에 넣을거다
        datasoucre.apply(snapshot) // 정보업데이트 완료
    }

3. Layout

• UI 요소들의 위치, 크기, 배치등을 정의한다.
• 화면의 구성을 담당하며 , UI 요소들의 시각적인 표현을 결정한다.
• 주로 UI 컴포넌트의 위치와 크기를 조정하고, 그리드 시스템, 레이아웃 제약 조건 등을 활용하여 UI 구성

private func layout () -> UICollectionViewCompositionalLayout{

        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(50)) // esimated : 기본적으로 50인데 컨텐츠에 따라서 변경이 될 수 있다. 1로 써도 상관없음 동적 움직임
        // fractionalWidth : 가로 비율 : 부모요소 너비의 상대적인 비율이다.
        let item = NSCollectionLayoutItem(layoutSize: itemSize)

        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(50))
        let group = NSCollectionLayoutGroup.vertical(layoutSize: groupSize, subitems: [item])

        let section = NSCollectionLayoutSection(group: group)
        // section 사이의 공백
        section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20)
        section.interGroupSpacing = 10 // group 사이의 공백

        let layout = UICollectionViewCompositionalLayout(section: section)
        return layout
    }

4. 부가기능

1. 버튼 클릭시 label 변경
   1. var curated : Bool = fasle : 버튼의 상태를 초기에 false 로 설정해준다.
   2. 버튼 타이틀을 변경하는 함수를 작성한다.
   3. func updateButtonTitle() { // curated 에 따라서 다른 것 let title = curated ? "See All" : "See Recommendation" refreshButton.setTitle(title, for: .normal) }
   4. 버튼 클릭시 동작 함수를 생성한다.
   5. @IBAction func refreshButtonTapped(_ sender: Any) { // toggle 을 누르면 참-> 거짓 , 거짓 -> 참이 된다. curated.toggle() self.items = curated ? Focus.recommendations : Focus.list updateSnapshot() // 버튼에 따라서 데이터도 달라져야함 updateButtonTitle() }
2. background color 설정
3. override func awakeFromNib() { super.awakeFromNib() // cell 이 깨어났을때 //background 색상 설정 contentView.backgroundColor = UIColor.systemIndigo // content view 의 raduis 설정 contentView.layer.cornerRadius = 10 }
4. cell 이 실행될 때 를 나타내주는 함수 - Cell 에 연결된 파일에 작성한다.

전체코드 

https://github.com/gadisom/MyFirstiOS/tree/main/06_02-HeadSpaceFocus

GitHub - gadisom/MyFirstiOS