▼ 텍스트 필드를 만들기 위해서 다음과 같이 TextField 요소를 추가합니다. 첫 번째 파라미터는 Placeholder를 의미하며 두 번째 파라미터는 실제 입력 텍스트로 Binding 값이 들어갑니다. 때문에 @State 지시자를 통해서 새로운 변수를 추가합니다. @State는 내부적으로만 사용하기 때문에 private로 선언하는 것이 기본이며 값은 빈 문자열로 해줍니다. ▼ 텍스트를 입력하면 첫 글자가 대문자인 것을 알 수 있습니다. textInputAutocapitalization 를 .never로 설정하면 대문자가 아닌 소문자로 시작합니다. 그리고 틀린 문자에 대해 자동으로 수정해주는 기능이 있는데 사용자가 불편할 수 있습니다. .disableAutocorrection(true) 로 방지할 수 ..
Lottie Animation ▼ 모바일 개발시 많이 사용되는 Lottie 애니메이션을 SwiftUI에서 구현하는 방법을 알아보겠습니다. 우선 새로운 패키지를 추가하기 위해서 로티를 사용하기 위해서 다음 주소를 복사합니다. (Swift Package를 사용하지 않고 CocoaPods을 사용해도 됩니다.) https://github.com/airbnb/lottie-ios.git ▼ Xcode의 File -> Add Packages... 메뉴를 통해 새로운 패키지를 추가합니다. ▼ 우측 상단에 검색창에 복사한 주소를 넣고 엔터를 치면 lottie-ios 패키지를 찾을 수 있습니다. 우측 하단에 Add Package 버튼을 눌러 패키지를 추가합니다. ▼ 로티 애니메이션 이미지를 다운로드 받습니다. 해당 서비스..
VStack, HStack, ZStack UIKit을 사용해서 개발을 할 때에도 Stack은 매우 유용하게 사용됩니다. 오토레이아웃을 사용하든 SnapKit을 사용하던 반드시는 아니지만 Stack을 사용하면 편리하게 UI 레이아웃을 만들 수 있습니다. 하지만 SwiftUI 개발을 하게 되면 Stack을 빈번하게 사용합니다. 특히 직관적이고 레이아웃을 바로 변경하는 모습을 볼 수 있어서 쉽게 레이아웃 구성이 가능합니다. 레이아웃의 가장 기본적인 형태인 Stack에 대해서 알아보겠습니다. ▼ 두 개의 Rectagle을 만들고 VStack으로 감싸면 다음과 같이 정중앙에 2개의 박스를 볼 수 있습니다. ▼ 마찬가지로 VStack 대신에 HStack을 사용하면 다음과 같이 가로로 배치된 UI를 볼 수 있습니다...
스위프트 UI 토글 스위치 SwiftUI에서 많이 사용하는 스위치와 토글 버튼에 대해서 알아보겠습니다. UIKit에서도 설정과 같은 곳에서 많이 쓰이는 토글 스위치는 스위프트 UI에서 정말 간단하게 사용하고 바인딩된 값도 손쉽게 알 수 있습니다. 때문에 이전에 UIKit을 통한 아이폰 개발보다 훨씬 편리할 것 같습니다. 스위프트 UI에서는 총 3가지 토글 버튼 스타일을 구현할 수 있습니다. 버튼 체크박스 (macOS 전용) 스위치 ▼ 간단하게 토글 스위치를 추가해봤습니다. Toggle 안에 Label을 넣어서 표현할 수 있습니다. padding()을 주어서 여백을 주었습니다. ▼ 다음은 위에 코드에서 토글 스타일만 버튼(.button)으로 변경한 경우입니다. On/Off 할 수 있는 버튼을 만들 수 있습..
▼ 다음과 같이 Person 데이터 구조체와 staff 라는 Person 배열을 생성합니다. 그리고 view에 ForEach 구문을 통해서 리스트를 표현해줍니다. 그럼 간단한 리스트를 확인할 수 있습니다. ▼ 이제 VStack와 HStack을 이용해서 이름뿐만 아니라 전화번호 그리고 전화기 모양의 아이콘을 리스트로 표현합니다. 그밖에 옵션으로 텍스트 색상과 폰트를 설정해줍니다. ▼ 위의 코드도 잘 동작하긴 하지만 view 안쪽에 많은 코드가 들어가서 보기가 좋지 않습니다. 다음과 같이 PersonRowView 라는 해당 Row를 표현하는 새로운 뷰를 만들어줍니다. ▼ 이제 뷰를 재사용해서 좀 더 단순하게 표현할 수 있습니다. ▼ List에 그룹을 만들어보겠습니다. 우선 더 이상 staff 배열은 사용하지..
테이블 뷰에서 아이템을 추가하고 삭제 이동하는 기능은 많이 사용되는 기능입니다. 스위프트 UI에서는 List를 사용해서 보다 간단하게 이 기능을 구현할 수 있습니다. 이를 위해서는 NavigationView를 사용해야 하며 onMove, onDelete 함수를 사용합니다. 또한 토글 성격의 EditButton은 toolbar에 포함되며 macOS는 사용할 수 없고 iOS 전용입니다. ▼ 우선 해당 리스트에 사용될 데이터를 정의합니다. 총 5개의 데이터를 배열로 생성했습니다. ▼ 이제 NavigationView를 생성하고 그 안에 List를 추가합니다. ForEach 구문을 이용해서 배열에 있는 Text를 추가합니다. ▼ 리스트가 추가되었다면 이제 navigationTitle을 추가해주고 toorbar에 ..
Localizable.string 스위프트UI에서 다국어 처리를 해보도록 하겠습니다. 기존 오브젝티브 C나 Swift에서 하던 방식보다 훨씬 간단하게 처리할 수 있는 장점이 있습니다. 다음과 같이 .enviroment 옵션을 줘서 강제로 locale을 한국(ko)로 지정할 수도 있습니다. 기존 스토리 보드 개발 방식에 비해서 테스트 할 때 굉장히 유리합니다. 기존에는 자간이나 텍스트 사이즈를 및 개행을 확인해보기 위해서 일일히 실행해봐야 했는데 정말 획기적입니다. 다국어 처리하기 ▼ 우선 문자열 파일을 만들기 위해서 새로 파일을 하나 만듭니다. 프로젝트 파일을 오른쪽 버튼을 눌러서 New File... 버튼을 누릅니다. ▼ 아래쪽으로 조금 스크롤 하다보면 String File 을 확인할 수 있습니다. 선..
▼ 전체코드 ▼ LINE 6 : 그냥 텍스트를 노출합니다. ▼ LINE 9~10 : 텍스트의 사이즈를 변경합니다. ▼ LINE 13~14 : 텍스트의 사이즈와 스타일(.bold)을 변경합니다. ▼ LINE 27~28 : 텍스트의 사이즈와 스타일(.thin)을 변경합니다. .bold .semibold .heavy .light .regular .thin .ultraLight .black ▼ LINE 37~38 : 텍스트의 사이즈와 스타일 그리고 디자인을 변경합니다. .default .monospaced .reounded .sefif ▼ LINE 54~55 : 커스텀 텍스트 스타일을 변경합니다. .largeTitle .title .title2 .title3 .headline .subheadline .body ..
▼ 스위프트 UI를 사용할 때 이미지를 가져와 사이즈를 화면에 맞게 조절하고 원 모양의 이미지를 만드는 방법을 알아보겠습니다. 이미지를 사용하는 방법은 아주 간단한데 사용하는 패턴은 여러가지가 될 수 있으니 알아두는게 좋습니다. 우선 예제를 실행하기 전에 Assets 폴더에 img 라고 아무 이미지나 하나 넣어줍니다. ▼ 다음과 같이 VStack을 하나 만들고 그 안에 Image를 하나 새로 만들어줍니다. 보는 것과 같이 이미지가 화면이 꽉찬 것을 볼 수 있습니다. 기본으로 이미지를 추가하게 되면 높이를 기준으로 좌우가 넓게 표현됩니다. ▼ 이번에는 .resizable() 을 추가해서 화면을 폭에 맞추어보겠습니다. 화면이 아래위로 꽉차서 비율이 깨지는 것을 볼 수 있습니다. ▼ 이제 .aspectRati..
아이폰을 개발하다보면 스크롤 뷰를 많이 사용합니다. 제한된 영역에서 넓은 화면을 구현하기 위해서 입니다. 오토레이아웃을 사용할 경우 스크롤 뷰를 구현하기가 조금 까다롭습니다. Xcode가 버전업 되면서 현재는 ContentView와 FrameView에 오토레아이웃을 걸고 사용합니다. 하지만 SwiftUI 에서는 아주 쉽게 스크롤 뷰를 만들수 있습니다. 대신 조금 낮설긴합니다. GeometryReader를 이용해서 3개의 화면을 만들고 스크롤 뷰로 페이징하는 방법을 알아보겠습니다. 스크롤 뷰로 페이지 뷰 만들기 ▼ 아래 코드를 이용해서 페이징 처리가 가능합니다. colors 변수로 화면에 포함될 색상을 배열로 만듭니다. GeometryReader의 proxy 속성으로 각 화면의 화면 크기를 구합니다. .h..