TabView와 Custom Indicator를 가지는 인터페이스를 구현한다.
크기를 조절하는 등의 방식으로 App의 배너에 유용히 사용할 수 있을 것으로 생각된다.
따라 해볼 강의는 TabView와 TabIndicator 까지만 구현하지만 심미성을 위해 약간의 디자인 요소를 추가해 본다.
기능
참고 강의는 아래와 같은 기능을 가지고 있다.
- 여러 사진을 하나씩 표현하는 TabView
- TabView와 연동되는 Custom Tab Indicator
- Tab Indicator의 양 끝에 적용되는 리바운드 효과
- Tab Indicator에 적용되는 Animation 효과
추가적으로 구현할 기능은 다음과 같다.
- 표시되는 사진의 평균적인 색상을 구하기
- 구해진 평균 색상을 사용해 사진과 조화로운 Tab Indicator로 수정하기
구현하면서 숙달할 내용은 다음과 같다.
- MV패턴
- Animatable과 ViewModifier 프로토콜을 사용한 Custom Modifier 구현
- 서로 다른 View를 GeometryReader를 사용해 동작을 연동하는 방식 구현
- 표시되는 사진의 평균 색상을 도출하는 여러 알고리즘의 실습과 퍼포먼스 문제 해결
참고
'학습 노트 > UIBreaking (2023)' 카테고리의 다른 글
AutoScrolling #05 (0) | 2023.04.04 |
---|---|
AutoScrolling #04 (0) | 2023.03.23 |
AutoScrolling #03 (0) | 2023.03.23 |
AutoScrolling #02 (0) | 2023.03.22 |
AutoScrolling #01 (0) | 2023.03.16 |