김종권의 iOS 앱 개발 알아가기

명령형 vs 선언형 코드 작성의 흐름명령형 프로그래밍"어떻게" UI를 업데이트할지 명시적으로 작성let label = UILabel()label.text = "Hello, World!"label.textColor = .bluelabel.frame = CGRect(x: 0, y: 0, width: 200, height: 50)view.addSubview(label) 선언형 프로그래밍좀 더 코드가 뷰의 형태와 닮은 형태로 작성struct ContentView: View { var body: some View { Text("Hello, World!") .foregroundColor(.blue) .frame(width: 200, height: 50) ..

UIStackView의 padding 보통 UIStackView를 사용하면 UIStackView안의 아이템들 spacing은 setCustomSpacing(_:after:) 메소드를 사용하여 구현이 가능 stackView.setCustomSpacing(16, after: label1) 만약 UIStackView에 추가한 아이템들과 UIStackView간의 padding을 아래처럼 주고 싶은 경우? UIStackView에 padding 적용방법 UIStackView의 isLayoutMarginsRelativeArrangement를 true로 설정 이 프로퍼티는 margin을 사용하겠다는 플래그값을 의미 (default가 false이며 false이면 margin적용 x) 해당 옵션은 UIStackView에만..

1. FlexLayout과 PinLayout 사용 방법 - UIStackView 개선, 속도 향상, 기능 추가, 선언형 2. FlexLayout과 PinLayout 사용 방법 - 여백(margin, padding), 정렬(alignItems, justifyContent) 3. FlexLayout과 PinLayout 사용 방법 - 특정 뷰(Cell, scrollView), 기타(grow, shrink) 예제로 잘성될 코드 준비 import UIKit import FlexLayout import PinLayout class ViewController: UIViewController { private let container = UIView() private let label1: UILabel = { let ..

가장 일반적인 List 형태 List 하위에 NavigationLink가 있는 형태 import SwiftUI struct ContentView: View { var items = (0...100).map(String.init).map(SomeModel.init) var body: some View { NavigationView { List(items){ item in NavigationLink( destination: { Text(item.val) }, label: { Text(item.val) } ) } .navigationTitle("List 예제") } } } struct SomeModel: Identifiable { let val: String var id: String { val } } 오른쪽..

App이란? Star라는 앱을 만들면 자동으로 StarApp.swift파일과 ContentView.swift파일이 자동으로 생성 App을 상속받고 있는 StarApp을 확인 import SwiftUI @main struct StarApp: App { var body: some Scene { WindowGroup { ContentView() } } } App이란? 앱의 구조와 동작을 나타내는 타입 App 위에는 @main이라는 어노테이션을 사용하여 앱의 entry point를 명시하여 같이 사용 cf) SwiftUI를 공부하면서 사용할 유용한 단축키 (document 오픈 + 검색): control + cmd + option + / body라는 computed property를 이용하여 앱의 content..

Stack 뷰들을 나열할때 사용 뷰 간의 간격 설정에 용이 Stack 사용 방법 Preview에서 cmd + 클릭 > Embed in Stack을 사용해도 되지만, 코드에서 cmd + 클릭하여 생성도 가능 단축키로, cmd + shift + A로 오픈 Text 추가: shift + cmd + L 라이브러리 > Text struct ContentView: View { var body: some View { VStack { Text("Hello, world!") .font(.title) Text("sub text") } } } VStack의 생성자에서 alignment와 spacing 설정이 가능 struct ContentView: View { var body: some View { VStack(alignm..

padding 주는 방법 보통 stackView에 label을 넣을때 UIView를 넣고 그 안에 다시 Label을 넣어서 layout을 조절할 수 있지만, UILabel에 따로 padding값을 주어서 사용 가능 Padding 주는 방법 - drawText(in:)에서 padding값 설정 drawText(in:) 메소드 활용: label의 text값이 그려질때 rect에 관한 값을 수정하고 싶을때 해당 메소드를 override하여 사용 사용 방법은 super.drawText(in:)에 변경된 rect값을 인수로 주어 반영 super를 사용 class BasePaddingLabel: UILabel { private var padding = UIEdgeInsets(top: 16.0, left: 16.0,..

스위프트에서의 layoutMagins 개념 현재 뷰의 경계와 content와의 여백 개념 혼동 주의: 현재 뷰 경계와 superview와의 여백이 아님을 주의 storyboard에서 layoutMargins 확인 방법 Editor > Canvas >Layout Rectangles layout 설정 시 "Constrain to margins" 옵션을 체크한 후 autolayout적용 시 view 내부에 margin값을 고려한 배치 cf) code에서 layoutMarginsGuide 주는 방법: layoutMarginsGuide. 으로 접근 imageView.leadingAnchor.constraint(equalTo: layoutMarginsGuide.leadingAnchor) 내부 label이 margi..