분류 전체보기72 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. iOS) ContentMode 알아보기! 💡 가끔씩 ContentMode에 대해 구별이 잘 안가곤 해서 이참에 정리를 한번 해볼까 한다! 자주 사용하는 scaleAspectFit, scaleAspectFill, scaleToFill 세가지를 알아보자👍 예시로 사용할 사진 사용할 코드 var contentModeImage: UIImageView = { let iv = UIImageView() iv.contentMode = .scaleAspectFit iv.image = #imageLiteral(resourceName: "ex") return iv }() override func viewDidLoad() { // ... self.view.addSubview(contentModeImage) contentModeImage.anchor(top: view.. iOS 2022. 12. 29. 곰튀김님의 RxSwift + MVVM (마무리) https://www.youtube.com/watch?v=iHKBNYMWd5I&list=PL03rJBlpwTaBrhux_C8RmtWDI_kZSLvdQ 해당 글은 곰튀김님의 RxSwift 강의 영상을 시청 후 작성한 글입니다. 이제 메뉴를 추가 삭제(+, -)하는 버튼을 구현해보자! Cell 클래스에는두 가지메서드가 있다. class MenuItemTableViewCell: UITableViewCell { @IBOutlet var title: UILabel! @IBOutlet var count: UILabel! @IBOutlet var price: UILabel! @IBAction func onIncreaseCount() { } @IBAction func onDecreaseCount() { } } 저 두 .. iOS 2022. 11. 1. 곰튀김님의 RxSwift + MVVM (3) https://www.youtube.com/watch?v=iHKBNYMWd5I&list=PL03rJBlpwTaBrhux_C8RmtWDI_kZSLvdQ 해당 글은 곰튀김님의 RxSwift 강의 영상을 시청 후 작성한 글입니다. 다음 예제는 아래와 같은 화면으로 시작한다. UI만 간단히 구성되어있는 상태이고 추가 삭제 등의 버튼은 동작하지 않는다. 결과 화면에서도 더미 데이터만 보인다. 이것을 RxSwift와 MVVM패턴을 사용하여 다음과 같은 화면처럼 구현 할 예정이다. 우선 메뉴의 정보를 가지고 있을 Menu 구조체를 하나 만들어주자. // ViewModel: View를 위한 Model struct Menu { var name: String var price: Int var count: Int } 이 M.. iOS 2022. 11. 1. 곰튀김님의 RxSwift + MVVM (2) https://www.youtube.com/watch?v=iHKBNYMWd5I&list=PL03rJBlpwTaBrhux_C8RmtWDI_kZSLvdQ 해당 글은 곰튀김님의 RxSwift 강의 영상을 시청 후 작성한 글입니다. 이전 포스트에서 Disposables.create()에 대한 설명을 빼먹었다. 우선 Disposables은 내부에 구현이 아무것도 없는 구조체이다. 그리고 우리가 return 했던 Disposables.create에서 아무것도 하지 않으면 NopDisposable 인스턴스가 만들어진다. 이 인스턴스의 dispose는 아무것도 하지 않는다. Disposables.create에 클로저를 하나 전달하면 AnonymousDisposable 인스턴스가 만들어진다. 이 인스턴스의 dispose.. iOS 2022. 10. 24. 이전 1 2 3 4 ··· 6 다음