PROJECT/Simple14

• 

  SwiftUI Project11 : Shape를 활용하여 뷰 꾸미기 이번에는 Path와 Shape를 사용하여 화면을 구성해보겠습니다. Project11 1. 사다리꼴 만들기 우선 Trapezium이라는 struct를 선언하고 아래와 같이 코드를 작성합니다. struct Trapezium: Shape { func path(in rect: CGRect) -> Path { var path = Path() return path } } 그리고 커서를 화면 왼쪽 상단 끝으로 이동시켜줍니다. path.move(to: CGPoint(x: 0, y: 0)) 보통 이렇게 x와 y를 0으로 둘 수도 있지만 아래와 같이 CGPoint를 삭제하고 간단하게 작성할 수 있습니다. path.move(to: .zero) 이러한 박스를 만들어 주려고 하는데 이 도형을 만들기 위한 방법은 여러 가지가 있.. PROJECT/Simple 2021. 4. 24.

• 

  SwiftUI Project10 : 영화 캐릭터 정보 앱 #4 - 디테일뷰 목차 Project10의 네 번째 포스팅입니다. 디테일 화면 구현하기 전 포스팅에서 내비게이션 링크까지 연결을 했습니다. 이제 실제로 상세 화면을 구현할 차례입니다. [SwiftUI View] 템플릿을 통해서 ProductDetailView.swift라고 이름 짓고 다음 코드를 채워 넣어주겠습니다. 우선 아래 코드를 넣어주고 하나하나씩 구현하도록 할게요. // ProductDetailView.swift import SwiftUI struct ProductDetailView: View { // 정보를 전달받기 위한 프로퍼티 선언 let product: Product var body: some View { VStack(spacing: 0) { productImage //영화의 이미지가 올 부분 orderVi.. PROJECT/Simple 2021. 4. 20.

• 

  SwiftUI Project10 : 영화 캐릭터 정보 앱 #3 - JSON 목차 ProJecr10의 세 번째 포스팅입니다. 저번 포스팅에서 컬리 익스텐션을 만들고, ProductRow를 설정해서 화면을 구현해봤습니다. 이번에는 리스트를 이용하여 전체 캐릭터 정보 목록을 나타내고, 강 상품의 상세화면으로 들어가 보기까지 해보겠습니다. 1. 테이터 변환 먼저 캐릭터 정보가 들어있는 JSON을 하나 만들어주도록 하겠습니다. [View] 템플릿을 선택하고 이름은 ProductData.json이라고 설정 후 생성해줍니다. 그리고 그 안에 있는 내용은 모두 지운 뒤 이래 코드를 입력해줍니다. // ProductData.json [ { "name": "소스케", "ImageName": "Sosuke", "movie": "벼랑위의 포뇨", "price": 124000, "description.. PROJECT/Simple 2021. 4. 19.

• 

  SwiftUI Project10 : 영화 캐릭터 정보 앱 #2 - 모델생성 Project10의 두 번째 포스팅입니다. 저번 게시글에 이어서 만들어 보겠습니다. 컬러 익스텐션 만들기 이번에는 컬러 익스텐션을 만들어서 컬러를 다루도록 하겠습니다. SwiftUI에서는 일명 HEX 코드를 그냥 사용할 수 없습니다. 그렇기 때문에 값을 추출해 변환하는 기능을 추가해야만 합니다. 따라서 헥스 코드를 입력받아 Color 타입을 만들어내는 생성자를 추가해주겠습니다. 컬러 익스텐션 만드는 방법에 대해 알아보러 가기 이 앱에서 자주 쓰일 색을 아래와 같이 추가해주겠습니다. // ColorExtension import SwiftUI extension Color { static let lightRed = Color(hex: "c64756") static let DarkGreen = Color(hex.. PROJECT/Simple 2021. 4. 17.

