boostcamp3-ios / team-d2 Goto Github PK

메인 뷰 컨트롤러의 탭바와 컬렉션뷰를 연동한다.

• 현재 탭바 구조 파악
• 컬렉션 뷰를 연동시켜 좌우 뿐만 아니라 상하로 스크롤이 가능하게 한다.
• 컬렉션 뷰 헤더를 이용해 위쪽에는 심볼과 함께 보여줄 메인 이미지를 보여준다.

확인 필요

목적 : rotate로 조금 더 자연스러운 움직임으로 되는지 확인

설명
슬라이드 할 때마다 변경되는 각 도형 사이에 마름모가 존재합니다.
처음에는 마름모를 생각해서 좌표를 구했으나 실제로는 정사각형이고 rotate를 이용해서 마름모로 보이는 것 같아 확인해보기 위해 구현해 볼 예정입니다.

C, N, Hourglass, Ice 도형순으로 있을 때 Ice에서 C로 넘어가는 즉, 무한스크롤 여부를 확인해야 합니다.
어떤식으로 Ice에서 C로 넘어갈지 고민해봐야 합니다.
C to Ice 는 0 to 1 값으로 나눠져 있는데 어떤식으로 1 에서 0 값으로 자연스럽게 갈지 고민입니다.

설명

해당 문제점에 대해 상황, 문제점, 해결하려고 했던 방안, 참고현황, 제가 다시 예상하는 방안에 대해서 작성하였습니다. 길지만 이에 대해 읽어보시고 조언 혹은 기타의견이 있으시면 댓글을 달아주시면 감사하겠습니다.
해결방안에 대해 많이 고민해보았으나 아래와 같은 과정, 예상결과를 생각하게 되었고 이 방법이 적절한 방법인지도 모르겠고 다른 분들의 의견이 궁금해서 자세히 적게 되었습니다.
감사합니다.

상황

현재 각 도형들에 대해서 6개의 shapeLayer로 이루어져 있습니다.
변화되는 6개의 도형들 사이에 정사각형과 rotate 애니메이션을 거치면서 변화되는 모습을 볼 수 있습니다.

문제점

여기서 문제점은 다음과 같습니다.

1. 아래에 설명한 각 정사각형 구간에서 6개의 도형 path 값들이 변경 (다음웹툰의 UX - 14:10 ~ 14:50 구간 참고)
   예를 들면, 두개의 도형으로 만들어진 정사각형의 한 변이 한개로 된다거나 반대로 한개로 만들어진 정사각형의 변이 두개로 된다는 것을 말합니다.

   • N -> hourglass 로 넘어가는 정사각형
   • circle -> ice 로 넘어가는 정사각형

