프로그래밍/SwiftUI

[SwiftUI]뷰 중첩(겹치기)을 위한 Overlay, Background 예제 (ZStack)

Overlay 와 Background 수식어를 이용하여 ZStack과 동일한 중첩된 뷰를 만들 수 있습니다. Overlay는 중첩방향이 위로 쌓아갑니다. struct ContentView: View { var body: some View { Rectangle().fill(Color.green).frame(width: 150, height: 150) .overlay( // 초록색 사각형 위로 뷰를 추가 Rectangle().fill(Color.yellow) // 크기값을 주지 않았음으로 초록색 사각형과 동일한 크기 ) } } [프리뷰 결과] 초록색 사각형 위로 노란색 사각형이 중첩되어 보여집니다. Background는 Overlay와 동일하지만 차이점은 중첩방향이 아래방향으로 쌓아 나갑니다. Backgro..

2022. 11. 6. 14:06

프로그래밍/SwiftUI

[SwiftUI] 여러개의 스택을 이용한 레이아웃 UI만드는 방법 예제

HStack, VStack, ZStack을 중첩해서 사용하여 SwiftUI에서 뷰를 구성하는 예제 import SwiftUI struct ContentView: View { var body: some View { VStack { Text("도형만들기").font(.largeTitle).fontWeight(.heavy) HStack { Text("둥근 모양").font(.title) Spacer() } ZStack { Rectangle().frame(height:10) HStack { Circle().fill(Color.yellow) Ellipse().fill(Color.green) // 타원 Capsule().fill(Color.orange) // 캡슐 RoundedRectangle(cornerRadiu..

2022. 11. 6. 13:32

프로그래밍/SwiftUI

[SwiftUI] Spacer 뷰 기본 사용방법 및 예제

Spacer는 뷰 사이의 간격 또는 뷰의 크기를 확장할 때 사용되는 레이아웃을 위한 뷰입니다. Spacer 특성 스택 외부에서 사용될 때 --> 단독 사용시 부모 뷰가 제공하는 공간 내에서 최대 크기로 확장됨, 시각적 요소를 적용할 수 있는 하나의 뷰로 사용됨 ( 단, HStack, VStack 내에서 사용되는 경우 시각적 요소는 제외됨, 공간만 차지하는 역할, 단독으로 사용시 뷰가 없는 것처럼 취급됨. import SwiftUI struct ContentView: View { var body: some View { Spacer().background(Color.yellow) } } 스택 외부에서 쓰였을 때만 배경색이 반영된다고 나왔으나 적용되지 않았습니다. 버전업데이트 되면서 바뀐듯??? 스택 내부에서..

2022. 11. 5. 18:50

프로그래밍/SwiftUI

[SwiftUI] 레이아웃 배치 스택(HStack,VStack,ZStack) 기본 사용 방법 (뷰 정렬 방법 및 뷰들 사이의 간격 조정 방법)

SwiftUI에서 레이아웃을 구성할 때 Stack은 필수적으로 활용하게되는 매우 중요한 뷰 레이아웃입니다. 스택의 3가지 종류 스택 설명 HStack 가로방향으로 뷰를 배열(Horizontal Stack) VStack 세로방향으로 뷰를 배열(Vertical Stack) ZStack 뷰를 겹겹이 쌓아 올리는 형태로 배열(Depth Stack) 1. 가로방향 뷰 배열 HStack 예제 import SwiftUI struct ContentView: View { var body: some View { HStack { Rectangle() .fill(Color.red) .frame(width: 150, height: 150) Rectangle() .fill(Color.blue) .frame(width: 150, ..

2022. 11. 1. 12:33

프로그래밍/SwiftUI

[SwiftUI] SF Symbols 4 설치 및 사용 방법 예제 코드 총정리(systemName, imageScale, font, weight)

SF Symbols이란? 애플이 직접 만들어 제공하는 이미지들의 모음(아이콘 라이브러리) 벡터 기반의 이미지로 색상 변경 및 크기 변경이 가능 애플의 시스템 폰트로 사용되는 SF Font(샌프란시스코 폰트)와 완벽하게 어울리도록 설계됨(자연스러우며, 동적타입 적용시 자동으로 텍스트 처럼 적절한 크기로 조정되기도 함) SVG파일로 만들어 추가 가능 macOS에서는 지원하지 않음 SF Symbols 4 다운로드 SF Symbols 공식문서 바로가기 SF Symbols를 사용하기 위해서는 별도의 설치가 필요합니다. 위 다운로드 링크를 클릭하여 다운 받거나 여기 사이트 주소를 클릭 후 화면 제일 아래쪽으로 이동하여 다운받으신 후 설치하세요. 심볼4 기준으로 총 4,491개의 아이콘을 제공합니다. SF Symbo..

2022. 10. 31. 00:11

프로그래밍/SwiftUI

[SwiftUI]이미지(Image) 뷰 클래스 기본 사용법 및 예제 총정리

이미지(Image)는 UIKit의 UIImageView와 같이 이미지를 표현하는 뷰입니다. 애셋폴더에 "sampleImage"라는 파일이 있다면 아래와 같이 코드 한줄로 이미지를 불러올 수 있습니다. Image("sampleImage") [SwiftUI] Xcode 툴에서 에셋(Assets.xcassets) 이미지 추가하는 3가지 방법 [SwiftUI] Xcode 툴에서 에셋(Assets.xcassets) 이미지 추가하는 3가지 방법 에셋 카탈로그(Asset Catalog) Xcode 에서 프로젝트를 생성하면 Assets.xcassets 폴더가 생성되는데, 이 폴더를 에셋 카탈로그라고 부릅니다. Assets.xcassets는 앱 개발시 앱에서 사용될 다양한 리소스를 관리 ddolcat.tistory.co..

2022. 10. 23. 08:00

프로그래밍/SwiftUI

[SwiftUI] Xcode 툴에서 에셋(Assets.xcassets) 이미지 추가하는 3가지 방법

에셋 카탈로그(Asset Catalog) Xcode 에서 프로젝트를 생성하면 Assets.xcassets 폴더가 생성되는데, 이 폴더를 에셋 카탈로그라고 부릅니다. Assets.xcassets는 앱 개발시 앱에서 사용될 다양한 리소스를 관리할 수 있습니다. 리소스 파일이란 이미지 파일, 음악 파일 등 여러 파일 형식의 파일들을 추가할 수 있습니다. 이미지 파일의 경우 디바이스 마다 필요로 하는 이미지 크기나 비율이 다릅니다. 아래 이미지에서 보는 것처럼 앱 AppIcon 에셋을 보면 iPhone 과 iPad 등에서 요구하는 이미지 사이즈가 다릅니다. 동일한 이미지를 사용하기 위해 이미지 에셋을 만들 수 있습니다. Xcode 툴에서 에셋(Assets.xcassets)에 이미지 추가하는 첫번째 방법 1. 왼..

2022. 10. 20. 22:31

프로그래밍/SwiftUI

[SwiftUI] 텍스트(Text) 뷰 클래스 수식어 종류 및 사용법 (수식어 순서 주의)

텍스트(Text) 뷰(클래스)는 SwiftUI에서 가장 기본적인 클래스로 가장 많이 사용하게 될 뷰입니다. Xcode 툴에서 작성한 Text 코드 위에 command 키 또는 control키를 누른 상태에서 마우스 좌클릭을 하면 팝업 메뉴가 노출됩니다. Show Quick Help를 클릭하면 아래와 같이 Text 클래에서 대한 간략한 가이드를 볼 수 있음으로 코딩시 유용해요. 텍스트 뷰 수식어 사용법 예제 코드 텍스트 폰트 설정, 폰트 굵기, 정렬방식, 텍스트 최대 라인수, 글자색, 글자 배경색, 볼드체, 이탤릭체, 밑줄, 취소선, 글자 간격(자간) 당을 프로그래밍 방식으로 처리하는 예제입니다. 물론 Xcode툴 오른쪽 디자인 UI 패널을 이용해서도 적용이 가능합니다. import SwiftUI stru..

2022. 10. 19. 12:22

프로그래밍/SwiftUI

[SwiftUI] UIKit와 SwiftUI의 구성요소 비교표 (UIKit 클래스명에서 UI만 빼면 SwiftUI와 거의 비슷한 요소가 많다.)

SwiftUI는 개발자가 빠르게 적응할 수 있도록 뷰의 이름만 봐도 어떤 역할을 하는지 유추하기 쉽게 만들어졌습니다. 이름이 완전 다르거나 지원하지 않는 요소에 대해 정리를 하였습니다. Vies and Controls 대조표 UIKit SwiftUI UILabel Text UITextField(isSecureTextEntry설정) SecureField UIImageView Image UIPickerView Picker(WheelPickerSytle) UISwitch Toggle UISegmentedControl Picker(SegmentedPickerStyle) UITextView 동일 용소 없음 UITableView(Plain) List UITableView(Grouped) List(GroupedLis..

2022. 10. 15. 10:44

프로그래밍/SwiftUI

[SwiftUI] UI를 수정할 수 있는 방법 3가지 정리

스위프트UI 프레임워크에서 UI를 수정하는 방법에 대한 정리입니다. UI 수정 방법 1. 코드상에서 직접 입력하는 방법 [SwiftUI] ContentView 란 녀석의 특징 및 메서드 체이닝이란? 2. 라이브러리(Library)를 이용하는 방법 3. 인스펙터(Inspector)를 이용하는 방법 라이브러리(Library)를 이용하는 방법 1. Xcode툴바에서 열십자(+) 모양의 Library버튼을 클릭하면 다음과 같이 라이브러리 팝업창이 나타남( 단축키 : Shift + Command + L ) Xcode 11 이상 부터는 View(뷰)와 수식어, 스니펫, 미디어, 컬러와 관련 항목 라이브러리를 모아 볼 수 있도록 구현된 팝업을 제공함. 하나씩 살펴보죠. 라이브러리 팝업창 상단 오른쪽에 상세보기 버튼을..

2022. 10. 11. 23:48

프로그래밍/SwiftUI

[SwiftUI] ContentView 란 녀석의 특징 및 메서드 체이닝이란?

프로젝트를 생성하면 기본적으로 만들어지는 ContentView.swift파일의 코드 내용은 아래와 같습니다. import SwiftUI struct ContentView: View { var body: some View { Text("Hello, SwiftUI world!") } } 구조체는 상속받을 수 없는데 View를 상속받고 있는 것처럼 코딩되어 있음 Command 키를 누른 상태에서 View를 클릭하면 다음과 같은 코드 내용을 볼 수 있어요 기존의 UIView와 달리 프로토콜로 선언되어 있습니다. @available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *) public protocol View { /// The type of view represen..

2022. 10. 11. 22:08

프로그래밍/SwiftUI

SwiftUI 프레임워크 기반 프로젝트 생성하기 (Hello world)

SwiftUI 프레임워크 기반 프로젝트 생성하는 방법 1. Xcode 툴을 실행 2. Create a new Xcode project를 클릭 3. 템플릿을 선택하기 > iOS탭을 선택 4. Application 영역에서 App를 선택한 후 Next 버튼을 클릭 5. 프로젝트 기본 옵션 설정 후 Next 클릭 - 프로젝트 이름 설정 - Team : 개발자 프로그램을 등록했다면 선택가능. 매년 $99달러를 지불하고 개발자 프로그램에 등록할 수 있음 (구글과 달리 매년 개발자에게 장사하는 느낌) - 인터페이스 선택시 SwiftUI 선택 - Language 선택시 Swift 선택 - Include Tests 체크 참고로 최신버전의 Xcode를 사용중이라면 Project Name만 설정하면 됨. 기본적으로 Swi..

2022. 10. 10. 12:53

프로그래밍/SwiftUI

SwiftUI 프레임워크를 사용해야하는 이유

SwiftUI는? "The Shortest Path to a Great App", "Less code, Better code. Everywhere" Swift 언어 기반의 UI프레임워크 AppKit, UIKit 등으로 구분하지 않고 유저 인터페이스 영역까지 모든 플랫폼에서 사용가능 적응형레이아웃, 뷰 갱신, 현지화, 접근성, 유동적 글자 크기 등 개발자가 직접 구현해야 했던 상당 부분을 프레임워크가 대신 지원 해줌으로써 코드길이의 굉장히 줄어 들게 됨 코드를 읽고 이해하기 쉬워짐 기존의 명령형(Imperative) 대신 선언형(Declareative) 프로그래밍 방식을 활용. 모든 애플 플랫폼 지원(아이폰, 맥북, 아이패드, 애플TV 등) 함 (iOS를 개발하려면 UIKit, macOS는AppKit, w..

2022. 10. 10. 11:45

프로그래밍/SwiftUI

생에 첫 전자책을 구매하였다. iOS 앱 개발을 위한 입문서 "스윗한 swiftUI" 알리딘 구입 후기 및 목차 정보

iOS 앱 개발을 시작하기 위해 SwiftUI 책을 알아보던 중 연관 검색어에 "스윗한 SwiftUI" 가 보여서 검색을 해보았더니 교재였다. 알라딘 사이트에서 이 책에 대한 목차를 보고 구매하였다. 사실 목차의 내용 순으로 구글에서 검색해서 공부할 수도 있지만 왠지 구입하고 싶은 마음이 생겼다. 알라딘 앱에서 중고서적을 검색해보았지만 새 제품과 거의 차이가 없는 상급 책들 뿐이라 배송시간도 3일 이상 소요되고 해서 바로 보기 위해 전자책으로 구매하였다. 태어나서 처음으로 구매해보는 전자책이다. 지식 습득이 끝나게 되면 종이책의 경우 다 보고 나면 중고로 팔아야 하거나 책꽂이에 꽂혀서 먼지가 쌓인다. 그래서 전자책으로 주문하게 되었다. 전자책을 구매하려고 다음 단계를 눌렀는데 무조건 전자책 캐시 충전을 ..

2022. 10. 9. 23:43