iyOmSd/Title: SwiftUI 29

[SwiftUI] onScrollVisibilityChange 뷰 노출 이벤트

iOS18+에서부터 사용가능한 API를 간단하게알아보려합니다. 지금까지 스크롤뷰에서 특정 뷰가 노출됬다를 표시할땐onAppear으로만 체크가능했고 혹은 특정지점에 뷰를 하나 숨겨서 체크해왔엇죠!LazyStack을 쓰지않으면 로드시 모두 onAppear가 실행되서신경써야했구요! 하지만 이번에 알아볼 onScrollVisibilityChange는뷰가 최소 몇% 노출되면 액션을 처리 할 수 있는 함수에요 threshold뷰의 몇%가 보이면 정의된 action이 실행될 것인지를 정합니다.기본값은 0.5로 뷰의 반이 보이면 action이 실행되요 actionthreshold만큼 뷰가 보이거나반대로 스크롤해서 threshold만큼 뷰가 안보여졌을때실행될 작업을 정의합니다. action에 Bool값으로해당 %만큼 뷰..

[SwiftUI] Previewable, PreviewModifier 프리뷰 데이터 공유하기

Preview에서 사용가능한 개념을 알아보려합니다.Preview에서는 동적인 상태 값을 추가하는게 번거로웠었는데요#Preview { TextField(text: .constant("")) { Text("입력하세요") }}예를들어 이런 Binding코드에대한 동적인 값을 넣어주기가 힘들었죠하지만 그 부분을 해결해준게 @Previewable 매크로 입니다 Previewable #Preview { @Previewable @State var text: String = "" TextField(text: $text) { Text("입력하세요") }}#Preview 클로저 안에 넣어주기만 하면 끝이에요프리뷰에서만 해당 상태값을 사용할 수 있어요정말 간편하죠 #Pr..

[SwiftUI] WWDC23 Beyond scroll views

Margins and safe areaScrollView에 패딩을 넣으면 ScrollView가 인셋되긴 하지만 스크롤할 때 콘텐츠가 잘림ScrollView 자체를 인셋하는 대신 ScrollView의 콘텐츠 여백을 확장하려고 합니다새로 생긴 safeAreaPadding 수정자를 쓰면 됩니다.이건 일반 padding 수정자와 똑같이 동작하기는 하지만 콘텐츠가 아니라 안전 영역에 패딩을 넣기 때문에 ScrollView가 전체 너비에 적용되어 다음 아이템이 살짝 엿보이게 됩니다 safe area는 앱이 작동하는 기기에 주로 있고 safeAreaPadding이나 safeAreaInset 수정자 같은 API에도 있을 수 있습니다 ScrollView는 safe area를 분할해 콘텐츠에 적용하는 여백으로 만듭니다여기..

[SwiftUI] WWDC24 Work with windows in SwiftUI

Work with windows in SwiftUI세션을 정리한 글입니다. 윈도우는 앱 콘텐츠를 담는 컨테이너입니다위치를 재조정할 수 있는 것처럼크기를 조절하거나닫을 수 있습니다 설명할 개념은 iPadOS, visionOS macOS와 같은 멀티 윈도우 플랫폼에 적용됨(이 세션에서는 visionOS를 중심으로 다루니 참고하세요!)  Fundamental개별 윈도우를 통해 앱의 여러부분 동시 사용가능동일 인터페이스, 인스턴스로 강력한 성능 갖음크기조절과 위치재종 배율 조정이 가능 visionOS에서 볼륨 윈도우 스타일로 윈도우에 3D 콘텐츠를 포함할 수 있습니다여러 윈도우 사용도 좋지만 TabView 같은 단일 최상위 뷰로 환경을 단순화 가능   각 id에 맞는 윈도우를 열 수 있음 이 예시에 두 가지 새..

[SwiftUI] WWDC24 Swift Charts: Vectorized and function plots

Swift Charts: Vectorized and function plots세션을 정리한 글입니다. 이제 Swift Charts를 사용하면 앱에 수학 함수를 플롯 작업하며 데이터 이상의 요소를 시각화할 수 있습니다 2개의 새로운 API를 소개합니다LinePlot은 단일 함수를 시각화하고 AreaPlot은 두 함수 사이의 영역을 채웁니다 예시로각 요소에 대한 BarMark를 사용하여 태양광 패널의 용량 밀도를 시각화하는 히스토그램을 만들었습니다이 히스토그램(막대차트)은 그 용량 밀도가 정규 분포일 수 있음을 나타냅니다 (정규분포: 평균점을 기준으로 좌우대칭인 형태의 자료형태) 정규 분포 곡선의 점을 계산하는 함수를 정의하고LinePlot API를 사용하여 이를 그리면이렇게 곡선형태를 위에 덮어쓸 수 있습..

