[SwiftUI]Tab Animation

 

안녕하세요 bulmang입니다!! 😄

오늘은 아카데미에 가기전에 다시 Swift 개발 공부를 어느정도 해야 될 것 같아서 인강을 듣고 공부하여 블로그에 정리를 하려고 합니다.

앱 설명

• SwiftUI로 개발한 코드이며 Tab Animation에 대한 앱입니다.

앱 기능

• 선형 보간 공식을 이용하여 두 지점 사이의 값을 추정할 때 그 값을 두 지점과의 직선 거리에 따라 선형적으로 결정하는 방법이다.
• 이미지를 넘길때 Rectangle을 사용하여 indicator 넓이와 위치를 정하여 움직여준다.

문법

• TabView: 탭을 구성하고 각 탭에 대한 콘텐츠를 추가 할 수 있음
• GeometryReader:
  • 화면에 보여지는 뷰(View)의 크기 및 위치 정보를 제공하는 뷰 자식 뷰에 대한 레이아웃 정보를 제공하므로, 자식 뷰를 배치하거나 레이아웃을 설정하는 데 사용
• $0 :
  • 자식 뷰의 크기 및 위치 정보를 담고 있는 GeometryProxy 객체를 의미
  • 뷰의 크기나 위치에 따라 동적으로 UI를 변경하는 것이 가능
• tag : 각 탭에 고유한 값(정수, 문자열 등)을 할당함으로써, 선택한 탭을 나중에 참조하거나 다른 뷰와 연결함.
• tabViewStyle: 사용자가 가로로 스와이프하여 다음/이전 탭으로 이동할 수 있는 페이지 기반의 스타일
• indexDisplayMode: 인디케이터 표시하는 방법 지정
• preferredColorScheme: 앱의 색상 테마를 정한다.
• indices: 당 컬렉션의 인덱스(Index)를 순회할 수 있도록 하는 인덱스 집합
• compactMap:
  • Swift의 배열(Array)에서 사용 가능한 메서드 중 하나
  • 배열의 요소를 변환한 결과 중 **nil**이 아닌 것들로 새로운 배열
• preference: 부모-자식 뷰 간에 데이터를 전달
• onPreferenceChang: modifier를 사용하여 자식 뷰에서 생성한 데이터가 업데이트될 때마다 호출되는 클로저를 정의

선형 보간 코드

import SwiftUI

// 선형 계산 탭 에니메이션에 대한 간단한 클래스
class LinearInterpolation {
    private var length: Int
    private var inputRange: [CGFloat]
    private var outputRange: [CGFloat]
    
    init(inputRange: [CGFloat], outputRange: [CGFloat]) {
        assert(inputRange.count == outputRange.count)
        self.length = inputRange.count - 1
        self.inputRange = inputRange
        self.outputRange = outputRange
    }

    func calculate(for x: CGFloat) -> CGFloat {
        // 값이 초기 입력 범위보다 작은 경우
        if x <= inputRange[0] { return outputRange[0] }
        
        for index in 1...length {
            let x1 = inputRange[index - 1]
            let x2 = inputRange[index]
            
            let y1 = outputRange[index - 1]
            let y2 = outputRange[index]
        
            // 선형 보간 공식 : y1 + {(y2-y1)/(x2-x1) * (x-x1))
            if x <= inputRange[index] {
                let y = y1 + ((y2-y1)/(x2-x1) * (x-x1))
                    return y
            }
        }
        
        // 값이 최대 입력 범위를 초과하는 경우
        return outputRange[length]
    }
}