SwiftUI
-
SwiftUI로 음성메모 구현하기SwiftUI 2023. 8. 15. 11:27
안녕하세요. 그린입니다 🍏 이번 포스팅에서는 SwiftUI로 음성메모를 구현하는 학습을 해보려해요! 🙌 어떻게 만들어 볼까요? 전체적으로 설명하면 AVFoundation을 이용하여 해당 음성메모 및 재생 등에 관한 기능을 해줄 수 있는 서비스를 만들고 해당 서비스 객체를 뷰에서 사용하면 됩니다. MVVM으로 굳이 뷰에 뷰모델을 만들어 해당 뷰모델이 음성메모를 관장하는 서비스 객체를 가지는 구조로 할 수 도 있지만 간단히 이번 포스팅에서는 음성메모 기능에 초점을 맞추기 위해 구조적으로 생략했음을 말씀드려요 🙋🏻 그럼 바로 한번 만들어보겠습니다 🕺🏻 음성메모 서비스 객체 구현하기 가장 먼저 음성메모를 담당하는 서비스 객체를 구성하는것이 핵심이자 사실 전부입니다. 그렇기에 먼저 코드로 보면서 설명을 해볼께요!..
-
SwiftUI - monospaced를 이용한 Text 고정폭 설정하기SwiftUI 2023. 7. 20. 17:56
안녕하세요. 그린입니다 🍏 이번 포스팅에서는 SwiftUI에서 Text의 고정폭을 설정하는 방법을 monospaced와 함께 알아보겠습니다🙌 우선 monospaced가 어떤 역할을 하는지부터 공식문서를 통해 살펴보겠습니다 🕺🏻 monospaced 기본 글꼴과 동일한 폰트 패밀리의 고정 너비 글꼴을 반환해주는 메서드입니다. 만약 동일한 폰트 패밀리의 적합한 글꼴이 없을 경우 SwiftUI가 기본 고정 너비 글꼴로 반환해줍니다. func monospaced() -> Font 선언을 보시면 SwiftUI의 사용하는 메서드로 Font 타입으로 반환해줍니다. 다만 아쉬운점은 iOS 15 이상부터 사용이 가능해요 🥲 그리고 기본적으로 Text나 그 외 텍스트를 감싸는 HStack등에서 붙일 수 있지만, font 지..
-
SwiftUI - Custom ScrollTabViewSwiftUI 2023. 7. 10. 21:58
안녕하세요. 그린입니다🍏 이번 포스팅에서는 커스텀한 스크롤 탭뷰를 만들어보려해요! 정확하게는 탭뷰 내 컨텐츠가 스크롤되는것 외에도 TabBar 즉, 헤더 영역 자체가 스크롤 되는것을 구현해보려 합니다🙌 얼마전에 SwiftUI로 커스텀 탭 뷰를 구현해본적이 있어요. https://green1229.tistory.com/385 SwiftUI - Custom TabView 안녕하세요. 그린입니다🍏 이번 포스팅에서는 SwiftUI로 커스텀한 탭뷰를 구현해보려 합니다🙌 SwiftUI에서 기본적으로 제공해주는 TabView 컴포넌트가 있지만 아예 완전 커스텀하게 탭뷰를 입맛대 green1229.tistory.com 그런데 해당 커스텀 뷰에서 탭 바의 역할을 하는 헤더 영역은 많은 갯수의 탭이 위치하게 될 경우 스크..
-
SwiftUI - 뷰의 높이가 충분치 않을때도 Sticky 유지하기SwiftUI 2023. 7. 6. 15:31
안녕하세요. 그린입니다 🍏 이번 포스팅에서는 실제로 겪을 수 있는 SwiftUI의 구현 과정에서 문제를 알아보고 대처해보려 합니다 🙋🏻 Sticky한 스크롤 뷰는 다들 한번쯤 들어보셨을것 같아요! 만약 Sticky한 뷰가 어떤건지 처음 들어보신다면 아래 포스팅을 먼저 보고 오시면 많은 도움이 됩니다ㅎㅎ https://green1229.tistory.com/302 SwiftUI - PinnedScrollableViews (a.k.a Sticky View) 안녕하세요. 그린입니다🍏 이번 포스팅에서는 SwiftUI에서 PinnedScrollableViews라는것에 대해 알아보겠습니다🙌 이걸 알아보게 된 배경은 프로덕트의 기능을 구현하다 스크롤뷰로 감싸진 VStack에서 green1229.tistory.com ..
-
SwiftUI - Custom TabViewSwiftUI 2023. 7. 3. 15:39
안녕하세요. 그린입니다🍏 이번 포스팅에서는 SwiftUI로 커스텀한 탭뷰를 구현해보려 합니다🙌 SwiftUI에서 기본적으로 제공해주는 TabView 컴포넌트가 있지만 아예 완전 커스텀하게 탭뷰를 입맛대로 구성해볼 수 도 있습니다. 기본적인 탭뷰 API가 궁금하신분은 아래 포스팅을 보시면 도움이 될 수 있어요 😄 https://green1229.tistory.com/234 SwiftUI - TabView 안녕하세요. 그린입니다🟢 이번 포스팅에서는 SwiftUI 내에서 기본 애플에서 제공하는 TabView에 대해 알아보겠습니다🙌 주로 앱을 구성하다보면 하단에 홈 / 설정 등 메뉴로 갈 수 있는 TabBar에 대 green1229.tistory.com 자 이런 기본적으로 제공해주는 형태가 아닌 우리만의 커스텀..
-
SwiftUI로 캘린더 직접 구현하기 (3탄 - 보완된 캘린더)SwiftUI 2023. 6. 29. 17:44
안녕하세요. 그린입니다🍏 이번 포스팅에서는 이전에 SwiftUI로 커스텀 캘린더를 구현한적이 있습니다. https://green1229.tistory.com/362 SwiftUI로 캘린더 직접 구현하기 안녕하세요. 그린입니다🍏 이번 포스팅에서는 오랜만에 SwiftUI로 뚝닥뚝닥 해보는 시간입니다🙋🏻 뭘 뚝닥뚝닥 해볼지 고민하다가 그냥 밑도 끝도 없이 캘린더를 간단하게 직접 만들어보고 green1229.tistory.com 기본적인 구현의 포스팅이니 먼저 보고오셔도 좋습니다🙋🏻 여기서 발전시켜서 좀 더 부가적인 기능을 넣어 캘린더의 기능을 보완해봤습니다🏄🏻♂️ 어떤 기능들이 들어갔나요? 1️⃣ 현재 월 달력에서도 이전 이후 날짜가 보이면서 실제 클릭 등의 동작은 되지 않도록 추가 2️⃣ 이전 / 이후 달..
-
SwiftUI에서 Tooltip 구현하기SwiftUI 2023. 6. 22. 14:33
안녕하세요. 그린입니다🍏 이번 포스팅에서는 SwiftUI에서 간단히 Tooltip을 직접그려보며 Shape를 다뤄볼까 합니다🙋🏻 ⚠️ 주의 - 아주 간단히 Shape를 다뤄보는것에 초점을 맞췄기에 간단할 수 있음! 우선 두가지가 필요합니다. 하나는 삼각형 모양의 Shape를 만드는것 그리고 하나는 툴팁 텍스트가 들어갈 라운드된 Rectangle 뷰를 만드는것! 먼저 삼각형 모양의 엣지를 가진 Shape를 만들어볼께요. Custom Triangle Shape private struct CustomTriangleShape: Shape { private var width: CGFloat private var height: CGFloat private var radius: CGFloat fileprivate i..
-
Beyond Scroll Views (feat. WWDC 2023)SwiftUI 2023. 6. 15. 11:05
안녕하세요. 그린입니다🍏 이번 포스팅에서는 SwiftUI의 API를 사용해 스크롤 뷰를 더 잘 활용하는 방법을 보겠습니다🙋🏻 특히 이전과는 방식으로 다른 스크롤 뷰를 커스텀하게 정의하는걸 보려해요. 우리가 처리하는 많은 컨텐츠는 고정된 화면에 다 담을 수 없어 스크롤링을 많이 이용합니다. 이를 통해 화면에 많은것을 담을 수 있죠. SwiftUI는 스크롤을 앱에 통합할 수 있는 몇가지 다른 컴포넌트들을 제공합니다🙃 이번 포스팅에서는 그 중 하나인 ScrollView를 보겠습니다! ScrollView에 대한 간략 정리 스크롤 뷰는 컨텐츠를 스크롤할 수 있는 building block입니다. 스크롤 뷰는 스크롤 방향을 설정하고 내부 컨텐츠를 담아주죠. 해당 컨텐츠가 스크롤 뷰의 크기를 초과하면 해당 컨텐츠 중..