SwiftUI 텍스트와 이미지

Posted on | In

개요

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



텍스트

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

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

Text 잘 정리된 블로그

Apple 공식문서


폰트 설정

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

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


폰트 굵기

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

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


글자색

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

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


텍스트 주변 여백

1
2
3
4
5
6
7
8
Text("hello")
  .padding()
  .padding(.all, 10) // 전체
  .padding(.top, 10) // 위
  .padding(.bottom, 10) // 아래
  .padding(.leading, 10) // 왼쪽
  .padding(.trailing, 10) // 오른쪽
  .padding([.top, .bottom, .trailing], 10) // 선택


배경색

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


굵게

1
2
Text("hello")
  .bold()


기울임

1
2
Text("hello")
  .italic()


밑줄

1
2
Text("hello")
  .underline()


취소선

1
2
Text("hello")
  .strikethrough()


숫자 사이 간격 추가

1
2
Text("hello")
  .monospacedDigit()


텍스트 사이 간격 조절

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

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

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

1
2
3
4
5
Text("hello")
  .kerning(-3)
  .kerning(3)
  .tracking(-3)
  .tracking(3)


텍스트 위아래 공간 조절

1
2
3
Text("hello")
  .baselineOffset(10)
  .baselineOffset(-10)


텍스트 전체 대소문자 변경

1
2
3
Text("hello")
  .textCase(.lowercase)
  .textCase(.uppercase)


텍스트 줄수 제한

1
2
Text("hello")
  .lineLimit(2)


텍스트 줄 사이 간격 조절

1
2
Text("hello")
  .lineSpacing(10)


정렬 방식

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



이미지

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

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

애플 공식문서


이미지 크기 조절

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

1
2
3
4
5
Image("SwiftUI")
  .resizable().frame(width: 50, height: 50) // 순서 바꾸면 안됨
  
Image("SwiftUI")
  .resizable(capInsets: .init(top: 0, leading: 50, bottom: 0, trailing:0))


이미지 크기 조절 모드

1
2
3
4
5
6
7
Image("SwiftUI")
  .resizable()
  .scaledToFit() //가로 세로중 작은값을 기준으로 비율을 유지한채로 리사이즈
  
Image("SwiftUI")
  .resizable()
  .scaledToFill()  //가로 세로중 큰값을 기준으로 비율을 유지한채로 리사이즈


이미지 비율 조정

1
2
3
4
5
6
7
8
9
//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)


이미지 형태

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


SF Symbols

1
Image(systemName: "star.circle")


심볼 사이즈 조절

1
2
3
Image(systemName: "star.circle").imageScale(.small)

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


심볼 굵기 조절

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