본문 바로가기

학습 노트/UIBreaking (2023)

AutoScrolling #00

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