[SwiftUI] Text 뷰 심화 정리 (2)

Text 글자색 바꾸기 [foregroundColor]

Text("Hello swiftUI!")
    .foregroundColor(Color.white)

Text 뷰 프레임에 자동으로 글자 크기 조정하기 [minimumScaleFactor]

프레임이 고정되어있을때 프레임보다 많은량에 문자열이 들어간 Text뷰에선 자동으로 …처리가 되고 문자열이 전부 보이지 않게 되는 현상이 있습니다.
이럴때 모든 문자열이 보일 수 있게 하는 방법이 있습니다.

아래 예시를 봐보자

Text("Hello swiftUI!")
    .font(.system(size: 50, weight: .bold))
    .frame(width: 100, height: 100)
    .foregroundColor(Color.white)
    .background(Color.black)

이렇게 하면 “He…” 으로 밖에 나타나질 않는다.

이때 minimumScaleFactor옵션을 사용하면 된다.

Text("Hello swiftUI!")
    .font(.system(size: 50, weight: .bold))
    .frame(width: 100, height: 100)
    .foregroundColor(Color.white)
    .background(Color.black)
    .minimumScaleFactor(0.2)

정상적으로 모든 문자열이 표시 되는 것을 확인 할 수 있다.
minimumScaleFactor 은 기본값이 1 이며 적용된 Text 에 font size 가 어디까지 줄일 수 있는지 결정하는 옵션이다.

즉, font size 50 * 0.2 = 10 까지 표현 할 수 있음을 알 수 있습니다.
즉 .frame(width: 100, height: 100) 공간에 font size가 최소10으로 할당될 수 있습니다.

Text("Hello swiftUI!Hello swiftUI!Hello swiftUI!Hello swiftUI!Hello swiftUI!Hello swiftUI!Hello swiftUI!Hello swiftUI!Hello swiftUI!Hello swiftUI!")
                    .font(.system(size: 50, weight: .bold))
                    .frame(width: 100, height: 100)
                    .foregroundColor(Color.white)
                    .background(Color.black)
                    .minimumScaleFactor(0.2)

Text 정렬 (alignment)

Text뷰에서 정렬은 frame을 적용하면 함께 적용이 가능합니다.

Text("Hello swiftUI!")
    .frame(width: 100, height: 100)

위 코드처럼 적용을 하지 않았을때는 .center가 기본값으로 할당 됩니다.

Text("Hello swiftUI!")
    .frame(width: 100, height: 100, alignment: .center)

정렬은 단일정렬과 복합정렬이 가능합니다.

/// A guide marking the center of the view.
public static let center: Alignment

/// A guide marking the leading edge of the view.
public static let leading: Alignment

/// A guide marking the trailing edge of the view.
public static let trailing: Alignment

/// A guide marking the top edge of the view.
public static let top: Alignment

/// A guide marking the bottom edge of the view.
public static let bottom: Alignment

/// A guide marking the top and leading edges of the view.
public static let topLeading: Alignment

/// A guide marking the top and trailing edges of the view.
public static let topTrailing: Alignment

/// A guide marking the bottom and leading edges of the view.
public static let bottomLeading: Alignment

/// A guide marking the bottom and trailing edges of the view.
public static let bottomTrailing: Alignment

Text 가변 프레임

swiftUI 에서는 frame을 가변해서 사용할 수 있습니다.
frame

Text("Hello swiftUI!")
    .frame(minWidth: 0,
           idealWidth: 100,
           maxWidth: 100,
           minHeight: 0,
           idealHeight: 100,
           maxHeight: 100,
           alignment: .center)

여기서 maxWidth 와 maxHeight 에 .infinity 를 줄 수 있다.
그렇게 하게 되면 해당 부모뷰의 상황에 따라 프레임의 최대가 바뀌게 된다.

Text("Hello swiftUI!")
    .frame(minWidth: 0,
           idealWidth: 100,
           maxWidth: .infinity,
           minHeight: 0,
           idealHeight: 100,
           maxHeight: .infinity,
           alignment: .center)

코드에는 분명 maxHeight 에도 .infinity 라고 지정을 했지만 실제로 적용 되는 뷰의 형태는 스크린샷이미지처럼 좌우로만 꽉 채워진 상태입니다.
이는 해당 뷰가 VStack 하위뷰로 있기에 이렇게 적용 되는것으로 보입니다.

마지막으로

idealWidth, idealHeight 에 대해서

이는 프레임 최적의 크기를 설정할 수 있는 속성입니다. 이는 maxWidth, maxHeight 속성보다 우선 적용되는 것으로 확인할 수 있습니다.

Text("Hello swiftUI!")
                    .frame(minWidth: 0,
                           idealWidth: 300,
                           maxWidth: 100,
                           minHeight: 0,
                           idealHeight: 300,
                           maxHeight: 100,
                           alignment: .center)

여기서 이상한 점을 볼수 있는데 분명 idealWidth, idealHeight 에 300을 할당했지만
idealHeight에는 300 적용되긴 했지만 스크린샷과 같이 적용된 모양인걸 확인 할 수 있습니다.
이 부분에대해 명쾌하게 학습할 수 없었습니다. 결과 프레임의 이상적인 값을 주는 변수이기에 저렇게 적용된것으로 보입니다.

부족한 게시글 읽어주셔서 감사합니다.