1. State Property store values that the view depends on
⇒ 뷰가 의존하는 상태 속성 저장값
2. State Property represent values that can change
⇒ State Property는 변경할 수 있는 값을 나타냅니다.
3. State Property typically declared in the view that nedds them
⇒ State Property는 일반적으로 이를 추가하는 뷰에서 선언됩니다.
예제 코드
State 속성을 사용한 toggleValue 의 변화에 따라 Text가 변하는걸 볼수 있다
Binding
: State의 값을 받아오거나 변경할 때 사용 ( View간 양방향 소통 )
$기호를 사용하여 속성을 정의한다
Binding이란 무엇인가?
1. Put a ‘$’ infront of a State Property reference in your view code (Not in the declaration) to turn it into a two way, Read/Write relationship
⇒ view 코드(선언 아님)에서 State Property 참조 앞에 '$'를 넣어 양방향 읽기/쓰기 관계로 전환합니다.
2. @Binding is a property wrapper to indicate that it expects a binding to be passed to the view when an instance of the view is created
⇒ @Binding은 뷰의 인스턴스가 생성될 때 뷰에 바인딩이 전달될 것으로 예상함을 나타내는 속성 래퍼입니다.
예제 코드
State를 선언한 View
struct ParentView: View {
@State private var toggleValue = true
var body: some View {
SubView(toggleValue: $toggleValue)
}
}
Binding으로 State변수를 받는 SubView
struct SubView: View {
@Binding var toggleValue: Bool
var body: some View {
if toggleValue == false {
Text("Toggle is False")
} else {
Text("Toggle is True")
}
Button(action: {
self.toggleValue.toggle()
}) {
Text("토글 버튼")
}
}
}
@Binding 을 명시함 으로써, State변수를 받아옴을 명시
부모 View 에서 Binding으로 값을 넘겨 줄때는$기호를 사용
Observable Object
: 여러 View에서 의존하기를 원할때 사용하는 Object
Observable Object를 사용하기 위한 절차
Class가 Observable Object 프로토콜을 채택해야함
프로토콜을 채택함으로써 변경하상에 대해 Class의 객체를 관찰하거나 수신
@Published를 선엄하여 변경사항을 저장할 속성을 명확하게 명시 ( Class 내의 개체에 명시 )
@Observed Object 속성을 사용하여 관찰가능한 개체에 대한 참조를 저장
예제 코드
여러 View에서 의존 할 Class 생성
class Profile: ObservableObject {
@Published var isLogined = false
}
⇒ Class에 Observable Object를 채택
⇒ @Published 를 사용함 으로써 변하는 값을 감시할 변수 명시
struct LoginView: View {
@ObservedObject var profile = Profile()
var body: some View {
if profile.isLogined {
Text("로그인 완료")
} else {
Text("버튼을 눌러 로그인 해주세요")
}
Button(action: {
profile.isLogined.toggle()
}){
Text("버튼")
}
}
}
⇒ @ObservedObject 를 사용함 으로써, 변경 사항을 감시할 개체 인스턴스 생성
하지만 이러한 방식을 사용하면 하위 View 모두에게 동일 인스턴스를 전달 할 수 없다 다음 예를 보자
버튼을 클릭하여 로그인을 하면, 로그인 사용자의 닉네임을 보여줄 것이다.
LoginView
struct LoginView: View {
@ObservedObject var profile = Profile()
var body: some View {
if profile.isLogined {
Text("로그인 완료")
} else {
Text("버튼을 눌러 로그인 해주세요")
}
LoginCheckView()
Button(action: {
profile.isLogined.toggle()
}){
Text("버튼")
}
}
}
LoginCheckView
struct LoginCheckView: View {
@ObservedObject var profile = Profile()
var body: some View {
if profile.isLogined {
Text("로그인한 사용자 : Chikong.")
} else {
Text("로그인 정보가 없습니다.")
}
}
}
코드를 작성하고 앱을 실행하면
하위 View의 값이 변하지 않는것을 확인 할 수 있다
이러한 현상이 나타나는 이유는 다음 그림을 살펴보자
다음과 같이 각 View에 새로운 Class 인스턴스를 생성 했기 때문에 각각 다른 인스턴스를 참조 하고 있다.
그렇기 때문에 두개의 인스턴스는 다른 것으로 인식하게 되고, 연관된 값을 변경 하거나 감시할 수 없다
EnvironmentObject
: 하위 View 모두에게 동일한 객체 인스턴스를 사용
위의 예시를 해결할 수 있는 방법이 EnvironmentObject 이다. EnvironmentObject를 사용하면 동일 인스턴스를 하위 View 모두에게 전달 할 수 있다.
위의 문제를 해결할 예제 코드를 보자
MainView
import SwiftUI
@main
struct DataFlowApp: App {
var body: some Scene {
WindowGroup {
LoginView()
.environmentObject(Profile())
}
}
}
⇒ 제일 상위 Main View에서 .environmentObject(Profile()) 를 이용해 객체 인스턴스를 넘겨주었다. 이제 MainView의 하위 View에서 동일한 인스턴스를 참조할 수 있다.
LoginView
struct LoginView: View {
@EnvironmentObject var profile: Profile
var body: some View {
if profile.isLogined {
Text("로그인 완료")
} else {
Text("버튼을 눌러 로그인 해주세요")
}
LoginCheckView()
Button(action: {
profile.isLogined.toggle()
}){
Text("버튼")
}
}
}
LoginCheckView
struct LoginCheckView: View {
@EnvironmentObject var profile: Profile
var body: some View {
if profile.isLogined {
Text("로그인한 사용자 : Chikong.")
} else {
Text("로그인 정보가 없습니다.")
}
}
}
⇒ LoginView 와 LoginCheckView에@EnvironmentObject var profile: Profile부분을 보자.
@EnvironmentObject 속성을 명시 했고 같은 인스턴스를 참조함을 구체적으로 적어 주었다
⇒ 같은 인스턴스를 참조하기 때문에 로그인상태에 따라 값이 변함을 확인 할 수 있다.
이처럼 하위 View에 동일 인스턴스를 참조해야 할때, 필요한 View에 명시해주면 사용할 수 있다.
Nano Challenge 를 진행하는데 횡 스크롤을 구현해야 해서 ScrollView를 공부해 보았다
공식문서 내용
스크롤 뷰는 스크롤 가능한 콘텐츠 영역 내에서 콘텐츠를 표시합니다. 사용자가 플랫폼에 적합한 스크롤 제스처를 수행할 때, 스크롤 보기는 기본 콘텐츠의 어떤 부분이 보이는지 조정합니다. ScrollView는 수평, 수직 또는 둘 다 스크롤할 수 있지만 줌 기능을 제공하지는 않습니다.
어..? HIG에는 적절한 줌 기능을 제공하라고 했는데..? 그건 페이지 컨트롤을 사용할때 한정인가보다.
아직까지는 줌 기능이 필요하지 않으니 추후에 스크롤과 줌 기능이 필요하면 그때 다시 찾아보자.
일단 기본적으로 ScrollView는 줌 기능을 제공하지 않음!
정의
struct ScrollView<Content> where Content : View
→ 정의를 보면 View를 반환하는 구조체로 되어있다.
이 말은 우리는 그냥 ScrollView{ ... return view } 의 형태로 구현하면 된다!
ScrollView 사용해보기
ScrollView() {
VStack {
ForEach (0..<20) { i in
Text("\\(i)")
}
}
}
→ 결과
ScrollView의 기본 Default 값은 vertical 이라는것을 알수 있다.
스크롤 뷰 내의 구성 요소들을 수직으로 정렬하기 위하여 VStack 에 요소를 넣어주고 구성하면 된다!
내가 필요한 것은 횡 스크롤 이므로 구성 요소를 HStack으로 구성하면 되려나?
ScrollView() {
HStack {
ForEach (0..<20) { i in
Text("\\(i)")
}
}
}
→ 결과
응..? 뭔가 이상하다 스크롤도 안될 뿐더러 요소들이 아주 이상하게 배치되어 있다
횡 스크롤을 사용하려면 ScrollView 에 파라미터로 .horizontal 을 설정하자!
ScrollView(.horizontal) {
HStack {
ForEach (0..<20) { i in
Text("\\(i)")
}
}
}
→ 결과
원하는 대로 동작이 나왔다
아!! 스크롤뷰는
Default 값으로 수직 스크롤이 되는구나
횡 스크롤을 구성하려면 horizontal 을 넣어줘야 하는구나!
스크롤내의 요소들을 스크롤 방향에 따라 구성해야 하는구나!
라는 점을 배웠다
그런데 ScrollView의 컴포넌트 중에showsIndicators라는 것이 있다. 이게 뭔가 찾아볼까 하다가 직접 해보며 익히는게 좋을거같아 차이를 확인해 봤다
showsIndicators = true
ScrollView(.horizontal, showsIndicators = true) {
HStack {
ForEach (0..<20) { i in
Text("\\(i)")
}
}
}
→ 결과
⇒ 변한게 없다..? 그럼 false 도.. 확인해보자
showsIndicators = false
ScrollView(.horizontal, showsIndicators = fasle) {
HStack {
ForEach (0..<20) { i in
Text("\\(i)")
}
}
}
본 내용은 스윗한 SwiftUI 책에 있는 예제를 공부한 내용입니다. 해당 예제들에 대한 저작권은 BJpublic 에 있습니다.
이미지에 frame 속성을 사용해도 이미지 자체의 크기를 변경해 주진 않음
Resizable 속성을 사용하여 이미지 크기를 변경할 수 있음
HStack {
Image("imgFile") // 이미지 크기는 변하지 않고, 이미지를 포함함 뷰의 크기가 변함
.frame(width: 50, height: 50)
Image("imgFile").resizable() // resizable() 을 사용하여 이미지 크기 자체가 변함
.frame(width: 200, height: 50)
}
frame 은 View의 속성이기 때문에 resizable 과 순서가 중요함!
resizable() 을 사용하여 특정 영역만 늘려주는 것도 가능함
단, UIKit 처럼 ResizingMode 를 생략하면tile이 아니라stretch가 기본값이 됨
HStack(spacing: 30){
// 기본값
Image("swift").resizable().frame(width: 100, height: 150)
// UIKit의 Aspect Fit 적용
Image("swift").resizable()
.scaledToFit()
.frame(width: 100, height: 150)
// UIKit의 Aspect Fill 적용
Image("swift").resizable()
.scaledToFill()
.frame(width: 100, height: 150)
}
AspectRatio
이미지 비율을 좀더 세부적으로 조정하기 위해 사용하는 수식어
모든 콘텐츠가 적용된 상황에서 추가적으로 비율조정을 하기위해 사용
// CGFloat : 너비 / 높이 를 계산한 비율을 전달
func aspectRatio(_ aspectRatio: CGFloat? = nil, contentMode: ContentMode) -> some View
// CGSize : 너비 와 높이를 각각 설정
func aspectRatio(_ aspectRatio: CGFloat? = nil, contentMode: ContentMode) -> some View
AspectRatio 적용한 예제
HStack(spacing: 30) {
//scaledToFit 콘텐츠 모드를 적용한 뒤, 너비가 높이보다 1.6배 비율을 가지도록 조정
Image("swift").resizable()
.aspectRatio(CGSize(width: 1.6, height: 1), contentMode: .fit)
.frame(width: 150, height: 150)
// scaledToFill 콘텐츠 모드를 적용한뒤, 너비가 높이보다 0.7배의 비율을 가지도록 조정
Image("swift").resizable()
.aspectRatio(0.7, contentMode: .fill)
.frame(width: 150, height: 150)
.clipped()
}
ClipShape
이미지를 원하는 모양으로 조정
크기 또한 조정 가능
HStack(spacing: 30) {
// 원 모양
Image("swift").clipShape(Circle())
// 이미지 크기보다 사방으로 10씩 크기를 조정한 사각형
Image("swift").clipShape(Rectangle().inset(by: 10))
// 크기와 위치를 직접 지정한 타원
Image("swift").clipShape(Ellipse().path(in: CGRect(x: 10, y: 10, width: 80, height: 110)))
}
RanderingMode
template : 이미지의 불투명 영역이 가진 본래의 색을 무시하고 원하는 색으로 변경
original : 항상 이미지의 본래 색을 유지
렌더링 모드를 생략하면 시스템이 알아서 조정을 하므로, 원치않은 결과가 나오면 렌더링 모드를 지정해야함
HStack(spacing: 30) {
// 렌더링 모드 생략 -> 시스템이 스스로 결정
Image("swift")
// 원본 이미지 색상 유지
Image("swift").renderingMode(.original)
// template 모드 적용
Image("swift").renderingMode(.template)
}
.foregroundColor(.blue) // 자식 뷰 모두에게 일괄 적용
본 내용은 스윗한 SwiftUI 책에 있는 예제를 공부한 내용입니다. 해당 예제들에 대한 저작권은 BJpublic 에 있습니다.
전체적으로 훑어보기
VStack(spacing: 30) { // 세로 방향으로 뷰를 배열하는 컨테이너 뷰
Text("폰트와 굵기 설정")
.font(.title) // 폰트 설정
.fontWeight(.black) // 폰트 굵기
Text("글자색은 foreground, 배경은 background")
.foregroundColor(.white)
.padding() // 텍스트 주변 여백 설정
.background(Color.blue)
Text("커스텀 폰트, 볼드체, 이탤릭체, 밑줄, 취소선")
.font(.custom("Menlo", size: 16))
.bold()
.italic()
.underline()
.strikethrough()
Text("라인 수 제한과 \\n 텍스트 정렬 기능입니다. \\n 이건 안 보입니다.")
.lineLimit(2)
.multilineTextAlignment(.trailing) // 다중행 문자열의 정렬 방식 지정
.fixedSize() // 주어진 공간의 크기가 작아도 텍스트를 새략하지 않고 표현하도록 설정
// 2개 이상의 텍스트를 하나로 묶어서 동시에 적용
(Text("자간과 기준선").kerning(8) //자간
+ Text(" 조정도 쉽게 가능합니다.").baselineOffset(8)) // 기준선
.font(.system(size: 16))
Text 수식어 적용의 순서의 중요성
Text 와 View 의 font, foregroundColor 의 정의
extention Text {
// Text와 View 모두 있는 수식어
public func font(_ font: Font?) -> Text
public func foregroundColor(_ color: Color?) -> Text
// Text에만 있는 수식어
public func bold() -> Text
public func italic() -> Text
}
extention View {
// Text와 View 모두 있는 수식어
public func font(_ font: Font?) -> some View
public func foregroundColor(_ color: Color?) -> some View
// View 에만 있는 수식어
public func padding(
_ edges: Edge.Set = .all,
_ length: CGFloat? = nil
) -> some View
}
Text에도, View에도 font 와 foregrountColor 가 정의되어 있다
단, 반환 타입이 다름을 주시하자
View 에만 있거나, Text에만 있는 경우 순서가 중요하다
잘못된 순서로인한 변화 예제
Text("SwiftUi")
.font(.title) // Text - 호출자의 타입이 Text
.bold() // Text
.padding() // View - padding 수식어 호출 이후로는 Text가 아닌 View 반환
Text("SwiftUi")
.bold() // Text
.padding() // View
.font(.title) // View - 동일한 font 수식어를 호출해도 호출자에 따라 반환타입 다름
Text("SwiftUi")
.padding() // View
.bold() // 컴파일 오류 - View에는 bold 가 정의되어 있지 않기 때문
.font(.title)
Text("SwiftUi")
.font(.title) // View
.padding() // View
.bold() // 컴파일 오류 - View에는 bold 가 정의되어 있지 않기 때문
잘못된 순서로 인한 변화 예제2
// 1번
Text("🐶🐱🐭🐹🐼").font(.largeTitle)
.background(Color.yellow) // 배경 색상지정이 Text 크기에 따라 우선 적용
.padding() // 배경 색상이 적용된 Text에 padding 적용
// 2번
Text("🐶🐱🐭🐹🐼").font(.largeTitle)
.padding() // Text에 Padding 을 우선 적용!
.background(Color.yellow) // padding 이 적용된 부분에 배경색상 지정
1번
2번
보이는 것과 같이 순서에 따라 View 자체가 어떻게 그려질지 보여준다
이처럼, SwiftUI에서는 수식어의 순서에 따라 오류가 날수도, 보여지는 뷰가 다를수도 있음을 유의하자