SWIFTUI100

• 

  SwiftUI : ZStack ( Spacer / offset / zIndex ) ZStack Stack에는 가로방향 HStack, 세로방향 VStack, 겹겹히 쌓아있는 ZStack 총 세 가지 종류가 있습니다. 각 스택이 어떻게 사용되는지 알아보기 위해 2개의 사각형을 만들어 결과를 확인해 보겠습니다. HStack { //이 부분만 HStack, VStack, ZStack으로 수정해 봅니다. Rectangle() .fill(Color.green) .frame(width: 150, height: 150) Rectangle() .fill(Color.yellow) .frame(width: 150, height: 150) } ZStack 에서 offset ZStack과 함께 offset을 사용하면 한 뷰를 다른 뷰 안에 배치 할 수 있습니다. 이 기능은 ZStack의 정렬을 제어 할 때 .. SWIFTUI/View layout 2021. 3. 15.

• 

  SwiftUI : FixedSize - View의 크기를 동일한 너비/높이로 FixedSize 에 대해 알아보도록 합시다. FixedSize .fixedSize(horizontal: false, vertical: true) //높이를 동일한 크기로 .fixedSize(horizontal: true, vertical: false) //너비를 동일한 크기로 SwiftUI에서는 frame() 수정자를 fixedSize()와 결합하여 동일한 높이 또는 동일한 너비를 원하는지 여부에 관계없이 동일한 크기의 두 개의 뷰를 쉽게 만들 수 있습니다. 비슷한 수정자인 GeometryReader는 필요하지 않습니다. GeometryReader에 대해 자세히 알아보기 크기를 원하는 각 뷰에 최대 높이 또는 너비를 제공합니다. 그러면 사용 가능한 모든 공간을 채우기 위해 자동으로 늘어납니다. 그런 다.. SWIFTUI/View layout 2021. 3. 14.

• 

  SwiftUI : layoutPriority( ) - 뷰 우선순위 layoutPriority 에 대해 알아보도록 합시다. layoutPriority SwiftUI에서 뷰의 위치와 크기를 계산하는 방법과 .layoutPriority()를 사용하여 해당 프로세스를 변경하는 방법을 알아보도록 하겠습니다. 우선 간단하게 텍스트를 작성해보도록 하겠습니다. struct ContentView: View { var body: some View { Text("서근 개발블로그!!") } } SwiftUI는 사용 가능한 모든 공간을 ContentView에 전달합니다 . ContentView 에는 TextView 인 자식이 하나만 있습니다. ContentView 는 사용 가능한 공간을 TextView에 제안하고 크기를 계산하도록 요청합니다. TextView는 콘텐츠의 크기를 측정하여 Con.. SWIFTUI/Others 2021. 3. 14.

• 

  SwiftUI : ContainerRelativeShape (위젯에서만 사용가능) 본 게시물은 Keith Harrison 게시글을 번역한 자료입니다. ContainerRelativeShape 에 대해 알아보도록 합시다. ContainerRelativeShape SwiftUI에는 둥근 사각형을 만드는 많은 방법을 가지고 있지만, 위젯의 모서리 반경을 맞추고 싶다면 어떻게 해야할까요? Apple에서는 iOS 14부터 ContainerRelativeShape 라는 기능을 추가했습니다. 이 기능은 홈 화면 위젯을 만들 때 특히 중요합니다. 콘텐츠의 모서리 반경을 위젯의 모서리 반경과 조정하도록 제안합니다. Text("Hello World!") .font(.title) .padding() .background(Color.yellow) .cornerRadius(10) 위젯의 제일 작은 크기를 사.. SWIFTUI/Image 2021. 3. 13.

• 

  SwiftUI : trim( ) - Shape의 일부 그리기 (Timer) 목차 trim 에 대해 알아보도록 합시다. Trim SwiftUI에서는 trim() 수정자를 사용하여 모양에 대한 획 또는 채우기의 일부만 그릴 수 있습니다. 이 수정자는 시작 값(from)과 끝 값(to), 둘 다 CGFloat 0 과 1 사이로 저장되는 두 매개 변수를 사용합니다 . .trim(from: 0, to: 0) 예를들어, 반원을 원한다면 아래와 같이 코드를 작성 할 수 있습니다. Circle() .trim(from: 0, to: 0.5) .frame(width: 150, height: 150) 시간이 지날수록 도형이 채워지게 하는 방법 첫번째 화면을 실행 하면 자동으로 timer가 네트워크 요청 또는 기타 사용자 인터페이스와 같이 해당 값을 실제로 변경할 수 있는 방법이 필요합니다. 예를들.. SWIFTUI/Image 2021. 3. 13.

• 

  SwiftUI : DisclosureGroup (Toggle / Slider) DisclosureGroup 에 대해 알아보도록 합시다. DisclosureGroup DisclosureGroup("SomeText", isExpanded: $SomeBinding) { } DisclosureGroup(isExpanded: $SomeBinding, content: { //someAction }, label: { V(H)Stack { //Code here } }) SwiftUI에는 DisclosureGroup(공개 표시기)를 제공하고 내부에 콘텐츠를 포함 하는 전용 View가 있습니다. 이것은 콘텐츠가 현재 표시되는지 여부를 결정하는 일종의 Bool 속성에 바인딩 될 수 있지만 펼칠 때 표시 할 많은 뷰를 내부에 배치 할 수 있습니다. 다시말해, DisclosureGroup View는 콘텐.. SWIFTUI/View layout 2021. 3. 10.

• 

  SwiftUI : List (ListStyle / onDelete / onMove) 목차 List에 대해 알아보도록 합시다. List List는 단일 열에 정렬 된 데이터 행을 표시하는 컨테이너입니다. struct ContentView: View { var body: some View { List { Text("첫번째 리스트") Text("두번째 리스트") Text("세번째 리스트") } } } 정적 콘텐츠 List의 생성자에 원하는 뷰를 전달하면 하나씩 각 row에 담아 표현합니다. 여기서 뷰 하나는 row 하나에 해당합니다. TIP UIKit에서는 UITableView에서 내용을 표시할 뷰를 셀이라고 불렀다면, SwiftUI에서는 row라고 표현합니다. 다음과 같이 텍스트가 아닌 다른 이미지 뷰를 넣어 봐도 동일하게 List를 작성 할 수 있습니다. List { Text("List".. SWIFTUI/View layout 2021. 3. 9.

• 

  SwiftUI : Map View MapView 에 대해 알아보도록 합시다. Map View SwiftUI의 MapView를 통해 화면에서 지도를 사용할 수 있습니다. 시작하려면 먼저 지도에 표시되는 좌표를 추적할 수 있는 일종의 State를 만들어야 합니다. MKCoordinateRegion 를 사용해야 하고, latitude/longitude 에 좌표를 입력해주면 원하는 위치를 MapView가 실행될 때 표시됩니다. TIP 좌표를 찾고 싶다면 이 사이트 에서 확인 할 수 있습니다. 우선 MapKit을 import 해주고 @State변수를 아래와 같이 추가해줍니다. //서울 좌표 @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: .. SWIFTUI/WebView 2021. 3. 8.

• 

  SwiftUI : TabView / TabViewStyle 목차 TabView 에 대해 알아보도록 합시다. TabView SwiftUI는 UIKit의 UITabBarController와 동등한 기능을 가진 TabView를 제공합니다. 사용자가 화면 하단의 막대를 사용하여 여러 View를 전환할 수 있습니다. 기본 형식으로 각 항목에 이미지와 제목을 제공해야 하며, 프로그래밍 방식으로 활성화되는 탭을 제어하려는 경우 선택적으로 태그를 추가해야 합니다. 간단하게 예제를 들어보도록 하겠습니다. 탭 표시 줄 인터페이스 만들기 첫번째 우선 GreenTabView, RedTabView, BlueTabView 라는 새로운 SwiftUI 파일을 만들어주고 각 이름에 맞는 색으로 아래와 같이 코드를 작성합니다. struct GreenTabView: View { var body:.. SWIFTUI/View layout 2021. 3. 7.

• 

  SwiftUI : Redacted ( onAppear / disabled ) 콘텐츠 모자이크 Redacted 에 대해 알아보겠습니다. Redacted(reason: .placeholder) iOS 14에서 SwiftUI에는 모든 콘텐츠를 redact 하는 새로운 한정자(modifier)가 있습니다. 새로운 view 한정자가 있는 모든 view 에 .redacted(reason:) 을 적용할 수 있습니다. 이 한정자에는 이유 한정자(reason modifier)가 필요한데, 이는 이 redact 작업의 이유를 SwiftUI에 알려줍니다. 현재 Apple은 한 가지 reason modifier 만 제공하고 있습니다. (reason: .placeholder) Text("Hello, SwiftUI!") .redacted(reason: .placeholder) 이름에서 알 수 있듯이 .placeholde.. SWIFTUI/Others 2021. 3. 7.

• 

  SwiftUI : #2 MVVM의 간단한 예제 저번 게시글에서 MVVM이 무엇이고 어디에 쓰는지 알아보았습니다. 이제 Xcode에서 MVVM을 어떻게 하용하는지 간단한 예제를 통해 알아보려고 합니다. MVVM의 간단한 예제 새로운 Xcode 프로젝트를 생성하여 시작하도록 하겠습니다. 일반적으로 아래와 같이 생성하게 되면 Model 👉🏻 View 로 직접적으로 화면을 구성해주게 됩니다. 아래 코드를 보면 age가 Int로 정해져있습니다. //Models struct Person { var name: String var age: Int } //Views struct ContentView: View { let seogun = Person(name: "서근", age: 26) var body: some View { VStack { Text(seogun.na.. SWIFTUI/Grammar 2021. 2. 17.

• 

  SwiftUI : #1 디자인 패턴 과 MVVM (Design Patterns and MVVM) Design Patterns 디자인 패턴은 소프트웨어 디자인의 일반적인 문제에 대한 재사용이 가능한 해결책입니다. 개발에서 비슷한 문제를 해결하는데 일종의 템플릿이나 개발패턴이라고 할 수 있습니다. 느슨하게 결합된 코드를 작성하는데 도움이되므로 번거로움 없이 코드의 구성요소를 변경하거나 교체할 수 있습니다. 이 패턴을 적용하면 코드의 가독성, 효율성, 디버깅, 협업 등이 쉬워집니다. ⭐️디자인 패턴을 사용하여 모든 종류의 언어에 모든 종류의 프레임워크를 사용 할 수 있습니다. 이 과정에서 사용되는 MVVM 에 대해 알아보겠습니다. MVVM MVVM의 의미는 다음과 같습니다. 예를들어 고객 정보 / 쇼핑카드 정보, 또는 기타정보가 있는Model 이 있고, iPhone 또는 Android 화면인 View 가.. SWIFTUI/Grammar 2021. 2. 15.

• 

  SwiftUI : #2 ObservedObject '클릭시 값 증가' ObservedObject에 관한 첫 번째 게시글을 보시려면 여기를 클릭해주세요. ObservedObject 저번 게시물에서는 ObservedObject를 이용해서 Timer를 만들어 봤습니다. 이번에는 다른 예시를 통해서 한번 더 확실하게 배워보도록 하겠습니다. :) 저번 timer를 만들 때처럼 새로운 Swift 파일을 만들어주고 'UserSetting'으로 정해줬습니다 //UserSetting View import Foundation import SwiftUI import Combine class UserSetting: ObservableObject{ @Published var score: Int = 0 } score을 정수 0으로 정해줬고, 버튼을 클릭할 때마다 score이 올라가도록 하려고 합니.. SWIFTUI/Grammar 2021. 2. 14.

• 

  SwiftUI : #1 ObservedObject '간단한 타이머 만들기' 저번 게시물에서 다뤘던 내용이지만 따로 자세히 알아보도록 하겠습니다. @ObservedObject = 복잡한 프로퍼티(여러 프로퍼티나 메서드가 있거나, 여러 view에서 공유할 수 있는 커스텀 타입이 있는 경우) String이나 integer같은 간단한 로컬 프로퍼티 대신 외부 참조 타입을 사용한다는 점을 제외하면 @State와 매우 유사. @ObservedObject와 함께 사용하는 타입은 ObservableObject프로토콜을 따라야함. @ObservedObject가 데이터가 변경되었음을 view에 알리는 방법은 여러 가지가 있지만 가장 쉬운 방법은@Published 프로퍼티 래퍼를 사용하는 것. = SwiftUI에 view reload를 트리거. ObservedObject를 이용해서 간단한 Time.. SWIFTUI/Grammar 2021. 2. 14.

• 

  SwiftUI : State and Binding '클릭시 화면 변경' 앞에서 @State와 @Binding을 배워봤으니 간단하게 프로젝트를 만들어서 활용해보도록 하겠습니다. 클릭시 화면 변경 뷰 생성 우선 화면에 표시될 뷰를 따로 만들어 주겠습니다. //musicPlay View import SwiftUI struct Episode { let song: String let singer: String let track: String } struct musicPlay: View { let episode = Episode(song: "Dynamite", singer: "BTS", track: "DayTime Version") @State var isPlaying = false var body: some View { VStack { Text(self.episode.song) .f.. SWIFTUI/Grammar 2021. 2. 12.