일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- Clean Code
- collectionview
- UITextView
- uiscrollview
- Protocol
- clean architecture
- swiftUI
- Observable
- 스위프트
- 애니메이션
- HIG
- 리팩토링
- ios
- tableView
- 클린 코드
- combine
- MVVM
- swift documentation
- Human interface guide
- rxswift
- 리펙터링
- ribs
- uitableview
- map
- RxCocoa
- SWIFT
- UICollectionView
- Xcode
- Refactoring
- 리펙토링
- Today
- Total
목록iOS 응용 (SwiftUI) (57)
김종권의 iOS 앱 개발 알아가기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bbRs1N/btsLjdGvBXr/1GJpTCqCbw1OKF2lHjCNI1/img.png)
LayoutPriority 개념layoutPriority값이 크면, 뷰가 다른 뷰보다 커질 수 있는 힘이 큼기존 swift에서 ContentHuggingPriority, ContentCompressionResistancePriority 두 개를 두어서 헷갈렸던 것을 SwiftUI에서는 layoutPriority하나로 표현HStack에 두 개 의 텍스트가 있을 때 예시참고) 일반적으로는 HStack이 있을때 두 개의 뷰에는 동일한 width로 할당되지만 띄어쓰기가 있으면 내부적인 개행 처리 때문에 아래처럼 균등하지는 않게끔 배치됨struct ContentView: View { var body: some View { HStack { Text("This is a moder..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dSLvjc/btsKSSYbExs/rc7nRfT4Yrf46skv5Dlq71/img.png)
모두 알고 있는 클로저 의미 돌아보기다른 부분으로 전달할 수 있는 독립적인 코드 블록{ (매개변수) -> 반환형 in 실행 코드} ex) 클로저 예시 - 기능 실행let sayHello = { (name: String) -> String in return "Hello, \(name)!"}sayHello("Jake") // "Hello, Jake" ex) 클로저 예시 - 기능 제공let multiply = { $0 * $1 }print(multiply(4, 5))이처럼 클로저는 다른 부분으로 전달할 수 있고 그 것을 저장하여 실행을 지연시킬 수 있는데 여러가지 사용처가 존재설계 관점에서의 클로저설계 관점에서의 클로저의 역할은 해당 기능을 사용하려는 쪽에 위임 하는 행위의 의미를 가지고 있음커스텀..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cntnPF/btsKVAOxrob/zntYzWUyKFEngOrQE5IMr1/img.png)
커스텀 뷰 만들기간단한 커스텀 뷰의 경우는 단순히 데이터만 받아서 그 데이터에 맞게끔 뷰가 그려지지만, 데이터와 특정 뷰를 주입하여 그 뷰도 커스텀 뷰의 하나가 되도록 설계도 가능뷰를 주입받는 형태로 구현해야하는데 좋은 방법은? 아래에서 계속뷰를 주입받는 형태로 구현하는 테크닉ex) 예제로 사용할 뷰: 상단에 header 타이틀 형태가 있고 하단에는 배열로 넣어준 뷰들이 보여지는 뷰struct ContentView: View { var body: some View { CustomView(title: "상단 타이틀", items: [1,2,3]) { item in Text("item: \(item)") } }}1) 사용하는 쪽에서 만들 뷰에 필요한 데..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ujFjW/btsKKzxDNWY/boo698Bx3GL1JEmT8IQwsK/img.gif)
Sticky 헤더 구현 아이디어LazyVStack의 pinnedViews 파라미터에 [.sectionHeaders]를 넣을 수 있는데 이 값을 사용하면 sticky header 구현이 매우 용이LazyVStack(pinnedViews: [.sectionHeaders])위 옵션을 주고 Section에 뷰를 넣으면 그 뷰가 sticky로 자동으로 동작됨ScrollView { LazyVStack(pinnedViews: [.sectionHeaders]) { // 상단 콘텐츠 VStack { Text("Top Content") .font(.largeTitle) .padding() ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cVMXMR/btsKDcasm69/7FoAXfk1CrSMgTYlFkaeVK/img.png)
뷰 정렬 개념아래 코드를 보면 흔히 사용되는 VStack 컴포넌트와 .frame 함수를 사용하여 아래처럼 구현했으나 잘못 구현된 코드UI는 의도된 대로 나올 수 있을지라도 추후에 수정할 때 잘못 적용될 확률이 큼ex) UI들을 좌측 정렬을 기준으로 배치하도록 구현된 코드VStack(alignment: .leading) { Image(systemName: "globe") .resizable() .frame(width: 30, height: 30) .foregroundStyle(.tint) Text("Hello, world!")}잘못 구현된 점은 개념을 알아보고 아래에서 확인VStack과 frame의 alignmentVStack(alignemnt:)는 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/supfH/btsKujHr05v/dbE6xdt6ae9Kei2UlcEeu1/img.png)
SwiftUI의 bacgrkound와 overlaybackground와 overlay 옵션 모두 특정 뷰에 겹치게 뷰를 배치할 때 사용하는 메소드차이점은 background은 뷰 뒤에, overlay는 뷰 앞쪽에 배치 중첩됨ex) background를 사용하면 뷰 뒷쪽에 배치됨struct ContentView: View { var body: some View { VStack { Text("Hello, world!") .background { Color.blue } } .padding() }}ex) overay를 사용하면 뷰 앞쪽에 배치되므로 뷰가 가려..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ZXvSx/btsKmiOtTtZ/WnxTj0legucC6BpKf3gDek/img.gif)
ScrollViewSwiftUI에서는 ScrollView를 사용할 때, UIKit에서 제공하는 UIScrollView와는 아래 정보 확인이 바로 어려움reachToBottom (스크롤이 바닥에 도달했는지)contentOffset (얼만큼 스크롤을 진행했는지)위 정보를 알 수 있으려면 ScrollView를 감싸서 따로 계산하여 정보 획득이 가능reachToBottom과 contentOffset 구하는 아이디어ScrollView를 감싸서 구현하고, 아래처럼 사용하는쪽에서는 CustomScrollView에 클로저로 콘텐츠 뷰들을 넣을 수 있도록 구현 var body: some View { VStack { CustomScrollView( frameHeight: 300, ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/d0c8gX/btsKkbjuVBl/7liPNEb4OvI1RA5sMCC7kk/img.png)
PreferenceKey일종의 키 이며, 이 키를 이용하여 특정 값을 변경될때마다 관찰할 수가 있음PreferenceKey로 데이터를 뿌리면, 이 데이터에 관심있는 쪽에서 해당 PreferenceKey로 옵저빙이 가능가장 대표적인 사용 방법은 자식뷰 -> 부모뷰로 데이터를 넘길때 사용UIKit에서는 델리게이트나 closure로 넘기지만 SwiftUI에서는 PreferenceKey라는 것이 존재사용방법ex) 자식뷰에서 TextView에 데이터가 입력될때마다 부모 뷰에 전달하고 싶은 경우?자식뷰 준비struct ChildView: View { @State private var inputText = "" var body: some View { VStack { ..