요약 - 5장. 크기 처리
참고 항목
이 책은 2016년 봄에 출간되었으며, 그 후로 업데이트되지 않았습니다. 이 책의 많은 내용이 지금까지도 무척 유용하나, 일부 내용은 오래되었고 올바르지 않거나 완전하지 않은 주제도 있습니다.
지금까지 Xamarin.Forms의 여러 크기를 살펴보았습니다.
- iOS 상태 표시줄의 높이는 20입니다.
BoxView의 기본 너비와 높이는 40입니다.Frame의 기본Padding은 20입니다.StackLayout의 기본Spacing은 6입니다.Device.GetNamedSize메서드는 숫자 글꼴 크기를 반환합니다.
이러한 크기는 픽셀이 아닙니다. 대신 각 플랫폼에서 독립적으로 인식하는 디바이스별 단위입니다.
픽셀, 포인트, dps, DIP 및 DIU
Apple Mac 및 Microsoft Windows 초창기에는 프로그래머들이 픽셀 단위로 작업했습니다. 그러나 고해상도 디스플레이의 출현으로 화면 좌표계에 대한 보다 가상화되고 추상적인 접근법이 필요했습니다. Mac 세계에서 프로그래머는 포인트(일반적으로 1/72인치) 단위로 작업했고, Windows 개발자는 1/96인치를 기준으로 하는 DIU(디바이스 독립적 단위)를 사용했습니다.
그러나 모바일 디바이스는 일반적으로 얼굴에 훨씬 더 가까이 대고 사용하고 데스크톱 화면보다 해상도가 높기 때문에 더 많은 픽셀 밀도가 허용될 수 있습니다.
Apple iPhone 및 iPad 디바이스를 대상으로 하는 프로그래머는 포인트 단위로 계속 작업하지만 이러한 포인트가 인치당 160개 있습니다. 디바이스에 따라 포인트당 1, 2 또는 3개 픽셀이 있을 수 있습니다.
Android도 유사합니다. 프로그래머는 dps(밀도 독립적 픽셀) 단위로 작업하며 dps와 픽셀 간의 관계는 인치당 160dps를 기준으로 합니다.
Windows 전화 및 모바일 디바이스도 인치당 160diu(디바이스 독립적 단위)에 가까운 배율 인수를 설정했습니다.
참고 항목
Xamarin.Forms는 Windows 기반 전화 또는 모바일 디바이스를 더 이상 지원하지 않습니다.
요약하자면 휴대폰 및 태블릿을 대상으로 하는 Xamarin.Forms 프로그래머는 모든 측정 단위가 다음 조건을 기반으로 한다고 가정할 수 있습니다.
- 인치당 160단위
- 센티미터당 64단위
읽기 전용 Width 및 Height 정의한 VisualElement 속성에는 기본적으로 "mock" 값이 -1입니다. 요소가 레이아웃에 맞게 크기가 조정된 경우에만 이러한 속성이 디바이스 독립적인 단위로 요소의 실제 크기를 반영합니다. 이 크기에는 요소에 설정된 Padding은 포함되어 있지만 Margin은 포함되어 있지 않습니다.
시각적 요소는 Width 또는 Height가 변경된 경우에 SizeChanged 이벤트를 발생시킵니다. WhatSize 샘플에서는 이 이벤트를 사용하여 프로그램 화면의 크기를 표시합니다.
메트릭 크기
MetricalBoxView는 WidthRequest 및 HeightRequest를 사용하여 높이 1인치, 너비 1인치의 BoxView를 표시합니다.
예상 글꼴 크기
FontSizes 샘플에서는 인치당 160단위 규칙을 사용하여 글꼴 크기를 포인트 단위로 지정하는 방법을 보여줍니다. 이 기법을 사용하는 플랫폼 간의 시각적 일관성은 Device.GetNamedSize보다 좋습니다.
사용 가능한 크기로 텍스트 맞춤
다음 기준에 따라 Label의 FontSize를 계산하여 텍스트 블록을 특정 사각형 내에 맞출 수 있습니다.
- 줄 간격은 글꼴 크기의 120%(Windows 플랫폼의 경우 130%)입니다.
- 평균 문자 너비는 글꼴 크기의 50%입니다.
EstimatedFontSize 샘플에서는 이 기법을 보여줍니다. 이 프로그램은 Margin 속성을 사용할 수 있게 되기 전에 작성되었으므로 Padding 설정이 지정된 ContentView를 사용하여 여백을 시뮬레이션합니다.
크기에 맞춤 시계
FitToSizeClock 샘플에서는 클록을 업데이트할 때 주기적으로 애플리케이션에 알릴 타이머를 시작하는 방법을 보여 Device.StartTimer 줍니다. 글꼴 크기는 디스플레이가 최대한 크게 표시되도록 페이지 너비의 1/6로 설정됩니다.
접근성 문제
EstimatedFontSize 프로그램과 FitToSizeClock 프로그램에는 미묘한 결함이 있습니다. 사용자가 Android 또는 Windows 10 Mobile에서 휴대폰의 접근성 설정을 변경하는 경우 프로그램은 더 이상 글꼴 크기에 따라 텍스트가 렌더링되는 크기를 예측할 수 없습니다. AccessibilityTest 샘플에서는 이 문제를 보여줍니다.
경험적으로 텍스트 맞춤
텍스트를 사각형에 맞게 조정하는 또 다른 방법은 렌더링된 텍스트 크기를 경험적으로 계산하고 위아래로 조정하는 것입니다. 이 책의 프로그램에서는 시각적 요소에 대한 GetSizeRequest를 호출하여 요소의 원하는 크기를 가져옵니다. 이 메서드는 더 이상 사용되지 않으며, 프로그램은 Measure를 대신 호출해야 합니다.
Label의 경우 첫 번째 인수는 래핑을 허용하기 위해 컨테이너의 너비여야 하고, 두 번째 인수는 높이가 제한되지 않도록 Double.PositiveInfinity로 설정되어야 합니다. EmpiricalFontSize 샘플에서는 이 기법을 보여줍니다.