Toy Project 81

8. Storage 이론

Storage 클래스는 뭐하는 놈들일까? 우리는 이전에 TodoManager에서 saveTodo()와 retrieveTodo()를 정의 하였다. 이 메소드들은 todos에 존재하는 객체들을 json파일이라는 형식으로 Read/Write할 수 있는 기능을 한다. 그리고 그 json 파일을 실제 내 디스크에 저장하도록 Read/Write하는 기능을 한다. 현재 데이터는 Todo형식으로 되어있고, 데이터는 TodoManager관리하고 있다. 그런데 이 데이터들은 CRUD와 같이 변화가 생겼을 때 상태들을 디스크에 저장하고 저장된 데이터를 불러와야 할 것이다. TodoManager에서는 add, delete, update를 하게 되면 saveTodo()를 호출하여 디스크와의 싱크를 하게 된다. saveTodo(..

7. TodoListCell 완성

이전에 TodoListCell이 어떤 구조로 되어있는지를 확인하였다. yeongwoo-cho.tistory.com/106 4. TodoListCell TodoListCell: collectionView에서 사용할 custom Cell 이다. TodoListCell을 살펴보자. Cell의 형태는 아래의 사진과 같다. 그리고 필요한 3가지 기능 존재한다. 1. 체크버튼을 누름에 따라 delete button이 등.. yeongwoo-cho.tistory.com 필요한 기능 3가지 UI update 기능 체크버튼을 누름에 따라 delete button이 등장하고, Label이 짝대기와 함께 흐려진다. delete버튼을 누름에 따라 삭제되는 기능 UI update 셀을 업데이트 할 때 중요한 것은 현재 체크가 ..

6. View Model

ViewModel 우리는 TodoListViewModel을 만들 것인데, 여기서 중요한 것은 View Model에서는 TodoManager를 활용 한다는 것이다. TodoViewModel에서는 Section이라는 것이 존재한다. 이는 Today Section과 Upcoming Section을 나누기 위함이다. case는 다음과 같이 두 경우가 존재하며, Section.today와 Section.upcoming로 title을 불러올 수 있다. 이러한 표현을 익혀두자. TodoViewModel의 경우 TodoManager을 적극 활용하기 때문에 singleton객체로 선언된 TodoManager의 shared를 들고와 변수로 선언하였다. 그런데 ViewController와 함수호출을 통해 정보를 주고받는 것..

5. Todo, TodoManager

Todo: 우리가 사용할 데이터의 형식이다. struct로 선언할 것이다. TodoManager: 데이터를 관리할 클래스이며 ViewModel에서 필요한 기능들을 Manager에서 구현하고 이를 호출할 것이다. Todo: 우리가 사용할 데이터의 형식이다. struct로 선언할 것이다. 이제 TodoListCell에 대해 쭉 봤는데 여기서 필요한 데이터인 Todo 객체가 존재한다. 알아보자. Control + cmd 를 눌러 클릭하면 정의된 부분으로 슉~ 갈 수 있다. Todo에서는 데이터들이 가지고 있어야할 데이터의 구조를 짜두었다. 여기서 method가 2개 존재하는데 Mutating —> struct에서 property의 값 변경을 일으키는 메소드 앞에 선언해주어야한다. 연산자 오버로딩 연산자 오버로..

4. TodoListCell

TodoListCell: collectionView에서 사용할 custom Cell 이다. TodoListCell을 살펴보자. Cell의 형태는 아래의 사진과 같다. 그리고 필요한 3가지 기능 존재한다. 1. 체크버튼을 누름에 따라 delete button이 등장하고, Label이 짝대기와 함께 흐려진다. 2. delete버튼을 누름에 따라 삭제되는 기능 3. UI update 기능 이것은 어떻게 표현된 것일까? 짝대기는 일단 넓이 높이가 250 1 인 View이다. 여기서 넓이가 0이면 보이지 않는 상태이고, 250이면 보여질 것이다. 그래서 check button 이 Done 상태가 아니라면 넓이가 0이고, Done이라면 250을 유지하도록 만들면 된다. 그렇기에 View의 Width constrai..

3. Tasks Page

Tasks Page 우리는 이거 만들려고 한다. 우선 CollectionView가 있으며 이는 두 개의 Section으로 구성된다. —> Today Section, Upcoming Section 여기서 Collection Reusable View (Header View) 와 Collection View Cell (custom cell) 에 identifier을 지정하고 이를 Class 로 지정해야한다. cell의 경우 재사용 되기때문에 identifier에 지정을 해줘야하고 이를 지정하지 않으면 못찾는다. 우선 collectionView와 ViewController의 dataSource와 delegate를 연결시켜고, Check Button, label, delete button을 생성하여 연결시키고 A..

2. Settings Page

Settings Page 저번 시간에는 Tab Bar Controller을 구성해봤다. 이번시간에는 Settings 에 해당하는 TableViewController을 구성해보자 지금은 Tasks 보다 Settings 가 쉽고 후딱 해치울 수 있으니 먼저 하자 우리는 위와 같은 구조로 Settings 를 구성할 것이다. 기존의 Content는 Dynamic 한 구조였다. 하지만 우리는 Settings 에 필요한 cell의 갯수는 정해져있고, 이를 static 하게 표현하는 것이 더 좋다고 판단한다. 그리고 현재 Style는 Plain이다. 우리가 만들 것은 inset grouped이다. inset은 margin이 있다는 뜻이다. Static Cells로 지정하게 되면 위와같이 기존의 방식과는 살짝 다르다고..

1. Tap Bar Controller (by Storyboard)

우선 하단 탭바를 어떻게 사용하는지 배워보자 ViewController을 클릭하고 Editor에 들어가면 embed in란에 Navigation controller과 Tab Bar Controller가 존재한다. Embed in 이라는 것은 해당 ViewController가 이 안에 들어간다는 의미이다. Navigation은 어떤것을 눌렀을때 그 안으로 더 들어가서 페이지가 더 있는 것을 만들때 사용하는 것이다. 여기서 중요한 것은 Tab Bar Controller는 각 Tab마다 ViewController을 따로 관리한다는 것이다. 여기서 Tap bar item은 아이콘 및 텍스트 수정이 가능하다. 이제 Settings를 넣어야 하는데 Object library에 들어가면 ViewController말고..

0. To Do List Application

TODO 리스트 앱 구현계획 Task page, settings page를 하단 탭바로 나누어 관리한다. Task page에서는 할일들을 데이터로 담아 어떻게 가져오는지를 살펴볼 것이다. Input text field를 통해 task 를 추가하는 방법을 배우자. 데이터를 추가할때 Today를 체크하고 넣으면 Today란에, 체크하지않으면 Upcoming란에 추가된다. 헤더와 collectionView 셋트가 2개이다. text창에 갖다대면 키보드창이 뜨고 외부화면을 선택하면 키보드창을 닫는다. 삭제는 앞의 동그라미에 체크하면 cell 뒷부분에 x표시가 뜨게되고 선택하면 데이터를 삭제할 수 있다. 젤 중요한 것은 데이터의 저장이다. IOS앱에서 데이터의 저장방법 많고 복잡한 데이터를 다루기에는 Core D..

13. 애플 뮤직 어플 마무리 (Dark Mode)

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

12. Slider 기능 구현

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

11. 받아온 데이터를 띄우자: 코드 구현

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