[iOS : Toy Project] Apple Music App (1) : 뷰 구성

오랜만에 하는 iOS 개발..

요즘 다른 활동들이 너무 빡세기도 했고 iOS 스터디가 좀 정체되는 감이 있었어서 한동안 쉬었지만

다시 아자아자😇

 

이번주부터 2주간 진행될 과제는 Apple Music App 클론 프로젝트!

이번에도 이미 완성된 프로젝트의 코드를 따라가면서 천천히 구현해볼 예정이다

 

 

자세한 코드는 여기로!

https://github.com/yexjin/iOS_Study/tree/main/AppleMusicApp

GitHub - yexjin/iOS_Study: iOS 토이프로젝트 모음집📱

 

 

 

---

 

 

9/6

1. 폴더 구성 확인

2. Main UI - storyboard, UICollectionView, UICollectionViewCell, UIReusableView

→ UIReusableView로 HeaderView를 만드는 과정을 자세히 정리할 계획이다 (CollectionView는 이미 너무 많은 포스팅..)

 

 

 

1️⃣ 폴더 구성 확인

폴더 구조

 

 

 

 

 

 

 

 

 

 

 

 

 

Home : 앱 실행 시, 가장 첫 메인 홈화면

Player : Play 화면

Track : 곡에 대한 정보 (모델!)

Style : 다크모드 관련

Resources : 음악들

 

 

 

2️⃣ Storyboard로 Autolayout (일단 메인화면만!)

Main.storyboard

 

3️⃣ UIReusableView로 HeaderView 만들기

일단, UIReusableView를 스토리보드에 추가해주고

TrackCollectionHeaderView 이름으로 Cocoa Touch Class 를 만들어준다. 그리고 아래처럼 작성!

import UIKit

class TrackCollectionHeaderView: UICollectionReusableView {
    @IBOutlet weak var thumbnailImageView: UIImageView!
    @IBOutlet weak var discriptionLabel: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        thumbnailImageView.layer.cornerRadius = 4
    }
    
}

잠깐 awakeFromNib() ?
- cell이 생성된 후 초기화 해주는 작업
- ViewController의 ViewDidLoad 와 같은 역할

 

 

그리고 다시 스토리보드로 돌아가서

Collection Reusable View의 Custom Class 명

Collection Reusable View의 Identifier 설정

설정까지 끝내기!

 

 

 

HomeViewController.swift 에서 헤더뷰 표시하는 코드를 확인해보자

// 헤더뷰 표시
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    // kind: supplementary view 종류 (header or footer)
    switch kind {
    case UICollectionView.elementKindSectionHeader:
        guard let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "TrackCollectionHeaderView", for: indexPath)as? TrackCollectionHeaderView else {
            return UICollectionReusableView()
        }
        return header

    default:
        return UICollectionReusableView()
    }
}

Header나 Footer을 추가해주기 위해서는 viewForSupplementaryElementOfKind라는 메서드를 꼭 작성해줘야 한다!

여기서, (ofKind: )는 Header인지, Footer인지 확인해주는 것!

 

 

 

이제 헤더 적용이 끝나고!

 

4️⃣ 많이 해오던 CollectionViewCell 커스텀 + ViewController 연결 코드까지 작성한 뒤,

 

CollectionView를 ViewController와 연결 : dataSource, delegate 

 

그리고 ViewController로 돌아가서, 해당되는 Protocol 코드를 작성해주면 된다!  (많이 포스팅되어 있어서 빠르게 후다닥)

1. UICollectionViewDataSource 프로토콜은 최소한 collectionView(_:numberOfItemsInSection:)과 collectionView(_:cellForItemAt:) 메서드를 구현함으로써, 셀에 대한 Delegate 작성 

2. UICollectionViewDelegateFlowLayout를 채택하여 셀 레이아웃에 대한 Delegate 작성

 

 

 

🚀 실행화면

 

아직 Track 모델을 구현안해놔서 요로코롬 뜬다

 

 

 

그럼 다음은 Track 모델을 구현해보자!