Add rich graphics to your SwiftUI app

[HoJongE]

Safe Area

Safe Area 란?

• 아이폰 X 부터 등장한 개념으로, 이전 모델들과 다른 폼팩터와 홈버튼의 부재, 노치의 등장으로 나온 개념이다.

아이폰 8	아이폰 X

• 아이폰 X 의 경우 홈 버튼의 역할을 화면 하단의 홈 인디케이터로 대체되었으므로, 인디케이터와 노치를 침범하지 않고 UI 를 배치하기 위해 Safe Area 라는 영역이 존재한다.
• 또한 키보드가 올라올 때를 대비하여 Keyboard Safe Area 도 존재한다.

Container Safe Area	Keyboard not appear	Keyboard Safe Area

Safe Area 무시하기

• 배경 이미지같이 Safe Area 를 무시하고 화면을 전부 차지해야 하는 컨텐츠의 경우 Safe Area 를 무시하는 것이 가능하다.

ZStack {
      Color.green
      // Safe area 를 무시하고 화면 영역을 차지한다.
        .ignoresSafeArea()
      Text("Hello World")
    }

• 다음과 같이 특정 Safe Area 만 무시할 수도 있다.

ZStack {
      TextField("텍스트 필드", text: .constant("Keyboard Safe Area"))
        .font(.largeTitle)
        .padding()
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .border(.green, width: 2)
    // Keyboard Safe Area 만 무시한다.
    .ignoresSafeArea(.keyboard)

Material

Material 이란?

• Material 은 background modifier 에 적용할 수 있는 반투명한 배경이다.
• 단순한 반투명 배경이 아니며, 유리를 연상시키는 배경이다.
• 주로 색상이 있는 컨텐츠 위에 올라가는 UI 요소에서 활용할 수 있다.

ZStack {
      LinearGradient(colors: [.blue, .yellow, .red], startPoint: .topLeading, endPoint: .bottomTrailing)
        .ignoresSafeArea(.container)
      Label("Hello World", systemImage: "hand.raised")
        .padding()
        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 20))
    }

• 다음과 같이 6가지의 Material 이 존재하며, 다크 모드와 라이트 모드에서 서로 다르게 표현된다.

Foreground style

Foreground Style 이란?

• foreground UI elements 의 색을 채울 때 사용할 색상이나 패턴 등을 의미한다.

Color Foreground Style

HStack {
      Image(systemName: "hand.raised")
      Text("Hello World")
    }
    .foregroundStyle(.teal)

Gradient Foreground Style

HStack {
      Image(systemName: "hand.raised")
        .imageScale(.large)
      Text("Hello World")
        .font(.largeTitle)
    }
    .foregroundStyle(.linearGradient(colors: [.green, .blue], startPoint: .top, endPoint: .bottom))

Hierarchical foreground style

• 계층 구조에서 가장 가까운 부모에서 선언된 foregroundStyle 을 사용해, 자기의 계층에 맞게 해당 기본 스타일을 변경한다.

VStack {
      Text("Primary")
// primary 계층
        .foregroundStyle(.primary)
      Text("Secondary")
// secondary 계층
        .foregroundStyle(.secondary)
      Text("Tertiary")
// tertiary 계층
        .foregroundStyle(.tertiary)
      Text("Quatenary")
// quaternary 계층
        .foregroundStyle(.quaternary)
    }
    .font(.largeTitle)
    .foregroundStyle(.linearGradient(colors: [.green, .blue], startPoint: .top, endPoint: .bottom))

• 가장 가까운 부모인 VStack 에 적용된 foregroundStyle 을 기반으로, 각 Text 에 hierarchical style 이 적용된 모습을 볼 수 있다.

Safe Area Inset View Modifier

• 커스텀 Safe Area 를 생성할 수 있는 Modifier

func safeAreaInset<V>(edge: HorizontalEdge, alignment: VerticalAlignment = .center, spacing: CGFloat? = nil, content: () -> V) -> some View where V : View

• edge: content 의 크기에 따라 안전 영역을 생성할 가장자리
• spacing: Safe area content 와 Modifier 가 적용될 View 와의 여백을 나타낸다
• content: ViewBuilder function 으로, 사용자가 지정한 가장자리의 inset 에 content 를 그린다.

예시

• 다음과 같은 View 가 있다. Material 을 적용한 UI 요소가 화면 아래 부분에 배치된 UI 로, 스크롤을 끝까지 하면 Mint 색상의 Rectangle 과 bottom Text가 겹치는 것을 확인할 수 있다.

let colors: [Color] = [.red, .green, .blue, .cyan, .orange, .yellow, .purple, .indigo, .brown, .pink, .mint]

ZStack(alignment: .bottom) {
      ScrollView(.vertical, showsIndicators: false) {
        VStack(spacing: 0) {
          ForEach(colors, id: \.self) { color in
            Rectangle().fill(color).frame(height: 150)
          }
        }
      }
      Text("Bottom Safe Area Inset")
        .frame(width: UIScreen.main.bounds.width)
        .padding()
        .background(.regularMaterial)
    }

• 위와 같이 Material 배경을 가지는 Text 가 아래에 배치되고, Rectangle 색상과 믹스되는 효과를 유지하면서 ScrollView 가 실질적으로 차지하는 영역을 Text 를 침범하지 않게 만들기 위해, Bottom Safe Area Inset 을 사용할 수 있다.

    ScrollView(.vertical, showsIndicators: false) {
      VStack(spacing: 0) {
        ForEach(colors, id: \.self) { color in
          Rectangle().fill(color).frame(height: 150)
        }
      }
    }
// bottom 가장자리에 사용자 정의 content 가 그려질 safe area inset 을 생성!
    .safeAreaInset(edge: .bottom, spacing: 0) {
      Text("Bottom Safe Area Inset")
        .frame(width: UIScreen.main.bounds.width)
        .padding()
        .background(.regularMaterial)
    }

• ScrollView 의 마지막 요소인 Mint 색상의 Rectangle 도 화면에 정상적으로 표시되는 것을 확인할 수 있다.

[samsung-ga]

제가 알기론 내용이 더 있는 걸로 아는데요? 😿 ㅋㅋㅋ

[HoJongE]

제가 알기론 내용이 더 있는 걸로 아는데요? 😿 ㅋㅋㅋ

있는데 없습니다