• 

  SwiftUI Project10 : 영화 캐릭터 정보 앱 #1 목차 Project10의 첫 번째 포스팅입니다. 영화 캐릭터 정보 앱 이번 프로젝트에서는 지브리 스튜디오의 캐릭터의 정보를 앱에 나타내면서 SwiftUI 기능 사용해보겠습니다. 뷰 구성하기 우선 아래 이미지 파일을 다운받아서 Assets 폴더에 업로드해주겠습니다. 그리고 위 이미지 같은 뷰를 작성해보겠습니다. 이 뷰는 HStack 이 최상위에서 뷰를 감싸고 있고 VStack 이 자식 뷰로 캐릭터 정보를 감싼 형태입니다. // Home HStack { Image("Sosuke") .resizable() .scaledToFill() .frame(width: 150) .clipped() VStack(alignment: .leading){ HStack { Text("소스케") .font(.headline) .f.. PROJECT/Simple 2021. 4. 16.

• 

  SwiftUI Project9 : CustomTabView (geometryReader) CustomTabView 우선 MyView 라는 SwiftUI 파일을 생성해서 위에 보이는 메인 배경 뷰를 만들어 주겠습니다. // MyView.swift import SwiftUI struct MyView: View { //타이틀과 배경색을 변수로 지정 var title: String var bgColor: Color var body: some View { ZStack { bgColor //safeArea 부분까지 채워줌 .edgesIgnoringSafeArea(.all) Text(title) .font(.largeTitle) .foregroundColor(.white) .fontWeight(.bold) } } } struct MyView_Previews: PreviewProvider { static .. PROJECT/Simple 2021. 3. 26.

• 

  SwiftUI Project8 : WebView and Image Project8 이번에는 WebViewImage를 사용하여 간단하게 위와 같은 화면을 구성해보겠습니다. Circle 이미지뷰 생성 우선 새로운 SwiftUI파일을 생성하고 이름은CircleImageView라고 정해주겠습니다. 그리고 아래와 같은 이미지를 만들어 주겠습니다. 원하는 이미지 파일을 Assets에 추가해주고 다음과 같이 코드를 작성해줍니다. //CircleImageView struct CircleImageView: View { var body: some View { VStack { Image("seogun") .resizable() .aspectRatio(contentMode: .fit) .frame(width: 200, height: 200) .clipShape(Circle()) .shado.. PROJECT/Simple 2021. 3. 21.

• 

  SwiftUI Project7 : Stack / ScrollView / Link 이번에는 Stack / ScrollView / Link 를 사용하여 간단하게 아래와 같은 화면을 구성해보겠습니다. #1 웹사이트 Link 카드 우선 Asset에 원하는 이미지를 넣고 아래와 같이 스택을 쌓아주겠습니다. //ProjectCard struct ProjectCard: View { var body: some View { VStack(alignment: .leading){ Text("SwiftUI : 서근 개발 노트 ") .fontWeight(.bold) Text("https://seons-dev.tistory.com/") Spacer().frame(height: 50) HStack { Image("Swift") .resizable() .frame(width: 50, height: 50) .cli.. PROJECT/Simple 2021. 3. 11.

• 

  SwiftUI Project6 : Use Views From Other Frameworks #1 상세 정보 생성 //ContentView struct ContentView: View { var body: some View { VStack(alignment: .leading){ HStack { Text("경복궁") .font(.title) .padding(.bottom, 10) Text("서울") .font(.caption) } VStack{ Text("161 Sajik-ro, Sejongno, Jongno-gu, 서울특별시 South Korea") .font(.footnote) } } } } #2 사용자 이미지 View 생성 새로운 SwiftUI 파일을 만들어 Asset에 원하는 사진을 첨부하여 아래와 같이 작성합니다. //CircleImageView struct CircleImage: Vie.. PROJECT/Simple 2021. 3. 8.

