iOS개발 강의 #4

벌써 강의를 들은지 4주차가 되었다.
이번 주차에서는 애플 뮤직과 비슷한 어플을 하나 만들어본다고 하셨는데 진행하면서 유용할 것 같은 장면들과 코드들을 한번 모아보았다.

먼저 자기 자신에게 설정하는 가로 세로 1:1 비율 맞추기

위 Aspect Ratio를 선택하게 된다면 가로 세로 비율을 설정할 수 있게된다.

이렇게 배치를 마친 뒤에는

import UIKit

class TrackCollectionViewCell: UICollectionViewCell {
    @IBOutlet weak var trackThumbnail: UIImageView!
    @IBOutlet weak var trackTitle: UILabel!
    @IBOutlet weak var trackArtist: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        trackThumbnail.layer.cornerRadius = 4
        trackArtist.textColor = UIColor.systemGray2
    }
    
    func updateUI(item: Track?) {
        //곡정보 표시하기
        guard let track = item else { return }
        trackThumbnail.image = track.artwork
        trackTitle.text = track.title
        trackArtist.text = track.artist
    }
}

cell의 설정을 해준 뒤

import UIKit

class ViewController: UIViewController {
    //트랙 관리 객체 추가
    let trackManager: TrackManager = TrackManager()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

extension ViewController: UICollectionViewDataSource {
    // 몇개 표시 할지
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection secton: Int) -> Int {
        // TODO: 트랙매니저에서 트랙갯수 가져오기
        return trackManager.tracks.count
    }
    
    // 셀 표시 방법
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        //셀 구성하기
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TrackCollectionViewCell", for: indexPath) as? TrackCollectionViewCell else {
            return UICollectionViewCell()
        }
        
        let item = trackManager.track(at: indexPath.item)
        cell.updateUI(item: item)
        return cell
    }
    
    // 헤더뷰 표시 방법
    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        switch kind {
        case UICollectionView.elementKindSectionHeader:
            //헤더 구성하기
            return UICollectionReusableView()
        default:
            return UICollectionReusableView()
        }
    }
}

extension ViewController: UICollectionViewDelegate {
    // 클릭시 이벤트
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        //곡 클릭시 플레이어뷰 띄우기
    }
}

extension ViewController: UICollectionViewDelegateFlowLayout {
    // 셀 사이즈 설정
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        // 20 - card(width) - 20 - card(width) - 20
        //셀사이즈 구하기
        let itemSpacing: CGFloat = 20
        let margin: CGFloat = 20
        let width = (collectionView.bounds.width - itemSpacing - margin * 2)/2
        let height = width + 60
        return CGSize(width: width, height: height)
    }
}

전체적인 구성을 짜주면 얼추 모양이 나오게된다
아직은 시간을 내서 공부하지 못해 모두 완성시키지는 못했지만 꼭 마지막주 전까지는 완성을 목표로 해보겠다.

나름 배우면서 시간내기가 힘들지만 점차 익숙해지며 얻고가는것이 있다고 생각이 들어 뿌듯한 것 같다.