2. 도형변경이 될 때마다 90도씩 돌리는데 영상을 참고해 볼 때 circle 부분에서 각도 혹은 도형 path값이 변경
   (이 문제점은 해당 이슈 참고 : [심볼] 도형 rotate 에 따른 각도 계산 및 도형 좌표값 재계산 issue#28)

해결하려고 했던 방안

해당 부분을 읽기 전에 아래 참고현황을 먼저 읽으면 도움이 될 것으로 생각됩니다.

1. 애니메이션을 수동으로 pause, resume 하는 것은 layer만 조절가능하고 UIView에서는 안되는 것으로 확인됩니다.
2. CADisplayLink를 사용해서 layer의 timeOffset 값을 가져온 다음에 특정시점(즉, N -> hourglass, circle -> ice로 넘어가는 정사각형) 일 경우에 path 값을 변경하려 했으나 슬라이드 혹은 제스처를 빠르게 하는 경우 정확한 값을 체크하지 못하게 되는 것을 확인했습니다.
   예를 들어, N -> hourglass로 넘어가는 정사각형의 timeOffset 값이 0.5 일 때 빠르게 지나가면 0.493... ~ 0.512... 이런식으로 지나가기 때문에 천천히 지나가는 경우에만 확인할 수 있습니다.

참고현황

• 현재 제가 구현한 애니메이션은 layer에 CAKeyFrameAnimation을 사용하고 있습니다. 따라서, CAKeyFrameAnimation을 사용하는 경우 min 0, max 1의 timeOffset을 세팅할 수 있습니다.
• 도형이 변경될 때마다 90도씩 회전하는 것은 pieceLayer가 아닌 이들의 포함하는 상위 레이어인 SymbolView의 layer입니다. (계층 : SymbolView - layer - pieceLayer, 왼쪽부터 상위)

다시 예상하는 방안

• 문제점 1번 : 도형들의 개수를 6개가 아닌 8개로 만들어서 특정시점의 정사각형 path값 변경 없이 진행합니다. 그러면 8개 중에 중복되는 path 값도 있지만 동시에 움직이기 때문에 실제로 화면에 표시될 때는 크게 차이 없을 것으로 생각됩니다.
• 문제점 2번 : circle 혹은 다른 하나의 도형을 없애고 4개의 도형만 사용해서 각 90도씩 돌아가면서 각도계산 다시 안하도록 진행합니다.

1. 도형별 색상 변경
2. 배경색 제외
3. 뷰 사이즈에 맞는 좌표값 수정 (배율?)

스크롤 할때 나오는 색깔 에니메이션의 뷰가 계속해서 재생성되고 있음. 중복으로 생성되지 않도록 최적화 할 예정.

탭바 스크롤이 현재 5개의 탭이 아닌 7개의 탭으로 돌아가고 있어서, 이것을 최적화 할 예정

Main VC로 Content VC에 있는 View를 가져와서 보여줍니다.

• 탭과 함께 View가 움직이도록 작업할 것

하나의 시간표를 그려 줄 시간표 모델을 생성한다.

Timetable 모델에 포함되어야 할 항목

• 시간표 이름 (옵셔널)
• Subject 리스트

이 때, 한 Timetable 안에는 시간대가 겹치는 과목이 안 생기도록 관리할 방법을 생각해봐야 한다.

첫번째 탭 to 네번째 탭 이동할 때 도형 애니메이션 구현에 대해 조금 더 생각해봐야 합니다.
오른쪽으로 순서대로 이동하는 무한스크롤은 가능하나 첫번째 탭에서 왼쪽으로 드래그하여 네번째 탭으로 이동하는 부분은 애니메이션이 적용되지 않습니다.
또한, 어떠한 방법으로 애니메이션을 추가해야 될지 고민입니다.

컨트롤러에서 제공하는 timeOffset 값에 따라 애니메이션을 덮어쓰기를 해야되는지 어떤식으로 해야될지..?

오른쪽 슬라이드해서 나오는 싸이드 뷰 틀 작업.

메인 상단뷰에 대해 작업
데이터는 리스트 중 하나를 모델 형태로 받아와서 이미지와 텍스트를 뿌려줍니다.

작업한 각 페이지 전체적인 연결.

5개의 탭을 한쪽방향으로 계속 스크롤해도 연결된 탭 처럼 보이도록 무한정으로 스크롤 가능하게 하는 기능.

네트워크 레이어 추가

모델 생성

struct Weather: Codable {
    let id: Int
    let currentWeather: String
}

request생성

struct FetchWeathers: RequestType {
    typealias ResponseType = [Weather]
    var data: RequestData {
        return RequestData(path: "https://jsonplaceholder.typicode.com/weathers")
    }
}

호출

FetchWeathers().execute(
            onSuccess: { (weathers: [Weather]) in
                let weathers: [Weather] = weathers
            },
            onError: { (error: Error) in
                error.printDescription()
            }
        )

Subject 모델에 있는 Information 모델로 정보 저장할 때, 가져오는 방식 수정 필요

탭바 클릭 이동 작업. 탭바의 각 탭들 클릭시 해당 탭으로 이동할 수 있도록 하는 기능 추가

http://www.ewha.ac.kr/mbs/ewhakr/subview.jsp?id=ewhakr_050500000000

• 4~4와 같이 표시된 시간들을 4와 같이 표시해줘야 함.
• 4~5와 같이 표시되는 경우는 쉬는 시간을 표시하지 않고 연달아 표시할 수 있게 하여 한 수업임을 알게 한다.

이전 예제는 N -> 정사각형 으로 단편적인 변경을 확인하였습니다.
이번에는 N -> 정사각형 -> 모래시계 or C 로 변경되는 것(즉, 탭 하나의 스크롤에 해당하는 심볼 움직임)을 확인해봐야 합니다.
(* 정사각형은 각 도형들의 변경을 자연스럽게 만들기 위한 중간 도형입니다.)

예상방법

• 슬라이더 기준으로 왼쪽 0 , 오른쪽 1 이라고 했을 때 아래와 같이 생각 중입니다.
  이전 : 0(N) - 1(정사각형)
  변경 : 0(N) - 0.5(정사각형) - 1(모래시계 or C)

메인 뷰 컨트롤러에 스크롤뷰와 펜 제스쳐를 적용할 예정입니다.
두 개를 같이 적용시켰을 때 가로, 세로로 자연스러운 움직임이 가능하도록 합니다.

• 탭에 따른 가로 이동 -> scroll view 적용
• 리프레쉬 같은 세로 이동 -> pan gesture 적용

1. firebase.plist 수정 필요
2. FirebaseKey 모델 수정 필요

팟캐스트 리스트 페이지에서 클릭해서 들어가는 상세 페이지

Subject 모델을 리스트로 가지고 있는 모델

에니메이션 및 디자인 관련 컨틀릭트 등 각종 버그 수정

오디오 hls적용 사용성 개선

팟캐스트 목록 페이지 - (탭에있는 목록에서 눌러서 들어가는 페이지)

데모의 이전 소스는 레이어와 컨트롤러만 가지고 예제를 만들어서 진행하였으며 피드백을 받고 아래와 같이 변경하였습니다.

변경 부분

• Datasource 프토로콜 추가
• 컨트롤러와 뷰를 분리

변경 설명
초기 설정값(컬러, 초기좌표)은 Datasource 프로토콜을 이용해 컨트롤러에서 값을 가지고 있고 symbolView.datasource = self 를 지정한 다음에 뷰에서는 데이터를 datasource를 통해 초기 좌표값만 전달받고 이후 슬라이더를 움직일때마다 변경되는 timeOffset 값은 symbolView.timeOffset() 함수를 이용해 변경해줄 예정입니다.

TimeTable 뷰 만들기

Tab Bar 위치에 따라 움직임을 제어합니다.

• 초기 위치에 위치할 때: 탭바 더 이상 아래로 움직일 수 없음, 테이블뷰 리프레쉬 가능
• 위 방향으로 움직일 때: 탭바 위로 이동, 테이블뷰 스크롤 불가
• 지정된 위치에 도달했을 때: 더 이상 위로 움직일 수 없음, 테이블뷰 스크롤 활성화
• 지정된 위치에 도달했을 때 테이블뷰를 아래로 스크롤: 테이블뷰를 더 이상 아래로 스크롤할 수 없을 때 탭바 아래로 이동

현재 위아래 스크롤은 가능하나 자연스럽게 움직이지 않고 있습니다.
pan gesture의 translation을 이용하여 움직이고 있는데, 이는 손가락으로 움직인만큼만 움직이게 됩니다.
스크롤뷰처럼 손가락을 뗐을 때에 움직이던 속도에 맞춰서 이동시켜줘야 자연스러운 움직임이 가능합니다.

• 현재 방식

tabBarViewCenterYAnchorConstraint?.constant = currentTabBarViewCenterYConstant + translation.y

메인에서 검색 버튼 눌러서 들어가는 검색 페이지 구현.

오른쪽 상단을 클릭하면 메뉴 뷰를 진입할 수 있도록 합니다.
예상되는 데이터는 최근 본 작품과 찜한 작품을 컬렉션 형태로 보여줍니다. (다음 웹툰 참고)

DB 관련해서 Sqlite 모듈과 ViewController 가 직접 통신하지 않도록 추가 서비스(wrapping)를 만들어 사용합니다.

탭바 뷰컨트롤러 리펙토링(특히, 탭바를 커스텀 뷰로 빼는 작업)과 스크롤할때 색이 덮어씌워지면서 에니메이션 나오는 부분 버그 수정.

Timetable 안에 추가하는 Subject는 기존에 있는 Subject와 시간대가 겹치면 안 된다.

필요할 것으로 예상되는 함수는 Timetable 안에 있는 Subject들의 시간대와 추가하고자하는 Subject의 시간대가 겹치는지 판단하는 함수

• 추가적으로 어떤 과목과 겹치는지 알려주는 함수 개발하고 싶음

상황

도형 : C - N - hourglass - circle - ice
각 도형이 변경될 때마다 90도씩 View가 회전을 하는 것으로 파악됩니다. 그러나 각 도형이 5개인 것과 무한 횡스크롤이 가능하다는 점을 생각해볼 때 C, N, ice 들의 뷰 형태는 계속 바뀌게 됩니다.
따라서 이를 해결하기 위해서 아래와 같은 방법을 생각해보았습니다.

해결 예상 방안

1. 아래 각도를 표시한 것과 같이 hourglass 에서 circle 로 회전되고 난 다음에 circle 상태의 뷰를 이전 각도(90)로 다시 회전 시킵니다.
   마찬가지로 ice 에서 circle로 회전되고 난 다음에 circle 상태의 뷰를 이전 각도(180)로 다시 회전 시킵니다.
   따라서 ice가 되는 시점에는 추가적인 함수실행을 통해 다시 이전 각도로 되돌려야 합니다.

2. 다음 웹툰 앱을 실행 했을 때 N 에서 시작한다는 것과 1번의 상태를 고려한다면 C (오른쪽이 뚫린 형태)가 아닌 아래가 뚫린 형태가 되어야 합니다.

각도
C : 270
N : 0
hourglass : 90
circle : 이전 각도
ice :180

제가 한 탭바와 재현님이 하신 심볼 에니메이션을 합치는 작업.

1. 심볼과 탭바 간의 값 전달을 하여 스크롤 시 심볼이 변경되도록 합니다.
2. 스플래시 병합
3. 심볼 병합

작업완료

리스트에서 클릭하여 들어갈 때, 보이는 에니메이션 작업을 진행하겠습니다.

SplashViewController에서 애니메이션 작업을 끝낸 후 메인 뷰 컨트롤러를 불러오게 될 경우, 메모리를 낭비하게 되므로 메인 뷰 컨트롤러에서 스플래쉬 애니메이션을 실행하도록 변경한다.