• 

  SwiftUI Project5 : 날씨앱 'SwiftUI 기초 배우기' 목차 Project 5 1. 배경화면과 오늘의 날씨 만들기 ZStack { LinearGradient(gradient: Gradient(colors: [Color.blue, Color.white]), startPoint: .topTrailing, endPoint: .bottomTrailing) VStack{ Text("서울") .font(.system(size: 40)) .foregroundColor(.white) Image(systemName:"sun.max.fill") .resizable() .renderingMode(.original) .frame(width: 180, height: 180) .aspectRatio(contentMode: .fit) } } 위 코드와 같이 Gradient로 배경화면을.. PROJECT/Simple 2021. 3. 6.

• 

  SwiftUI Project4 : Lottie 애니메이션으로 카드만들기 Lottie 애니메이션 1. 세팅 Xcode의 프로젝트 이름은 LottieCard라고 정해주고 프로젝트 안에 Lottie 애니메이션을 사용할 수 있도록 세팅을 해줍니다. Lottle 애니메이션 세팅 방법 알아보러 가기 ContetView에 화면을 구성해주기 위해 재사용 될 수 있는 CardView를 먼저 만들어주겠습니다. 새로운 SwiftUI 파일을 생성후 이름은 'Lottie Card' 라고 정해주고 아래와 같이 코드를 작성해줍니다. //LottieCard import SwiftUI struct LottieCard: View { var title = "서근 개발블로그 카드" var icon = "faceid" var animate = "A" var color1 = Color(Literal()) var .. PROJECT/Simple 2021. 2. 10.

• 

  SwiftUI Project3 : List view를 사용하여 Grid 만들기 List view로 Grid 만들기 New file을 만들어 이름은 'Dish' 라고 정해주고, 아래 이미지를 Assets에 넣어줍니다. (출처: unsplash.com/photos/8Nc_oQsc2qQ) 그리고 Dish 라는 Extension값을 넣어주겠습니다. import Foundation import SwiftUI struct Dish { //Dish를 구별하기 위해 고유 ID를 저장해줌 let id = UUID() let name : String let price : Double let imageURL : String } 이제 아래에 각 요리에 대한 정보를 입력해주겠습니다. extension Dish { static func all() -> [Dish] { return [ Dish(name: ".. PROJECT/Simple 2021. 2. 9.

• 

  SwiftUI Project2 : Slider Project2 : Slider Flag 배열 생성 Slider를 사용하여 프로젝트를 만들어보겠습니다. 첫 번째로, ContentView에 NavigationView를 생성해서 NavigationBarTitle을 "국기"로 정해주겠습니다, struct ContentView: View { let flag = ["🇰🇷", "🇺🇸", "🇯🇵", "🇪🇺", "🇸🇱", "🇧🇪", "🇲🇨", "🇬🇳", "🇿🇦", "🇳🇮", "🇨🇦", "🇹🇷", "🇨🇮", "🇮🇹", "🇬🇧", "🇨🇭", "🇸🇴"] var body: some View { NavigationView { VStack { } .navigationBarTitle("국기") } } } 그리고 flag의 배열에 한 번 더 배열로 감싸주겠습니다. 짝을 지어주는거.. PROJECT/Simple 2021. 2. 5.

• 

  SwiftUI Project1 : Extension으로 정보가져오기 목차 Project 1 1. Extentsion 생성하기 Extension과 List를 사용하여 Swift에서 간단하게 화면을 구성하고 정보를 가져오는 방법에 대해서 알아보도록 하겠습니다. 일단 Xcode를 열어 프로젝트를 하나 생성 해주고, SwiftUI 파일을 하나 더 생성해주겠습니다. 파일 이름은 임의로 'Person'이라고 정해줄게요. Extension값을 정해줘야 하는데 코드는 아래와 같이 만들어 주겠습니다. import Foundation struct Person { let name: String let age: Int let imageURL: String let height: Double let weight: Float } extension Person { static func all() -.. PROJECT/Simple 2021. 2. 2.