본문 바로가기

iOS/Toy project

[iOS : Toy Project] Apple Music App (8) : 다크모드

이전 포스팅

- AppleMusicApp(1) : 뷰 구성

- AppleMusicApp(2) : Track 모델 (데이터 구조)

- AppleMusicApp(3) : UiCollectionViewCell 업데이트

- AppleMusicApp(4) : HeaderView (CollectionReusableView)

- AppleMusicApp(5) : Player 화면 + 싱글톤

- AppleMusicApp(6) : 뷰사이 데이터 이동 

- AppleMusicApp(7) : Music Slider 기능

 

자세한 코드는 여기로!

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

 

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

iOS 토이프로젝트 모음집📱. Contribute to yexjin/iOS_Study development by creating an account on GitHub.

github.com

 

 


9/26

- 이번에 구현할 것은 다크모드! 🌚

 

그전에,, home화면으로 나갔을 때 노래 재생을 멈춰보는 기능을 잠시 추가해보자!

 override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    // TODO: 뷰나갈때 처리 > 심플플레이어
    simplePlayer.pause()
    simplePlayer.replaceCurrentItem(with: nil)
}

 

 

이제 진짜 다크모드 구현!

 

+ 다크모드 단축키 : Command + Shift + A

 

지금 요로케 다크모드에서 파란색으로 슬라이더바와 재생 버튼이 나타나있는 것을 확인할 수 있는데,

다크모드로 설정하면 흰색으로, 

화이트모드로 설정하면 검은색으로 tintColor가 바뀌도록 해보자!

 

요롷게 따로 style 폴더를 만들어두고!

 

이 DefaultStyle.swift 파일에서 다크, 화이트 모드에 따른 tintColor를 반환해주게 된다.

// DefaultStyle.swift

import UIKit

public enum DefaultStyle {
    public enum Colors {
        // UIColor 반환
        public static let tint: UIColor = {
            if #available(iOS 13.0, *) {
                return UIColor { traitCollection in
                    if traitCollection.userInterfaceStyle == .dark {
                        return .white   // dark 모드면 white를 tintColor로
                    } else {
                        return .black   // white 모드면 black을 tintColor로
                    }
                }
            } else {
                return .black   // iOS 이상이 아니라면 다크모드가 지원되지 않기에, black이 기본 tintColor로!
            }
        }()
    }
}

traitCollection을 통해 현재 다크모드인지 화이트모드인지 확인 가능

if #available(iOS 13.0, *)

- 여러 플랫폼에서 서로 다른 논리를 처리하기 위해 if 또는 guard 문과 함께 사용된다.

- 해당 버전을 포함하여 그 이상의 버전인지 확인하는 것!

- 다크모드는 iOS 13.0버전 이상부터 지원한다고 한다.

 if #available(iOS 11.0, *) {
          // do something.
 } else {
         // do something.
}

- 11.0 버전이상이면 if 문, 아니라면 else 문이 실행

 

 

이렇게 DefaultStyle.swift 파일 작성을 마쳤으면, 

다시 PlayerViewController.swift로 돌아와서

요롷게 잡아놨던 함수를 마무리 해보자.

// 다크모드 시, Tint 컬러 지정
func updateTintColor() {
    playControlButton.tintColor = DefaultStyle.Colors.tint
    timeSlider.tintColor = DefaultStyle.Colors.tint
}

고냥 가져와서 slider와 재생버튼에 tintColor를 적용시켜주면 됨!

화면에 보이기 전(viewWillAppear)에 호출해주면 진짜 끝!

 

🚀 구현완료

화이트 모드
다크모드

 

 

 

 

 

 

 


 

요 근래 계속 바빠서 이제야 마무리 한... ㅋㅋㅋㅋㅋㅋㅋㅋㅋ ㅠ 

이제 저번주 swift 과제 얼른 하고 금요일 스터디...는 또 기프 최종발표 때문에 빠진다고 스터디장님한테 말씀드려야겠다,,,

ㅠㅠㅠㅠㅠㅠ iOS공부 더 하고싶은데 할 시간이 나지 않아서 너무 슬프다!!! 앱 재밌는뎅!!!!!!!!

꼭 큐시즘에서 이번에 iOS 개발을 하게 되었으면🥺