잡코더

애플 뮤직앱 마무리 다크모드와 기본모드에서의 색 차이는 알아서 변경되어 진다. 여기서 updateTintColor은 뭐하는 놈일까?? 우리는 player View를 살펴보면 재생버튼과 Slider의 색이 파란색으로 설정되어 있다. 다크모드에서는 흰색으로 설정하고 화이트모드에서는 검은색으로 설정하는 코드가 위에 주석으로 구현된 코드이다. 그런데 아직 구현되어 있지않아 오류가 난 것이다. 그렇다면 추가해주자 DefaultStyle 코드를 이해해보자!! 우리는 tint color을 다음과 같이 정의하였다. UIColor을 반환 시킬건데, 반환할 때 조건이 존재한다. 우리는 traitCollection을 통해 현재 dark모드인지 아닌지를 파악할 수 있다. 현재 interfaceStyle가 dark모드이면 ti..

Silder에 대한 기능 구현 우리가 구현할 것은 아래와 같다. 1. 현재재생시간 2. totalDuration time 3. 시간이 지남에 따라 slider 이동 4. seeking 우선 시간을 표현하는 기능부터 구현하자. timeObserver는 현재 재생되는 item의 시간을 일정하게 관찰하겠다를 의미한다. —> addPeriodicTimeObserver: 일정 간격으로 시간을 관찰하는 녀석을 더하겠다. 라는 메소드를 구현해주면 된다. (AVPlayer에 원래 내장 되어 있는 함수를 편하게 사용하기 위해 다음과 같이 구현하였다.) 우리는 위에서 필요한 파라미터를 전달해주면 된다. 1. CMTime 여기서 CMTime(Core Media Time)라는 것이 존재한다. 우리가 관찰하고 싶은 시간 주기는..

method를 구현해보자 updateTrackInfo() 우리는 Cell을 선택하면 PlayerViewController에 있는 simplePlayer의 Item을 선택한 indexPath.item으로 지정하였다. 그렇다면 PlayerViewController에서는 현재 아이템이 AVPlayerItem type이기에 이를 Track 으로 바꾸어 해당 UIComponents를 update하도록 구현하였다. togglePlayButton(), updatePlayButton() 우리는 재생하고 있는 음악이 있으면 정지 버튼은 누르게 되면 버튼은 재생버튼으로 update되어야하고, 음악은 멈춰야한다. 여기서 우리는 버튼은 system image를 사용하였고 configuration은 Point size 40으로..

받아온 데이터를 띄우자: 구조 설계 현재 PlayerViewController은 다음과 같다. 전체적인 큰 틀을 먼저 짜고 구현에 들어가도록 한다. 그리고 위에서 필요한 method를 아래와 같이 구조를 짰다. 설명 위에 UIComonents과 코드를 연결하여 위와같이 존재한다. 여기서 simplePlayer를 사용할 것이기에 static로 선언하여 모두에게 유효한 Singleton object를 불러온다. 시간이 얼마나 흘러간지 주기적으로 관찰할 변수와 seek여부를 판단할 변수를 선언하였다. 어플리케이션이 load 되면 updatePlayButton()으로 재생 / 멈춤 버튼의 업데이트한다. 그 후 updateTime()으로 currentTimeLabel와 totalDurationLabel의 text..

뷰 간의 데이터 이동 Home View에서 collectionView Cell을 클릭하게 되었을 때 PlayerView가 뜨도록 구현해보자 현재는 indexPath에 해당하는 item을 클릭하게 되면 몇 번째 아이템인지 출력만 해놓은 상태이다. 여기서 PlayerViewController을 가져와서 present를 시킬 것이다. 우리는 Segue없이 구현하였기에 Storyboard를 가져올 것이다. storyboard를 가져와서 해당 ViewController를 가져올 것이다. —> 여러 ViewController를 가질 수 있기에 identifier로 접근 Storybaord id는 다음과 같이 지정한다. 우리는 Player.Storyboard를 가져와서 연결되어 있는 PlayerViewControll..

Player View Player View에서 필요한 것: Thumbnail, Title, Artist, 재생 관련 정보 우선 Player에 Storyboard를 생성하고 ViewController을 Storyboard에 띄우자 그리고 PlayerViewController을 만들어서 View 와 code를 연결하자 Auto layout 이제 위의 형식에 맞게 View Conponents를 추가하자. 그리고 auto layout을 지정해보자. Auto layout은 이제 알아서 할때 됐지~ PlayerViewController 이제 PlayerViewController에서 View components를 연결해보자 우리는 현재 Home Storyboard와 Play Storyboard를 Segue로 연결하지..