[SwiftUI] WWDC24 SwiftUI essentials 정리

wwdc24 SwiftUI essentials 정리로 노트하기 편한 음슴체를 사용했습니다! 🙇‍♂️ SwiftUI의 핵심기능Fundamentals of views뷰를 특별하게 만드는 3가지 특징Declarative 선언적선언적 프로그래밍과 명령형 프로그래밍은 상호배타적이지 않음선언적 코드를 사용하면 예상되는 결과에 집중가능명령형은 상태변경하거나 기존 선언구성요소가 없을때 유용함SwiftUI는 두가지모두를 수용함뷰는 단지 선언적 설명이므로 뷰하나를 여러개 뷰로 나누어도 앱성능이 저하되지않음Compositional 구성적재배열하는건 쉽다ViewBuilder클로저를 사용하여 컨테이너의 하위항목을 선언함 스유 모든 컨테이너뷰에서 사용되는 패턴이는 뷰모디파이어에서 중요한역할 함뷰에 수정사항을 적용하고 뷰의 모든..

[SwiftUI] Highlight Text만들기(일치하는 텍스트 강조 뷰)

이런 뷰를 만들어볼거에요검색하는 기능이라던가텍스트를 강조를 하고싶은 뷰에서 많이 사용하죠! 2가지 방법으로 만들어보려고해요AttributedString과 Text의 조합으로 만들어 볼겁니다 어렵지않기때문에 코드로 같이 봐볼게요!  방법1. Text의 조합으로 구현하기핵심코드부터 먼저 봐볼게요private var highlightingText: Text { guard !highlightString.isEmpty, let matchIndex = text.range(of: highlightString) else { return Text(text) .font(font) .foregroundColor(textColor) } ..

[SwiftUI] NavigationStack 화면전환 방법 고민정리 (feat. Router 구현)

안녕하세요~iOS16+부터 사용할 수 있는 NavigationStack을 이용한 라우터 로직을 만들었는데요그 과정에서 생각한 방법과 겪은 고민을 정리해보려합니다! 네비게이션 스택이뭐야? 하시는분들은https://nsios.tistory.com/199 [SwiftUI] NavigationStack안녕하세요! SwiftUI에서 항상 느꼇던 불편한점중 하나가 네비게이션이였는데요 이를 해결해주는게 나온지 좀 됐지만 이제 해보려합니다! (진작에 나왔을 녀석이여야 했는데...) iOS16 타겟을 쓸일nsios.tistory.com쓰윽 훑고오셔도 좋을것같습니다!우선 제일 간단한 방법부터 시작해보겠습니다~! 아! 그전에이 모든 라우팅 로직들은 모듈화를 했다는 가정하에 이뤄졌습니다.예제에서는 아주 간단한 구조로 사용했어..

[SwiftUI] ChipView(iOS16+, iOS16-) tag view 구현하기

2023.09.30 - [iyOmSd/Title: Swift] - [Swift] Multi Line Tag View 그리기 [Swift] Multi Line Tag View 그리기SwiftUI만 하다가 UIKit을 하게될 일이 생겼는데 요구사항중하나가 뷰를 크기에 맞게 여러줄로 표현해주는 뷰에요 테그를 표현하는 뷰같은 곳에 많이 쓰이는 UI로 알고있어요 결과물 부터 보시죠!nsios.tistory.comUIKit을 사용하는경우는 여기서 확인가능합니다!!저 글을 쓸땐 이 레이아웃을 chip이라고 부르는지 몰랐어요 ㅎ 간단하게 ChipView란?균등한 너비를 가지는게아니라 컨텐츠의 크기에 fit하게 정렬되고 그 사이즈를 넘어간다면 아래로 이동되는 그러한 뷰입니다! 아래처럼요 이런 뷰가 ChipView입니다~..

[SwiftUI] WWDC23 Demystify SwiftUI Performance

SwiftUI에 대한 성능적인 측면을 좀더 알아보고싶어서 찾아본 세션이에요 성능문제는 증상에서 부터 시작됩니다. 네비게이션 푸시가 느리거나 애니메이션이 끊기는현상이 보이거나 로딩 인디케이터가 뜨거나 등 현상이 일어날 때 증상을 보고 파악하게됩니다. 성능 문제가 있다는것을 파악하면 문제를 해결하는 첫단계는 측정이고 증상이 있음을 입증하고 증상의 원인을 파악합니다. 근본 원인을 파악한 후에는 최적화해서 문제를 해결합니다. 고친내용을 다시측정하고 입증하고 문제가 해결됬는지 확인합니다. 이를 반복하게 됩니다. 이 세션을 듣기위해서는 SwiftUI의 identity를 이해하고있어야하고 암시적, 명시적 identity가 어떻게다른지 view lifetime과 identity의 차이를 알고있어야한다고 하네요! 자세한..