[SwiftUI-기초] Material, style, safe area, color

Color

• Color를 주면서 이런 식으로 이용할 수 있다. 

• 이렇게도 할 수 있는데 위와 아래의 화면 구성은 차이가 없다. 

• 이렇게 해도 차이가 없다. 
• 다만 두번째 코드처럼 문맥이 존재하지 않아서 ".red" 이런 식으로 표현하지 않고, 전체 문맥을 명시한다. 
• 위와 아래의 코드 차이는 색상이 Text 의 배경색으로 존재하느냐, 그 자체로 하나의 콘텐츠로서 존재하느냐의 차이다.

• Frame으로 범위를 제한한다. 

• 최소 너비는 200, 다른 콘텐츠를 넘지 않는 이상 최대로 넓어질 수 있음
• 최대 높이는 200 

Color.primary
Color.secondary

• Color의 색조를 말하지 않고 용도를 이야기하는 경우
• 기기의 우선값에 따라 글의 색상을 표시
  • DarkMode 일 경우 글자는 흰색, 기본은 검정

SafeArea

• Color.red를 선언해도 일부에 흰 영역이 남아있는 것을 볼 수 있다. 
• 기기에 따라 다르다. iPhone 13의 경우 상태바와 홈 인디케이터 부분이 흰색으로 남는다. 
• 이 부분을 공백으로 남겨두는 이유는 중요한 요소들이 다른 UI 기능으로 묻히거나, 코너에 마감에 잘리는 것을 원하지 않기 때문
• 중간 영역을 Safe Area 라고 하며, 이 부분은 notch에 잘릴 걱정이 없다. 
• SafeArea 보다 더 넓게 채우고 싶다면 .ignoresSafeArea() 를 선언해야 한다. 
• 각 에지를 넘어서 UI를 채운다. 아무것도 명시하지 않으면 전체를 다 채움

 

Material

• 배경 색상 뿐만 아니라 물체를 투과시킨 듯한 빛을 내도록 할 수 있다. 
• Material이라는 것을 추가함으로써  view에 블러 효과를 적용할 수 있다. 

apple

apple

• 다크 모드 여부에 따라 자동 적용

• 여기서 스타일이라는 것을 적용하면 단일 색조가 아니라 주변의 문맥을 통해 자신을 인식하는 secondary 같은 스타일을 사용할 수 있다. 
• 말이 좀 어려운데, 주변에서 색이나 패턴을 인식하는 것임
• 주변의 색을 지정하지 않으면 기본 색으로 설정을 함

기본 색을 지정하지 않은 경우

기본색을 지정한 경우

 

기본색을 지정한 경우

• 주어진 스타일의 문맥에 의존하는 렌더링 방식을 제공
• 플랫폼이나 기기의 다크 모드 라이트 모드 등에 영향을 받음
• Secondary 같은 계층적인 foregroundStyle 은 그 자체로 style을 부여하진 않지만, 주변의 style을 수식함
• 현재 foreground style 의 primary 수준을 주어진 계층적 스타일의 정도만큼 적용
• 예를 들어 primary가 100 수준의 밝기이고 secondary 가 항상 primary의 1/2 수준만큼이라면 primary가 150 수준의 밝기 일 때 secondary의 밝기 수준은? 
  • 결론적으로 절대적인 컬러나 값이 존재하는 것이 아니라 현재 primary에 수준에 상대적이라는 뜻
• 꾸며줄 현재 적용된 foreground 스타일을 알기 위해, SwiftUI 는 foregroundStyle() 혹은 foregroundColor에 적용할 가장 안쪽에 포함된 style을 찾습니다. 
• foregroundStyle VS foregroundColor
  • color 는 고정된 색상 설정
  • style 은 전체 문맥에서 상대적인 색상이나 패턴 설정

Style

• 요소의 foreground를 채우는 색상이나 패턴
• Color, image, linearGradient 등을 스타일로 사용
• text, shapes, symbol을 포함한 이미지에 사용
• 포함하는 뷰의 스타일에 관련한 스타일을 설정하려면, semantic(의미적인) 스타일을 사용
  • primary, secondary 등

 

요약

• ZStack 은 배경색을 설명할 때나 깊이를 표현할 때 사용
• Material이라는 배경색과 콘텐츠 사이에 얇은 막이 존재
• Color는 절대적, Style 은 상대적 

 

참조

https://developer.apple.com/documentation/swiftui/material/

Apple Developer Documentation

https://developer.apple.com/documentation/swiftui/view/foregroundstyle(_:) 

Apple Developer Documentation

https://www.hackingwithswift.com/books/ios-swiftui/colors-and-frames

Colors and frames - a free Hacking with iOS: SwiftUI Edition tutorial