HeaderView code Header View 를 구성하는 코드는 다음과 같은 구조를 가진다. viewSupplementaryElementOfKind 는 보충하는 뷰의 종류를 나타내는 것이며 이것은 Header, Footer를 구분하는 것이다. 구조는 간단하다. 우리는 지금 trackManager에서 todayMusic이라는 변수 안에 우리가 보여줄 item을 갖고 있다. 그리고 Header View의 구조를 완성하였다. 그렇다면 HomeViewController에서는 header view와 item을 가져와서 header view에서 그 item을 보여주도록 controller부분을 구현하면 되는 것이다. item 우선 기본적으로 header view에 표시할 today’s item 이 있어야한다...

HeaderView - View 구성 이제 HeaderView에 대해 배워보자 우리가 이전 시간까지 배운 headerview의 내용은 아래의 코드를 완성해야 한다는 것이다. 우선 HeaderView를 구성할 때 필요한 Storyboard에서 View를 구성하는 방법을 배우고 다음시간에 DataSource에서 headerView를 구현 등 코드에 대해 배울 것이다. Storyboard Storyboard에서 object library를 확인하면 Header 또는 Footer View를 표현할 수 있는 component가 존재한다 —> Collection Reusable View 위와 같이 추가하게 되면 아래와 같이 표현된다. Header view의 사이즈는 414 296으로 설정하자 우리는 지금 밑의 사진..

이제 home 화면을 채울 것이다. 구현 가능한 것들을 확인해보자 이제 Track폴더에서 구현할 내용을 끝났다. 한마디로 데이터의 구조는 완성 되었다는 것을 의미한다. 현재 Model과 ViewModel부분은 home에서는 완성한 것이다. 그렇다면 home에서의 View에 해당하는 View와 ViewController을 완성해야 한다. 현재 TrackCollectionViewCell 파일에 우리가 home View에서 사용할 Cell을 정의했었다. 그렇다면 HomeViewController에서 지정한 Cell을 알맞게 표현하는게 목적이다. [HomeViewController] 우리는 ViewController에서는 ViewModel의 메소드를 통해 데이터를 접근하기에 (그리고 우리는 이렇게 사용하기 위해..

우리는 이제 Track이라는 Struct를 만들고 Track형 데이터와 View와의 중계자 역할인 ViewModel을 만들어 볼 것이다. [ViewModel] 우리는 Track가 어떤 구조로 구성되어 있는지 알고 있다. 이제 TrackManager에서 Model을 정의하고, ViewModel의 메소드를 구현하겠다. 우선 initialize를 완성한다. 여기서 array에서 사용할 수 있는 메소드 randomElement()가 존재한다. loadTrack() 우리는 Resource 폴더에 존재하는 음악 파일들을 읽어와서 AVPlayerItem 객체로 다루며, 이를 array로 반환할 것이다. 파일 위치의 url을 이용할 것이다. Bundle은 이 앱 안에~ 를 의미한다. Bundle.main의 main은 ..

Home 화면 우선 셀 사이즈를 계산해서 넣어주면 다음과 같은 화면이 나온다. 이상하네? 우리는 마진을 생각해서 셀크기를 계산 하였다. 그런데 우리는 margin을 지정해주지 않았다!! 우리는 셀 사이즈를 생각해서 아이템간의 거리, margin을 계산해서 셀의 크기를 만들었지만 실제로는 margin이 적용되어 있지않다. 적용하러 가보자 collectionView에서 size inspector을 살펴보면 실제 margin을 줄 수 있는 부분이 존재하며 이는 section Insets이다. margin 넣으니깐 훨씬 보기좋다ㅎㅎ AVPlayer!! AVFoundation: 음악 재생관 관련된 아이템들이 존재하는 공구함 (프레임워크다) AVPlayer는 실제 재생시키는 객체 AVPlayerItem은 실제 재생..

목차 1. collectionView, custom Cell 2. project 분석 1. collectionView, custom Cell 앞으로 다음과 같은 파일 경로로 지정하여 프로젝트를 진행할 것이다. 이는 파일들을 이쁘게 지정하여 기술부채의 최소화와 유지보수 및 관리, 재활용에 이득이 되며 코드 가용성을 높히게 될 것이다. 시작! 이전에 배웠던 개념들을 이용해서 간단한 기초작업을 한다. collectionView의 auto layout을 화면 가득하게 지정해준다. 그리고 cell의 크기를 지정하는데 180,240으로 맞추고 우리가 크기를 지정할 것 이기에 Estimate Size 를 None 로 지정한다. 각각의 auto layout의 세부적인 픽셀 같은 것은 개발자의 느낌에 맞기도록 하겠다. ..