SWIFTUI100

• 

  SwiftUI : Identifiable을 사용하여 연락처 뷰 연락처 뷰 이번에는 Identifiable 프로토콜을 사용하여 연락처 앱을 간단하게 만들어 보겠습니다. 메인 화면 구성 우선 contentView에 사용자 연락처를 배열해주도록 하겠습니다. 우선 아래 이미지를 다운로드하여 Assets에 넣어주겠습니다. import SwiftUI struct ContentView: View { var body: some View { VStack { HStack { Image("Leon") .resizable() .scaledToFit() .frame(height: 60) .clipShape(Circle()) VStack(alignment: .leading) { Text("Leon") .fontWeight(.black) Text("+82 10 1234 6523") } } }.. SWIFTUI/Others 2021. 5. 3.

• 

  SwiftUI : Identifiable protocol Identifiable SwiftUI에서 identifiable은 자주 쓰이기 때문에 반드시 알아둬야 할 프로토콜입니다. 이것에 대해 알아보기 전에 이 프로토콜이 생겨난 배경에 대해서 먼저 알아보도록 하겠습니다. 만약 앱 내에 다음 Product 구조체타입을 정의했다고 가정해보도록 하겠습니다. Struct Product { let name: String let price: Int } 그리고 Product 타입을 사용하여 제품명과 가격이 같은 객체를 생성해보도록 하겠습니다. let PS5 = Product(name: "controller", price: 100) let PS4 = Product(name: "controller", price: 100) 이것을 Equatable 프로토콜을 채택하고 바교해보면 .. SWIFTUI/Grammar 2021. 5. 3.

• 

  SwiftUI : @Namespace / matchedGeometryEffect() 애니메이션 동기화 .matchedGeometryEffect 에 대해 알아보도록 합시다. MatchedGeometryEffect 만약 view계층의 서로 다른 부분에 동일한 view가 나타나는 등 두 view사이에 애니메이션 효과를 주려면 .matchedGeometryEffec()수정자를 사용하는 것이 좋습니다. 이 수정자를 사용하려면 동일한 view모두에 이 수정자를 연결해줘야 합니다. 이렇게 하면 두 개의 view상태를 전환 할 때 SwiftUI가 동기화된 view에 원활하게 애니메이션을 적용시킬 수 있습니다. 우선 간단하게 가장 쉬운 animation효과만 적용시켜서 예를 들어보겠습니다. import SwiftUI struct ContentView: View { @State private var isFlipped = .. SWIFTUI/Grammar 2021. 4. 30.

• 

  SwiftUI : Text 목차 SwiftUI에서 가장 기본이 되는 Text에 대해 알아보도록 합시다. Text VStack(spacing: 20) { Text("서근개발블로그") Text(Image(systemName: "star.fill")) Text(Date(), style: .time) } Text view는 현재 플랫폼에 적합한 본문 글꼴을 사용하여 앱의 사용자 인터페이스에 문자열을 그려줍니다. font(_:) view modifier를 사용하여 제목이나 캡션과 같은 다른 표준 글꼴을 선택할 수 있습니다. Text의 스타일을 조금 더 세밀하게 조정해야 하는 경우 같은 modifier 를 사용하여 글꼴을 구성하거나, 커스텀 폰트를 선택할 수 있습니다. Text("서근의 블로그") .font(.system(size: 12, .. SWIFTUI/Controls 2021. 4. 29.

• 

  SwiftUI : ScrollToTop 맨위로 버튼 ScrollToTop 스크롤을 내리면 우측 하단에 Top버튼이 나오고, 그 버튼을 누르면 상단으로 이동하는 버튼을 만들어 보겠습니다. NavigationView 생성 Home struct를 따로 만들어 놓고 body 부분에 Home을 호출 한 뒤 NavigationView로 감싸줍니다. import SwiftUI //MARK : Body struct ContentView: View { var body: some View { NavigationView { Home() .navigationBarTitle("티스토리") } } } //Home View struct Home: View { var body: some View { Text("some") } } 샘플 로우 생성 ScrollView를 사용하여 샘플 R.. SWIFTUI/Others 2021. 4. 28.

• 

  SwiftUI : Path / Shape 목차 Path 와 Shape 에 대해 알아보도록 합시다. Path SwiftUI는 사용자가 원하는 Custom Shape를 그릴 수 있도록 Path를 제공하고 있습니다. Color, grandient및 shape와 마찬가지로 Path는 그 자체로 View입니다. 이것은 우리가 TextField와 Image처럼 사용할 수 있다는 소리죠. Paths는 위치 값을 가진 선, 곡선 및 기타 정보를 가진 목록입니다. 하지만 Shape는 다른 정보를 미리 알 수 없죠. Shape 내부에 path(in:) 메서드가 호출이 끝나야 최종 적인 사이즈를 알 수 있습니다. Paths는 절 때 경로 안에서 좌표값에 맞춰 도형을 그리지만 Shape는 path(in:)에서 주어진 Rect를 기반으로 상대 경로를 받아서 그리게 됩.. SWIFTUI/Image 2021. 4. 22.

• 

  SwiftUI : DarkMode 구현하기 - Environment .DarkMode적용 법에 대해 알아보도록 합시다. DarkMode SwiftUI에서 사용자가 DarkMode인지 LightMode인지에 따라 앱 화면을 자동으로 설정해줄 수 있는 기능이 있습니다. 이것을 사용하기 위해서는 Environment에 대한 기본적인 지식이 있어야 합니다. [SwiftUI 기초/Others] - SwiftUI : EnvironmentValues 우선 간단하게 화면에 Alert버튼과 배경화면을 설정해주겠습니다. 배경화면 및 버튼 추가 ZStack { //1.배경설정 Color.yellow .edgesIgnoringSafeArea(.all) VStack { Spacer() //2. 버튼생성 Button(action: { print("버튼이 눌렸습니다.") }, label: { Te.. SWIFTUI/Others 2021. 4. 14.

• 

  SwiftUI를 위한 Clean 아키텍처 목차 본 게시글은 Clean Architecture for SwiftUI 게시글을 번역한 자료 입니다. 원작자의 깃허브 : Alexey Naumov UIkit이 나온 지 벌써 11년이 되었습니다. iOS SDK 가 2008년에 출시되었을 때부터 우리는 UIKit으로 앱 개발을 해왔습니다. 그 긴 시간 동안 개발자들은 각자의 앱에 적용할 최고의 아키텍처를 고민했습니다. MVC로 시작해서 MVP, MVVM, VIPER, RIBs, VIP에 이르기까지 다양합니다. 하지만 이제 큰 변화가 찾아왔습니다. SwiftUI의 등장으로 지금까지 iOS를 위해 주로 쓰이던 아키텍처 패턴들은 역사 속으로 사라질 것입니다. 좋던 싫던 SwiftUI는 iOS 개발의 미래가 될 것입니다. 그리고 우리가 아키텍처를 설계할 때 직면.. SWIFTUI/Grammar 2021. 4. 6.

• 

  SwiftUI : @Environment 프로퍼티 래퍼 Environment 에 대해 알아보도록 합시다. Environment 앞에서 다룬 Environment수식어가 뷰의 환경 요소를 변경시키기 위한 쓰기 전용의 기능이었다면, 이번에 볼 @Environment라는 프로퍼티 래퍼는 읽기 전용으로 특정 뷰에서 EnvironmentValues의 특정 요소를 읽어와 뷰 구성에 반영할 때 사용합니다. 예를 들어, 영어, 한국어, 중국어와 같이 일반적으로 사용되는 LTR(Left to Right)환경과 아랍어나 히브리어처럼 중동지역에서 사용되는 RTL(Right to Left)언어 환경에서 뷰를 서로 다르게 표현하고 싶다고 가정해보겠습니다. 이럴 땐 Environment를 사용하여 여러가지 환경 변수 중 layoutDirection을 선택하고, 레이아웃 방향에 대한 .. SWIFTUI/Grammar 2021. 4. 6.

• 

  SwiftUI : EnvironmentValues EnvironmentValues 에 대해 알아보도록 합시다. Environment SwiftUI에서는 뷰를 구성하는 데 필요한 각종 환경 설정과 관련된 정보를 EnvironmentValues타입이 관리합니다. colorScheme, timeZone, locale, calendar, layoutDirection, sizeCategory, undoManager등 기존에는 UITraitCollection을 비롯해 다양한 클래스에서 나뉘어 사용하고 관리되던 속성들을 이제 EnvironmentValues 하나에 모두 담아서 쉽게 접근하고 관리할 수 있습니다. 이 EnvironmentValues는 프레임워크에 의해 별도로 관리되고 있으므로 어떤 뷰에서든 접근할 수 있는데, 이때 얻게 되는 값은 상위 계층의 뷰가 가.. SWIFTUI/Grammar 2021. 4. 5.

• 

  SwiftUI : EnvironmentObject '뷰간에 데이터 공유' 앞 게시물 ObservedObject를 먼저 보고 오시는것을 추천합니다. 이번 게시물에서는 앞에서 썼던 코드를 재사용 합니다. 이번에는 EnvironmentObject에 대해 알아보도록 하겠습니다. EnvironmentObject 앱의 많은 뷰와 공유해야하는 데이터의 경우 SwiftUI는 EnvironmentObject속성 래퍼를 제공합니다. 이를 통해 필요한 곳 ​​어디에서나 모델 데이터를 공유 할 수 있으며, 데이터가 변경 될 때 뷰가 자동으로 업데이트 된 상태로 유지됩니다. A View에서 데이터를 생성 후 👉🏻 B View 👉🏻 C View 로 전달 후, 최종적으로 👉🏻 D View로 전달하는 대신에, 특정 뷰에서 데이터를 생성 후 B,C,D가 전달 없이 공용으로 사용 가능 하게 할 수 있습니다... SWIFTUI/Grammar 2021. 4. 5.

• 

  SwiftUI : Preview 레이아웃을 미리 보는방법 Preview 에 대해 알아보도록 합시다. Preview 동작 과정 struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } 현재 소스 에디터에 PreviewProvider프로토콜을 준수하는 타입이 존재하는지 확인. PreviewProivder프로토콜의 필수 구현 사항인 previews 타입 프로퍼티에서 뷰 생성. 액티브 스킬의 목적지로 선택한 시뮬레이터 또는 맥에 연결한 기기의 형태로 preview container 렌더링. 리뷰 컨테이너를 직접 지정해 줄 경우 3번 에서 선택한 기기를 무시하고 해당 기기 형태로 렌더링. 따라서 가장 먼저 현재 소스 에디터 상에 띄워진 파일에 Previ.. SWIFTUI/Others 2021. 4. 5.

• 

  SwiftUI : AspectRatio / GeometryReader / GeometryProxy AspectRatio / GeometryReader / GeometryProxy SwiftUI View에서 Image를 만들 때, 그것의 내용의 크기에 따라 자체의 크기를 자동으로 불러옵니다. 따라서 사진이 1000x500이면 Image view도 1000x500이 됩니다. 이것은 가끔은 사용자가 원할 때도 있지만, 대부분은 더 낮은 크기로 이미지를 보여주고 싶을 때가 있습니다. 어떻게 이미지를 사용자의 화면 너비에 맞게 만들 수 있는지 알아보도록 하겠습니다. 일단 Example 이라는 이미지를 Assets에 넣어준 후, 간단하게 코드를 입력합니다. struct ContentView: View { var body: some View { VStack { Image("Example") } } } → 프리뷰에.. SWIFTUI/Image 2021. 4. 4.

• 

  SwiftUI : Form (Toggle / disabled / If ) Form 에 대해 알아보도록 합시다. Form (Toggle / Section) setting 또는 inspectors 같이 데이터 입력에 사용되는 컨트롤을 그룹화하기 위한 컨테이너 Form 뷰를 사용하면 Control들을 그룹화 하기 좋습니다. 아래 코드를 보시면 Form을 사용하여 컨트롤을 정리해 주어 화면을 한눈에 보기 좋게 만들어 줍니다. Toggle을 Bool 값으로 정의해주고 Section안에 넣어주면 버튼을 끄고 켤 수 있습니다. struct ContentView: View { @State var username: String = "" @State var isPrivate: Bool = true @State var notificationsEnabled: Bool = false @State p.. SWIFTUI/View layout 2021. 3. 19.

• 

  SwiftUI : Toggle Switch (toggleStyle) Toggle에 대해 알아보도록 합시다 Toggle 기본 코드 @State private var someBinding = true Toggle("SomeText", isOn: $someBinding) SwiftUI의 Toggle()을 사용하면 UIKit의 UISwitch 에서처럼 사용자가 true이거나 false상태 사이를 이동할 수 있습니다. Toggle()의 현재 값을 저장하는 데 사용할 @State Boolean 속성을 정의해야 합니다. 그런 다음 이것을 사용하여 필요에 따라 다른 view를 표시하거나 숨길 수 있습니다. 버튼이 Toggle() 될 때마다if 문을 사용하여 텍스트를 지정해 줄 수 있습니다. struct ContentView: View { @State private var someTog.. SWIFTUI/Controls 2021. 3. 18.