[SwiftUI]Tab Animation

2023. 2. 22. 14:50·Swift/개발
728x90

 

안녕하세요 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]
    }
}
728x90

'Swift > 개발' 카테고리의 다른 글

[SwiftUI] 애플스토어 앱 클론코딩  (1) 2023.05.30
[SwiftUI] 출쓱 앱 클론코딩  (0) 2023.05.21
[NIKE clone] 3D 신발 에니메이션  (0) 2023.02.10
애플 지도 클론코딩  (0) 2023.01.18
아이폰 키패드 클론코딩  (0) 2023.01.12
'Swift/개발' 카테고리의 다른 글
  • [SwiftUI] 애플스토어 앱 클론코딩
  • [SwiftUI] 출쓱 앱 클론코딩
  • [NIKE clone] 3D 신발 에니메이션
  • 애플 지도 클론코딩
bulmang
bulmang
모바일 개발자 도전
  • bulmang
    bulmang
    bulmang
  • 전체
    오늘
    어제
    • 분류 전체보기 (208)
      • 알고리즘 (68)
        • List (3)
        • Two Pointer (6)
        • Binary Search (4)
        • Prefix Sum (3)
        • Sort (4)
        • Brute Force (5)
        • Array (2)
        • String (4)
        • 프로그래머스 (12)
        • 백준 (9)
        • Queue (2)
        • Stack (2)
        • Recursion (12)
      • Computer Science (16)
        • Computer Architecture (6)
        • Operating System (5)
        • Network (2)
        • 기타 (2)
        • System Programming (1)
      • Swift (70)
        • 개발 (24)
        • 정리 (25)
        • 문법 (20)
      • Flutter (24)
      • 기타 (12)
        • 후기 (12)
      • Git (6)
      • Ios 오픈소스 (5)
      • UI 디자인 (5)
      • AppleScript (2)
  • 링크

    • Notion
    • Github
  • 태그

    IOS
    Apple Developer Academy
    알고리즘
    today i learned
    riverpod
    FLUTTER
    컴퓨터구조
    백준
    협업
    Java
    피플
    Xcode
    자료구조
    개발
    코딩테스트
    재귀
    문법
    SwiftUI
    Swift
    til
  • 최근 댓글

  • 최근 글

  • 인기 글

  • 250x250
  • hELLO· Designed By정상우.v4.10.2
bulmang
[SwiftUI]Tab Animation
상단으로

티스토리툴바