iOS - 실무관련/SwiftUI17 PreView(Ver: Xcode14) 1. PreView관련 용어 📌 PinControl 📌 📖 PageControls 📖 ✍🏼 Canvas Controls ✍🏼 (왼쪽부터) - Live: 실시간으로 동작(버튼, 스크롤 등등 작동함) - Seclectable: 실시간으로 동작하지 않음(버튼, 스크롤 등등 작동하지 않음) - Variants - Color Sceheme Variants: Light모드와 Dark모드를 비교해서 보여줌. - Orientation Variants: 세로모드, 가로모드(좌측으로), 가로모드(우측으로)된 화면을 비교해서 보여줌 - Dynamic Type Variants: 지정된 12가지 사이즈에 따른 다양한 UI를 비교해서 보여줌 - Device Settings: 하나의 PreView에서 다크모드로 할건지 안 할건지,.. 2022. 9. 24. GeometryReader 참고 블로그 - GeometryReader는 무엇일까? 1. 정의 💡 GeometryReader는 그 자체로 ‘View’이며, container 안 View 스스로의 크기와 위치를 함수 정의를 봐도 무슨말인지 모르겠다. 따라서 참고 블로그에서 이해한 내용을 요약해보겠다. View를 구성할 때는 HStack, VStack, ZStack을 적절히 사용해서 만들 수 있다. 때때로 하위뷰들의 위치나 크기(모양)을 직접 조작해야하는 경우가 생긴다. 이때 사용하는 것이 GeometryReader이다. 하위뷰의 별다른 설정이 없다면 상위뷰가 제안해준 곳에 위치한다. 2. GeometryReader 사용해보기 [왼쪽 사진] Text는 특별한 수식어가 없기 때문에 가장 상단에 위치하고 남은 공간을 RightView가 채.. 2022. 9. 23. List 1. 정의 💡 List는 하나의 열에 여러개의 행으로 표현되는 UI를 구성해 다중 데이터를 쉽게 나열할 수 있도록 구성된 View이다. 2. 사용예시 아래의 예시처럼 Stack처럼 UI를 감싸주면된다. 3. 동적 컨텐츠 [1. Range] List(0.. 2022. 9. 20. NavigationLink 1. 정의 💡 지정한 목적지로 이동할 수 있도록 만들어진 버튼으로, 뷰를 눌렀을 때 또는 미리 지정된 특정 조건을 만족했을 때 화면전환 2. 사용예시 NavigationLink(destination: ) { 화면전환이 되도록 만드는 버튼의 UI } 2022. 9. 20. NavigationView 1. 사용법 💡 사용법은 Stack을 사용하는 것처럼 감싸주기만 하면된다. 2. NavigationBarTitle NavigationBarTitle 수식어로 제목을 표현할 수 있다. NavtigationBarTitle은 기본적으로 automatic모드로 설정되어있지만 large, inline모드로 설정이 가능하다. 3. NavigationBarItems BarItem은 NavigationView 내부에서 만드는게 아니라 외부에서 만들어서 navigationBarItems(leading: ,trailing: )을 사용해서 적용해준다. 만약 여러개의 item을 넣고 싶다면?? -> HStack을 사용하자. 4. hidden 수식어 navigationBarHidden - 네비게이션 바 숨김 navigation.. 2022. 9. 20. Button 1. 기본적인 사용방법 Button(action: { //버튼이 터치되었을 때 수행할 작업 }) { Text("Button) // 버튼 UI } 2. 텍스트를 이용해서 버튼 만들기 import SwiftUI struct ContentView: View { var body: some View { HStack(spacing: 10) { // 1) 단순히 텍스트로만 버튼을 표현할 때 Button("B1") { print("B1") } // 2) 먼저 텍스트를 만들고 외곽선을 추가할 때 Button(action: { print("B2") }) { Text("B2") .padding() .background(RoundedRectangle(cornerRadius: 10).strokeBorder()) } // 3) .. 2022. 9. 14. Image 1. 정의 💡 SwiftUI에서 Image는 UIKit에서 ImageView와 같다. SwiftUI에서 이미지를 다룰 때 알아야할 것은 이미지는 기본적으로 주어진 공간과 관계없이 그 고유의 크기를 유지한다는 것이다. frame 수식어를 사용해도 이미지 원본 크기는 유지하고 뷰가 차지하는 공간만 커진다. (아래 참고) 그래서 이미지 크기를 변경해야하는 경우 resizable 수식어를 적용해야한다. 2. Resizable 💡 이미지 크기를 변경해야하는 경우 resizable 사용 🚧 주의할 점은 Resizable 수식어는 Image에만 적용되기 때문에 frame 수식어보다 먼저 적용되어야한다. 🚧 3. ContentMode 💡 주어진 공간 이외에까지 이미지 확장할 때 사용 UIKit SwiftUI 설명 Sc.. 2022. 9. 7. overlay - View 중첩 1. 정의 💡 View의 원본의 공간을 기준으로 기 위에 새로운 View를 중첩해서 쌓는 기능을 하는 수식어 2. 사용방법 1. 기본 사용법 struct CircleImageView: View { var body: some View { Image("turtlerock") .clipShape(Circle()) .overlay { Circle() } } } 기존 ImageView 크기에 맞춰서 검은색(기본값)의 원형 View 생성 2. 크기를 조정한 사용법 struct CircleImageView: View { var body: some View { Image("turtlerock") .clipShape(Circle()) .overlay { Circle() .frame(width: 200.0, height:.. 2022. 8. 10. .clipShape( ) - 이미지 모양 변경하기 1. 정의 💡 clipShape은 해당 View의 모양을 설정하는 것이다. 2. shape의 종류 Circle() - 원형 Ellipse() - 타원형 Rectangle() - 직사각형 RoundedRectangle(cornerSize: CGSize(width: ,height: )) - 모서리가 둥근 직사각형 RoundedRectangle(cornerRadius: 30): 둥근모서리 2022. 8. 10. Spacer( ) - UI사이의 간격 만들기 출처 - 서근님 티스토리 1. Spacer의 정의 💡 Spacer( )란 View 사이의 간격을 설정하거나 View의 크기를 확장할 용도로 사용되는 레이아웃을 위한 View이다. 2. Stack 외부의 Spacer VS Stack 내부의 Spacer [Stack 외부의 Spacer] 부모 뷰가 제공하는 공간 내에서 가능한 최대 크기로 확장 시작적 요소를 적용할 수 있는 하나의 뷰로 사용 //스택 외부에서 struct ContentView: View { var body: some View { Spacer().background(Color.blue) //공간 최대 확장. 시각적 요소 표현 가능 } } [Stack 내부의 Spacer] 시각적 요소가 제외되고 단지 공간을 차지하기 위한 역할로만 가능 만약 콘텐.. 2022. 8. 10. Stack SwiftUI에서 Stack은 VStack, HStack, ZStack 총 3개가 있다. VStack은 "Vertical Stack", HStack은 "Horizontal Stack", ZStack은 "Z axis Stack"을 의미한다. (위의 그림참고) 각각의 Stack을 다루는 방법을 배워보자. 1. VStack [VStack 확인하기] VStack 내부에 Rectangle() 3개를 추가하면 아래와 같은 화면이 뜬다. VStack 내부에 추가했기때무에 수직으로 쌓인다. [VStack의 속성] 1. VStack의 크기 설정과 백그라운드 설정 VStack의 크기는 frame(width: ,height: )를 사용해서 조절할 수 있다. .frame(width: ,height: ) 2. VStack 내부.. 2022. 7. 18. Set Image 오늘은 위와 같이 이미지와 Text를 이용한 프로필화면을 구현해보자. 시작하기 전에 SF Symbols(애플의 시스템 이미지를 사용하기 위함)를 다운 받아주자. (링크) 1. Circle ImageView 만들기 우선 새로운 파일을 만든다. (CircleImageView) 그리고 아래와 같이 ContentView처럼 틀을 만들어준다. [만들기 전 ImageView에 대한 경험] import SwiftUI struct CircleImageView : View { var body: some View { Text("CircleImageView") } } struct CircleImageViews: PreviewProvider { static var previews: some View { CircleImageV.. 2022. 7. 15. Text 여러 Component들은 해당 Component의 텍스트를 작성하고 .(dot)으로 그 Component에 대한 속성을 작성해서 UI를 구현한다. Text도 마찬가지로 아래와 같이 구현이 가능하다. import SwiftUI struct ContentView: View { var body: some View { Text("Hello, world!") .font(.system(size: 30)) .fontWeight(.heavy) .foregroundColor(.green) .background(.orange) } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } 1. 폰트 [.. 2022. 7. 14. 웹뷰 띄우기 1. 웹View 만들기 우선 웹뷰를 만들기 위해서 새로운 파일을 하나 만들자. 코드를 작성하기 이전에 없는 info.plist를 만들어주자. (나타내자) - 링크 import SwiftUI import WebKit //MARK: UIViewRepresentable: UIKit의 UIView를 사용할 수 있도록 한다. struct MyWebView: UIViewRepresentable { var urlToLoad: String //MARK: - UIView 만들기 func makeUIView(context: Context) -> WKWebView { //언래핑 - 너가 가져온 url 값이 비어있다면 WKWebView를 반환 guard let url = URL(string: self.urlToLoad) el.. 2022. 7. 13. @Binding - 데이터 연동 이번 글은 이전 글의 코드를 이어서 진행하겠다. @Binding을 이용해서 다른 View에서도 데이터를 연동할 수 있도록 해보자. 1. @Binding을 사용하고 다른 View에서 해당 변수를 사용해야하기 때문에 Private를 쓰지 않고 변수를 선언하자. //MARK: 데이터를 연동 @Binding var isActivated: Bool 2. init을 사용해서 기본값을 설정해주자. //MARK: 생성자 - 기본값 설정과정 init(isActivated: Binding = .constant(true)) { _isActivated = isActivated } 3. Bool 값에 따라서 속성을 변경해보자. import SwiftUI struct MyVStackView: View { //MARK: 데이터를 .. 2022. 7. 12. @State - 상태변화 감지 이번 글은 이전 글의 코드를 이어서 진행하겠다. 1. 탭 제스처를 사용자가 했을 때 HStack의 padding, Color가 변경되게 만들어보자. 우선 제스처를 했는지 확인하는 과정이 필요하다. 따라서 HStack의 속성에 탭 제스처를 했는지 확인후 탭 제스처를 했다면 해당 로직을 실행하는 속성을 추가해보자. .onTapGesture { //코드 } 내부에 탭을 했다면 "탭을 했습니다!" 라고 print 되도록 코드를 작성해보자. import SwiftUI struct ContentView: View { var body: some View { HStack { MyVStackView() MyVStackView() MyVStackView() } .padding(10) .background(Color.red.. 2022. 7. 12. SwiftUI와 친해지기 프로젝트 구성 새로운 프로젝트를 만들 때 Stoyboard가 아니라 SwiftUI를 선택해서 생성하면 아래와 같은 파일들이 뜨게 된다. 프로젝트 이름App.swift ContentView.swift Assets.xcassets Preview Content Preview Assets.xcassets 1. 프로젝트 이름App.swift SwiftUI로 된 프로젝트를 생성하면 Stoyboard로 된 프로젝트와 다른 점이 있다. AppDelegate와 SceneDelegate가 없다는 점이다. 물론 애플도 생각 없이 없애진 않았다. AppDelegate와 SceneDelegate의 역할은 "프로젝트 이름App.swift"의 파일에서 주어진 메서드를 통해서 해결할 수 있다. (자세한 내용은 추후 배우면서 알아보겠.. 2022. 7. 12. 이전 1 다음
