SwiftUI
-
SwiftUI에서 인터랙티브 푸시 네비게이션 사용하기SwiftUI 2024. 12. 12. 18:46
안녕하세요. 그린입니다 🍏이번 포스팅에서는 SwiftUI에서 쉽게 인터랙티브 푸시 네비게이션을 사용하는걸 구현해보려고 합니다 🙋🏻 먼저 인터랙티브 푸시 네비게이션도 다양한 쓰임이 있을건데, 현재 제가 하고자 하는 결과물부터 공유해볼께요! 두둥 - 😃 이런걸 해보려고 합니다! 즉, 탭뷰와 같은걸 사용하지 않고 엣지 스와이프를 통해 이전과 이후 뷰로 슬라이드 형식으로 자연스럽게 전환되도록 인터랙티브 푸시 네비게이션을 SwiftUI에 얹어보려고 합니다 🙋🏻 그럼 한번 시작해볼까요? 인터랙티브 푸시 네비게이션 구현하기먼저 제가 하는 방식으로는 SwiftUI에서만 모든걸 해결할 수 없어요.그렇기에 UIKit의 UINavigationController를 채택한 별도의 InteractivePushNavi..
-
SwiftUI - 키보드 노출 여부에 따른 뷰 오프셋 조정SwiftUI 2024. 11. 29. 00:40
안녕하세요. 그린입니다 🍏이번 포스팅에서는 키보드 노출 여부에 따라 뷰를 키보드에 가리지 않고 나타나도록 오프셋 조정하는 방법에 대해 한번 구현해볼까해요 🙋🏻 키보드 노출 여부에 따른 뷰 오프셋 조정SwiftUI로 텍스트 필드나 텍스트 뷰를 사용할때 키보드가 노출되고 뷰의 영역에서 사용성 어려움을 겪는 경우가 종종있어요 😅 예를들어 최하단에 텍스트 필드가 그려지고 있고 텍스트 필드를 포커싱 했을때, 키보드가 노출되는데, 키보드 영역이 어떠한 뷰들을 가리곤 합니다. 이를 개선하기 위해서는 키보드가 노출될때 해당 텍스트 필드 영역의 오프셋을 조정하여 키보드에 가리지 않고 뷰를 다 보이도록 해볼 수 있어요! 사실 SwiftUI는 기본적으로 키보드 회피 동작을 제공해주고 있어요.그래서 단순하게 텍스트 필..
-
SwiftUI - refreshable ScrollViewSwiftUI 2024. 11. 22. 20:40
안녕하세요. 그린입니다 🍏이번 포스팅에서는 refreshable 기능을 가진 ScrollView를 만들어보려고 합니다 🙋🏻 사실, 이전 SwiftUI에서 refreshable이라는 뷰 모디파이어가 존재합니다. 관련해서 포스팅은 아래에서 정리해봤어요! SwiftUI - refreshable안녕하세요. 그린입니다🍏 이번 포스팅에서는 SwiftUI의 List에서 사용 가능한 refreshable이라는 새로 고침 기능에 대해 알아보겠습니다🙌 우선 해당 기능은 iOS 15 부터 사용이 가능해요! 참고로 WWDCgreen1229.tistory.com 요약하자면, 사실 아주 유용한 모디파이어에요.스크롤 환경에서 최상단에서 아래로 드래그 했을 시 새로고침 되는 기능을 아주 손쉽게 구현해줬으니까요..!! 그런..
-
Pagination (feat. SwiftUI & MVVM)SwiftUI 2024. 11. 15. 18:56
안녕하세요. 그린입니다 🍏이번 포스팅에서는 페이지네이션 기초에 대해 구현해보려 합니다 🙋🏻근데, SwiftUI와 MVVM을 곁들인.. 거기다 Concurrency도 곁들인~ 사실 개념적으로 어려운게 전혀 아니기에 바로 들어가보겠습니다! Pagination?페이지네이션은 데이터를 여러 페이지로 나눠서 다루는 기술이죠.예를 들어, 서버와 통신을해서 게시글을 보여줘야하는 데이터가 무수히 한 만개쯤 많다고 생각해볼께요.그랬을때 이 데이터를 모두 한번에 다 가져오고 또 보여준다는건 굉장한 성능 낭비일거에요.한 화면에 스크롤을 내리거나 다음 페이지로 넘어가지 않는 이상 10개정도만 보여줄 수 있을때 남너지 9990개는 아직 보여줄수도 없는데도 들고 있어야 하니까요 🥲 그래서, 페이지네이션을 통해 데이터를 원..
-
SwiftUI로 테두리 오버레이 효과 만들기 (feat. ZStack)SwiftUI 2024. 11. 14. 15:00
안녕하세요. 그린입니다 🍏이번 포스팅에서는 SwiftUI로 테두리 오버레이 효과를 만드는 방법에 대해 구현해보려고 합니다 🙋🏻 SwiftUI로 테두리 오버레이 효과 만들기사실 테두리 오버레이 효과라고 하면 어떤건지 감이 안올 수 있죠!테두리에 쉐도우를 입히거나 어떤 뷰를 오버레이로 까는것을 말할수도 있고, 너무 사용법이 다양하기에 구현되는 결과물을 상상하자니 너무 무궁 무진하죠! 그래서, 먼저 예시를 보이고 이런걸 만들어보려고 한다~ 소개해볼까 합니다 😃 요런 뷰를 만들어보려고 해요.약간 공책 디자인 같기도하죠?여기서 오늘의 챌린지는 저 초록색 뷰를 테두리 위에 겹쳐 올리는겁니다.즉, 공책에서도 스프링 부분이 있는데, 어떻게 보면 저 초록색 뷰가 스프링을 표현하는거라고 보면 될것 같아요. 가장 ..
-
SwiftUI의 Text에 stroke 적용하기SwiftUI 2024. 11. 7. 18:55
안녕하세요. 그린입니다 🍏이번 포스팅에서는 SwiftUI의 Text에 테두리에 stroke를 넣는 방법에 대해 한번 구현해보겠습니다 🙋🏻 간단하기도 하고 제가 필요해서 한번 모디파이어로 빼보면서 만들어볼까해요! SwiftUI의 Text에 stroke 적용하기SwiftUI에서는 Text에 stroke를 넣을 수 있는 모디파이어가 없는걸로 압니다 🥲 그래서 우리는 UIKit을 활용하거나 SwiftUI에서 사용 가능한 모디파이어들을 이용해 stroke를 만들어 볼 수 있어요! 우선 shadow를 이용해서 테두리를 구현해볼 수 있어요. shadow는 그림자를 주는 효과를 말하죠? struct ContentView: View { var body: some View { Text("테두리 효과") ..
-
SwiftUI를 이용한 인터랙티브 애니메이션SwiftUI 2024. 11. 1. 18:50
안녕하세요. 그린입니다 🍏이번 포스팅에서는 제가 필요해서 구현해보다가 이런것도 SwiftUI로 쉽게 구현할 수 있구나 하는걸 소개해볼까 합니다 🙋🏻 바로 SwiftUI를 이용한 인터랙티브 애니메이션이 그 주제입니다ㅎㅎ 이번 포스팅은 개념적인 설명 그런것보다 실제 구현에 기반하고 있기에 코드를 주의깊게 보는것이 좋을것 같습니다! ⚠️ 인터랙티브 애니메이션인터랙티브가 뭘까요? 이런 뜻을 가지고 있다고 구글 AI, 재미나이가 말해주네요. 즉, 인터랙티브 애니메이션이라는것은 쌍방향의 애니메이션을 뜻하게 되는겁니다.사용자의 입력이나 동작에 반응해 변화하는 동적인 애니메이션을 말해요.그런 구현은 정말 무궁무진하게 생각한대로 펼쳐볼 수 있겠지만, 저는 하나의 예시를 가지고 그 인터랙티브 애니메이션 구현을 살펴..
-
SwiftUI - Color 혼합하기SwiftUI 2024. 10. 28. 18:45
안녕하세요. 그린입니다 🍏이번 포스팅에서는 간단한 SwiftUI의 새로운 기능을 알아보려 합니다 🙋🏻바로 SwiftUI에서 색상을 적용시키는 Color를 사용할때 새로 나온 mix 메서드를 이용해 컬러를 혼합하여 새로운 컬러를 도출해내보는것이죠! 정말 간단히 바로 알아볼까요? Color mix우선 기본적으로 Color 타입을 간단히 짚고 넘어가볼께요. Color는 SwiftUI에서 색상을 표현하는 구조체입니다. @frozenstruct Color 표현하는 방식으로는 에셋 카탈로그에서 색상을 로드하거나, RGB 값을 넣거나 색조, 채도, 밝기 등을 지정하여 편하게 표현할 수 있어요. let aqua = Color("aqua")let skyBlue = Color(red: 0.4627, green: 0...