SwiftUI 에서 많이 사용되는 @State는 보통 내부에서 사용하기 떄문에 초기값을 할당하고 작업하는 경우가 많습니다. 하지만 외부에서 주입해서 사용할 경우 일반 문자열을 대입하면 에러가 발생합니다. 스위프트UI 에서 @State 값을 동적으로 할당하는 방법을 알아보겠습니다. 다음 코드를 작성해서 초기값을 설정하려면 다음과 같은 에러가 발생합니다. struct PasscodeView: View { @State private var passcode: String init(code: String) { self.passcode = code }}Error: Cannot assign value of type 'String' to type 'State' "String 문자열을 State 타입에 할당 ..
스위프트 UI를 하면서 느끼는 장단점이 많이 있지만 최대의 장점을 꼽으라면 아마도 프리뷰로 개발 화면을 실시간으로 확인할 수 있다는 점일 것 같습니다. 프로젝트가 점점 커질 수록 빌드해서 확인하는 시간이 늘어나기 마련인데 스위프트 UI로 아직까지 커다란 프로젝트를 진행해본적이 없어서 모르겠으나 화면 개발에 있어서 Preview는 정말 유용한 것은 사실입니다. 그런데 다른 컴퓨터 환경에서 코드를 받아 진행하려고 하면 프리뷰 크래시가 많이 일어나는 것을 확인할 수 있습니다. 코드에 문제로 크래쉬가 일어날 수도 있지만 때로는 원인을 알 수 없이 문제가 생기는 경우도 있습니다. 보통 뷰 모델을 사용해서 작업하면서 데이터를 프리뷰에 제대로 전달하지 않아서 발생하는 문제는 작업자의 문제이니 그 밖에 해결 방법을 알..
iOS 다크모드 아이폰 개발시 다크모드(Dark Mode)를 사용하면 디자인에 많은 제약이 생깁니다. 그래서 개인적으로는 처음에는 Light 모드로 만들고 앱을 다 만든 뒤 다크모드를 적용하는 것이 더 편리한 것 같습니다. ▼ Info.plist 파일을 열어서 Appearance 값을 추가하고 값을 Light로 지정하면 라이트모드로만 앱이 실행됩니다. 키값은 UIUserInterfaceStyle 입니다. UIUserInterfaceStyle Light FirebaseAppDelegateProxyEnabled UILaunchScreen UIImageName logo ITSAppUsesNonExemptEncryption UIBackgroundModes remote-notification
SwiftUI에서 UIKit을 사용해 화면을 표현할 수 있다는 것은 스위프트 UI 개발을 하시는 분이라면 대부분 알고 계실겁니다. 이 UIView 또는 ViewController를 프리뷰(Preview)를 이용해서 띄워보겠습니다. ▼ 다음과 같이 ViewController를 하나 생성합니다. 만약 PreviewProvider 프로토콜을 구현한 preivews 반환 값이 View 타입이 아니라면 보시다시피 에러가 납니다. UIKit의 뷰 컨트롤러를 반환하기 때문입니다. ▼ 이제 Preview 를 extension해서 UIViewControllerRepresentable 프로토콜을 구현합니다. 이때 필요한 함수가 makeUIController, updateUIViewController입니다. updateUI..
UIKit과 SwiftUI 통합하기 SwiftUI 이전에는 iOS 개발을 위해 UIKit을 사용하였습니다. SwiftUI로 화면을 개발한다고 해도 UIKit을 사용할 수 밖에 없는데요. SwiftUI 화면을 UIKit에서 사용하려면 UIHostingController를 사용해서 쉽게 사용할 수 있는 것처럼 SwiftUI에서는 UIViewRepresentable이라는 프로토콜을 구현함으로써 UIView를 쉽게 SwiftUI에 반영할 수 있습니다. ▼ UIViewRepresentable 프로토콜은 UIKit을 SwiftUI에서 사용하기 위해 SwiftUI 형태의 화면으로 만들기 위한 프로토콜입니다. 다음과 같이 일반 UIKit 화면을 UIViewRepresentable를 구현을 통해 SwiftUI 에서 손쉽..
▼ 스위프트 UI는 선언형 UI를 사용합니다. 예를 들면 다음과 같이 Color.red 에 .ignoresSafeArea() 라는 ViewModifier를 추가해서 화면에 SafeArea를 포함해서 전체화면을 빨간색으로 채울 수 있습니다. 마찬가지로 .frame을 이용해서 화면 사이즈를 변경할 수도 있습니다. ▼ 이번에는 ZStack을 사용해서 Color와 Text를 중첩해서 표현하겠습니다. ZStack의 alignment를 .bottomTrailing 옵션으로 Text를 우측 하단에 포함시킵니다. Text에도 역시 font, foregroundColor 와 같은 다양한 modifer가 추가되어있습니다. 때문에 코드가 복잡해지고 재사용하기 힘든 코드가 됩니다. ▼ ViewModifier를 확장한 Wate..
▼ 텍스트 필드를 만들기 위해서 다음과 같이 TextField 요소를 추가합니다. 첫 번째 파라미터는 Placeholder를 의미하며 두 번째 파라미터는 실제 입력 텍스트로 Binding 값이 들어갑니다. 때문에 @State 지시자를 통해서 새로운 변수를 추가합니다. @State는 내부적으로만 사용하기 때문에 private로 선언하는 것이 기본이며 값은 빈 문자열로 해줍니다. ▼ 텍스트를 입력하면 첫 글자가 대문자인 것을 알 수 있습니다. textInputAutocapitalization 를 .never로 설정하면 대문자가 아닌 소문자로 시작합니다. 그리고 틀린 문자에 대해 자동으로 수정해주는 기능이 있는데 사용자가 불편할 수 있습니다. .disableAutocorrection(true) 로 방지할 수 ..
VStack, HStack, ZStack UIKit을 사용해서 개발을 할 때에도 Stack은 매우 유용하게 사용됩니다. 오토레이아웃을 사용하든 SnapKit을 사용하던 반드시는 아니지만 Stack을 사용하면 편리하게 UI 레이아웃을 만들 수 있습니다. 하지만 SwiftUI 개발을 하게 되면 Stack을 빈번하게 사용합니다. 특히 직관적이고 레이아웃을 바로 변경하는 모습을 볼 수 있어서 쉽게 레이아웃 구성이 가능합니다. 레이아웃의 가장 기본적인 형태인 Stack에 대해서 알아보겠습니다. ▼ 두 개의 Rectagle을 만들고 VStack으로 감싸면 다음과 같이 정중앙에 2개의 박스를 볼 수 있습니다. ▼ 마찬가지로 VStack 대신에 HStack을 사용하면 다음과 같이 가로로 배치된 UI를 볼 수 있습니다...
Localizable.string 스위프트UI에서 다국어 처리를 해보도록 하겠습니다. 기존 오브젝티브 C나 Swift에서 하던 방식보다 훨씬 간단하게 처리할 수 있는 장점이 있습니다. 다음과 같이 .enviroment 옵션을 줘서 강제로 locale을 한국(ko)로 지정할 수도 있습니다. 기존 스토리 보드 개발 방식에 비해서 테스트 할 때 굉장히 유리합니다. 기존에는 자간이나 텍스트 사이즈를 및 개행을 확인해보기 위해서 일일히 실행해봐야 했는데 정말 획기적입니다. 다국어 처리하기 ▼ 우선 문자열 파일을 만들기 위해서 새로 파일을 하나 만듭니다. 프로젝트 파일을 오른쪽 버튼을 눌러서 New File... 버튼을 누릅니다. ▼ 아래쪽으로 조금 스크롤 하다보면 String File 을 확인할 수 있습니다. 선..
▼ 스위프트 UI를 사용할 때 이미지를 가져와 사이즈를 화면에 맞게 조절하고 원 모양의 이미지를 만드는 방법을 알아보겠습니다. 이미지를 사용하는 방법은 아주 간단한데 사용하는 패턴은 여러가지가 될 수 있으니 알아두는게 좋습니다. 우선 예제를 실행하기 전에 Assets 폴더에 img 라고 아무 이미지나 하나 넣어줍니다. ▼ 다음과 같이 VStack을 하나 만들고 그 안에 Image를 하나 새로 만들어줍니다. 보는 것과 같이 이미지가 화면이 꽉찬 것을 볼 수 있습니다. 기본으로 이미지를 추가하게 되면 높이를 기준으로 좌우가 넓게 표현됩니다. ▼ 이번에는 .resizable() 을 추가해서 화면을 폭에 맞추어보겠습니다. 화면이 아래위로 꽉차서 비율이 깨지는 것을 볼 수 있습니다. ▼ 이제 .aspectRati..
아이폰을 개발하다보면 스크롤 뷰를 많이 사용합니다. 제한된 영역에서 넓은 화면을 구현하기 위해서 입니다. 오토레이아웃을 사용할 경우 스크롤 뷰를 구현하기가 조금 까다롭습니다. Xcode가 버전업 되면서 현재는 ContentView와 FrameView에 오토레아이웃을 걸고 사용합니다. 하지만 SwiftUI 에서는 아주 쉽게 스크롤 뷰를 만들수 있습니다. 대신 조금 낮설긴합니다. GeometryReader를 이용해서 3개의 화면을 만들고 스크롤 뷰로 페이징하는 방법을 알아보겠습니다. 스크롤 뷰로 페이지 뷰 만들기 ▼ 아래 코드를 이용해서 페이징 처리가 가능합니다. colors 변수로 화면에 포함될 색상을 배열로 만듭니다. GeometryReader의 proxy 속성으로 각 화면의 화면 크기를 구합니다. .h..