SwiftUI8

• 

  SwiftUI) Layout_Practice_with_Stacks_#3 ✏️ List List란 단일 열에 정렬 된 데이터 행을 표시하는 컨테이너이다. UIKit에서 자주 사용한 TableView, CollectionView가 SwiftUI에선 List를 사용해 대체된다.List의 생성자에 원하는 뷰를 전달하면 각 row에 담아 표현한다. UIKLit에서 Cell이라 불리는 것이 SwiftUI에선 row라고 표현한다. List { Section { Text("마이 리스트") Image(systemName: "person.fill") } Section { ForEach(1.. 동적 컨텐츠를 표현하는 두가지 방법 중 하나, Range타입의 값을 넘겨준다. 세번째 Section 동적 컨텐츠, RandomAccessCollection 동적 컨텐츠를 표현하는 두번째 방법으.. SwiftUI 2023. 3. 29.

• 

  SwiftUI) Layout_Practice_with_Stacks_#2 ✏️ MyCard struct MyCard: View { var icon: String var title: String var start: String var end: String var bgColor: Color var body: some View { HStack(spacing: 20) { Image(systemName: icon) .font(.system(size: 40)) .foregroundColor(.white) VStack(alignment: .leading, spacing: 0) { Text(title) .fontWeight(.bold) .font(.system(size: 23)) .foregroundColor(Color.white) Spacer().frame(height: 5) Text(".. SwiftUI 2023. 3. 29.

• 

  SwiftUI) Layout_Practice_with_Stacks_#1 지금까지 배운 내용들을 사용하여 레이아웃 연습을 한다. 스택으로 시작해 스택으로 끝난다는 느낌을 많이 받았으며, SwiftUI에서 스택의 중요성을 알게되었다. ✏️ MyProjectCard VStack(alignment: .leading, spacing: 0) { Text("정대리 SwiftUI 수강하기") .font(.system(size: 23)) .fontWeight(.black) .padding(.bottom, 5) Text("10 AM - 11 AM") .foregroundColor(.secondary) Spacer().frame(height: 20) HStack { Image("1") .resizable() // frame에 맞게끔 이미지 크기 조절 .frame(width: 50, height.. SwiftUI 2023. 3. 29.

• 

  SwiftUI) Stacks 스택은 3가지로 나눌 수 있다. 수직(Vertical)으로 View를 쌓는 VStack, 수평(Horizontal)으로 View를 쌓는 HStack 그리고 동일한 수평과 수직 값을 갖지만 View를 겹쳐서 쌓아 올리는 ZStack이 있다. ✏️ VStack VStack(alignment: .trailing, spacing: 0) { Text("글자") .font(.system(size: 30)) .fontWeight(.heavy) Rectangle() .frame(width: 100, height: 100) .foregroundColor(.red) Rectangle() .frame(width: 100, height: 100) .foregroundColor(.yellow) Spacer() .frame(he.. SwiftUI 2023. 3. 29.

• 

  SwiftUI) Image 가운데 원형의 이미지가 있는 뷰가 CircleImageView이고, 이를 ContentView에서 사용하여 메인화면을 구성했다. ✏️ CircleImageView struct CircleImageView: View { var body: some View { Image("hoonImage") // SwiftUI에서는 파라미터 없이 이미지의 이름만 넣어주면 된다. .resizable() // 이미지를 화면의 사이즈에 맞춘다. .scaledToFill() // aspectRatio와 동일 .frame(width: 300, height: 300) // 이미지 크기 조절 .clipShape(Circle()) // 이미지를 지정한 모양으로 자른다. .shadow(color: .gray, radius: 10, x: .. SwiftUI 2023. 3. 29.

• 

  SwiftUI) Text import SwiftUI struct ContentView: View { static let dateFormat: DateFormatter = { let formatter = DateFormatter() formatter.dateFormat = "YYYY년 M월 d일" // formatter.dateStyle = .long return formatter }() private var today = Date() private var trueOrFalse: Bool = false private var number: Int = 123 var body: some View { VStack { Text("Lorem Ipsum is simply dummy text of the printing and typesetti.. SwiftUI 2023. 3. 29.

• 

  SwiftUI) WebView ✏️ UIViewRepresentable import SwiftUI import WebKit // UIKit의 UIView를 사용할 수 있도록 한다. // 만약 UIKit의 UIViewController를 사용하고싶다면 UIViewControllerRepresentable을 사용한다. // MyWebview는 ContentView(메인뷰)에서 사용하는 View이다. struct MyWebview: UIViewRepresentable { var urlToLoad: String // UIView 만들기 func makeUIView(context: Context) -> WKWebView { // unwrapping guard let url = URL(string: self.urlToLoad) else { re.. SwiftUI 2023. 3. 29.

• 

  SwiftUI? ✏️SwiftUI WWDC 2019에서 발표한 프레임워크 선언형 내가 무엇을 원하는지 UI구성을 전달하면 SwiftUI 프레임워크가 알아서 처리를 해준다. .font, .background와 같은 수식어를 통해 뷰를 변경하는게 아니라 새로운 타입의 뷰를 반환한다. preview 시뮬레이터로 결과를 보는게 아니라 캔버스 영역의 preview를 통해 결과물을 실시간으로 확인할 수 있어 편리하다. ✏️SwiftUI의 4가지 원칙 선언형 위에서 언급한 것처럼 SwiftUI 프레임워크는 선언형으로 구현이 되어있다. 자동화 SwiftUI 프레임워크가 자동으로 해결을 해주고 있어 따로 명령형과 다르게 일일이 설정을 안해주어도 된다. 특히 레이아웃 부분에서 큰 차이점을 느꼈다. 조합 큰 뷰를 하나의 기능을 가진 작은 .. SwiftUI 2023. 3. 29.