SwiftUI의 텍스트와 이미지에 대해서 공부해보자:)

개요

텍스트와 이미지등으로 뷰를 구성하는 방법을 알아보고 간단한 앱을 만들어보겠다.

---

텍스트

---

화면에 원하는 문자열을 표현하는 뷰이다.

Text("원하는 문자열")을 사용하면 된다.

Text 잘 정리된 블로그

Apple 공식문서

---

폰트 설정

---

함수 원형 : func font(_ font: Font?) -> Text

Text("hello")
  .font(.title)
  .font(.system(size: 16, weight: .light, design: .default))

---

폰트 굵기

---

함수 원형 : func fontWeight(_ weight: Font.Weight?) -> Text

Text("hello")
  .fontWeight(.black) 

---

글자색

---

함수 원형 : func foregroundColor(_ color: Color?) -> Text

Text("hello")
  .foregroundColor(.white) 

---

텍스트 주변 여백

---

Text("hello")
  .padding()
  .padding(.all, 10) // 전체
  .padding(.top, 10) // 위
  .padding(.bottom, 10) // 아래
  .padding(.leading, 10) // 왼쪽
  .padding(.trailing, 10) // 오른쪽
  .padding([.top, .bottom, .trailing], 10) // 선택

---

배경색

---

Text("hello")
  .background(Color.blue)   

---

굵게

---

Text("hello")
  .bold()  

---

기울임

---

Text("hello")
  .italic()  

---

밑줄

---

Text("hello")
  .underline()

---

취소선

---

Text("hello")
  .strikethrough()   

---

숫자 사이 간격 추가

---

Text("hello")
  .monospacedDigit()

---

텍스트 사이 간격 조절

---

텍스트 사이 간격을 조절 하는데에는 kerning과 tracking이 있다.

kerning은 글자 크기, 글자 폰트에 따라서 달라지지만 tracking은 상관없이 조절한다.

둘다 있다면 tracking이 우선사항이다.

Text("hello")
  .kerning(-3)
  .kerning(3)
  .tracking(-3)
  .tracking(3)

---

텍스트 위아래 공간 조절

---

Text("hello")
  .baselineOffset(10)
  .baselineOffset(-10)

---

텍스트 전체 대소문자 변경

---

Text("hello")
  .textCase(.lowercase)
  .textCase(.uppercase)

---

텍스트 줄수 제한

---

Text("hello")
  .lineLimit(2)   

---

텍스트 줄 사이 간격 조절

---

Text("hello")
  .lineSpacing(10) 

---

정렬 방식

---

Text("hello")
  .multilineTextAlignment(.trailing)   

---

이미지

---

에셋에 이미지가 있다면 Image("이미지 이름")의 명령으로 불러올 수 있다.

.frame(width: , height: )의 수식어는 크기를 변경시키는 것이 아니라 띄워주는 크기를 조절하는 것이다.

애플 공식문서

---

이미지 크기 조절

---

func resizable(capInsets: EdgeInsets = EdgeInsets(), resizingMode: Image.ResizingMode = .stretch) -> Image

Image("SwiftUI")
  .resizable().frame(width: 50, height: 50) // 순서 바꾸면 안됨

Image("SwiftUI")
  .resizable(capInsets: .init(top: 0, leading: 50, bottom: 0, trailing:0))

---

이미지 크기 조절 모드

---

Image("SwiftUI")
  .resizable()
  .scaledToFit() //가로 세로중 작은값을 기준으로 비율을 유지한채로 리사이즈

Image("SwiftUI")
  .resizable()
  .scaledToFill()  //가로 세로중 큰값을 기준으로 비율을 유지한채로 리사이즈

---

이미지 비율 조정

---

//scaledTofit 모드 적용, 너비가 높이보다 1.6배
Image("SwiftUI")
  .resizable()
  .aspectRatio(CGSize(width: 1.6, height: 1), contentMode: .fit)

//scaledToFill 모드 적용, 너비가 높이보다 0.7배
Image("SwiftUI")
  .resizable()
  .aspectRatio(0.7, contentMode: .fill)

---

이미지 형태

---

Image("SwiftUI")
  .clipShape(Circle())  //원
  .clipShape(Rectangle().inset(by: 10) // 10 줄인 사각형

---

SF Symbols

---

Image(systemName: "star.circle")

---

심볼 사이즈 조절

---

Image(systemName: "star.circle").imageScale(.small)

Image(systemName: "star.circle").font(.body)

---

심볼 굵기 조절

---

Image(systemName: "star.circle").font(Font.title.weight(.black))