요약 5 장입니다.Summary of Chapter 5. 크기를 사용 하 여 처리Dealing with sizes

샘플 다운로드 샘플 다운로드Download Sample Download the sample

참고

이 페이지에 대 한 참고 사항 Xamarin.Forms 책의 내용을에서 달라졌는지를 위치 하는 영역을 나타냅니다.Notes on this page indicate areas where Xamarin.Forms has diverged from the material presented in the book.

Xamarin.Forms의 몇 가지 크기로 지금 발생 했습니다.Several sizes in Xamarin.Forms have been encountered so far:

  • IOS 상태 표시줄의 높이 20The height of the iOS status bar is 20
  • BoxView 기본 너비 및 높이가 40The BoxView has a default width and height of 40
  • 기본값 PaddingFrame 은 20The default Padding in a Frame is 20
  • 기본값 SpacingStackLayout 6The default Spacing on the StackLayout is 6
  • Device.GetNamedSize 메서드는 숫자 글꼴 크기를 반환 합니다.The Device.GetNamedSize method returns a numeric font size

이러한 크기 (픽셀) 않습니다.These sizes are not pixels. 대신 장치 독립적 단위 각 플랫폼에서 독립적으로 인식 됩니다.Instead, they are device-independent units recognized independently by each platform.

픽셀, 지점, dps, Dip 및 DIUsPixels, points, dps, DIPs, and DIUs

Apple Mac 및 Microsoft Windows의 기록, 초기에 프로그래머는 픽셀 단위로 작동합니다.Early in the histories of the Apple Mac and Microsoft Windows, programmers worked in units of pixels. 그러나 출현 고해상도 디스플레이의 화면 좌표를 가상화 하 고 추상 방법이 필요합니다.However, the advent of higher-resolution displays required a more virtualized and abstract approach to screen coordinates. Mac 환경에서 프로그래머의 단위로 작동 포인트, 일반적으로 1/72 인치, Windows 개발자가 사용 하는 동안 장치 독립적 단위 1/96 인치를 기반으로 (DIUs).In the Mac world, programmers worked in units of points, traditionally 1/72 inch, while Windows developers used device-independent units (DIUs) based on 1/96 inch.

그러나 모바일 장치에는 일반적으로 얼굴에 더 가깝습니다 유지 하 고 데스크톱 보다 더 높은 해상도 화면 보다 높은 픽셀 밀도 허용할 수 있는지를 의미 합니다.Mobile devices, however, are generally held much closer to the face and have a higher resolution than desktop screens, which implies that a greater pixel density can be tolerated.

Apple iPhone 및 iPad 장치를 대상으로 하는 프로그래머의 단위에서 작업을 계속할 지점, 1/96 인치 사항은 160 되지만 합니다.Programmers targeting Apple iPhone and iPad devices continue to work in units of points, but there are 160 of these points to the inch. 장치에 따라 1, 2 또는 3 점 픽셀 수입니다.Depending on the device, there may be 1, 2, or 3 pixels to the point.

Android는 유사 합니다.Android is similar. 프로그래머의 단위로 작동 밀도 독립적 픽셀 (dps) dps 픽셀 사이의 관계는 1/96 인치 160 dps 기반으로 합니다.Programmers work in units of density-independent pixels (dps), and the relationship between dps and pixels is based on 160 dps to the inch.

Windows 휴대폰 및 모바일 장치 160 장치 독립적인 1/96 인치 단위 가까운 내재 된 배율 설정도 있습니다.Windows phones and mobile devices have also established scaling factors that imply something close to 160 device-independent units to the inch.

참고

Xamarin.Forms는 모든 Windows 기반 전화 또는 모바일 장치에 더 이상 지원합니다.Xamarin.Forms no longer supports any Windows-based phone or mobile device.

요약 하자면, 휴대폰 및 태블릿을 대상으로 하는 Xamarin.Forms 프로그래머 모든 측정 단위는 다음 조건을 기반으로 한다는 가정할 수 있습니다.In summary, a Xamarin.Forms programmer targeting phones and tablets can assume that all units of measurement are based on the following criterion:

  • 에 해당 하는 1/96 인치 160 단위160 units to the inch, equivalent to
  • 64는 센티미터 단위64 units to the centimeter

읽기 전용 Width 하 고 Height 정의한 속성 VisualElement 기본값이 "모의"의 값 –1입니다.The read-only Width and Height properties defined by VisualElement have default "mock" values of –1. 요소 크기 조정 및 레이아웃에 적용 된 경우에 이러한 속성 반영 됩니다 장치 독립적 단위에 있는 요소의 실제 크기입니다.Only when an element has been sized and accommodated in layout will these properties reflect the actual size of the element in device-independent units. 이 크기에 Padding 요소에 설정 하지 않고는 Margin합니다.This size includes any Padding set on the element but not the Margin.

시각적 요소 발생 합니다 SizeChanged 이벤트 때 해당 Width 또는 Height 변경 되었습니다.A visual element fires the SizeChanged event when its Width or Height has changed. 합니다 WhatSize 샘플 프로그램의 화면 크기를 표시 하려면이 이벤트를 사용 합니다.The WhatSize sample uses this event to display the size of the program's screen.

Metrical 크기Metrical sizes

MetricalBoxView 사용 하 여 WidthRequest HeightRequest 표시할를 BoxView 1 인치 높이 개와 센티미터 다양 합니다.The MetricalBoxView uses WidthRequest and HeightRequest to display a BoxView one inch tall and one centimeter wide.

예상된 글꼴 크기Estimated font sizes

합니다 FontSizes 샘플은 160 인치 단위에-the-인치 규칙을 사용 하 여 글꼴 크기를 포인트 단위로 지정 하는 방법을 보여 줍니다.The FontSizes sample shows how to use the 160-units-to-the-inch rule to specify font sizes in units of points. 이 기술을 사용 하 여 플랫폼 간 visual 일관성 보다는 낫습니다 Device.GetNamedSize합니다.The visual consistency among the platforms using this technique is better than Device.GetNamedSize.

사용 가능한 크기에 텍스트 맞춤Fitting text to available size

계산 하 여 특정 사각형 내에서 텍스트 블록에 맞게 수를 FontSizeLabel 다음 조건을 사용 하 여:It's possible to fit a block of text within a particular rectangle by calculating a FontSize of the Label using the following criteria:

  • 줄 간격은 120% 글꼴 크기 (Windows 플랫폼에서 130%)입니다.Line spacing is 120% of the font size (130% on the Windows platforms).
  • 평균 문자 너비는 글꼴 크기의 50%입니다.Average character width is 50% of the font size.

합니다 EstimatedFontSize 샘플에는이 기술을 보여 줍니다.The EstimatedFontSize sample demonstrates this technique. 되기 전에 작성 된이 프로그램을 Margin 속성은 사용 하기를 사용할 수는 ContentView 사용 하 여를 Padding 시뮬레이션 하려면 설정을 여백입니다.This program was written before the Margin property was available, so it uses a ContentView with a Padding setting to simulate a margin.

예상된 글꼴 크기의 3 배가 스크린 샷Triple screenshot of estimated font size

크기에 맞게 시계A fit-to-size clock

합니다 FitToSizeClock 샘플을 사용 하 여 보여 줍니다 Device.StartTimer 주기적으로 클록을 업데이트할 때 응용 프로그램에 알리는 하는 타이머를 시작 하려면.The FitToSizeClock sample demonstrates using Device.StartTimer to start a timer that periodically notifies the application when it's time to update the clock. 글꼴 크기를 최대한 크게 표시할 수 있도록 페이지 너비의 1/6으로 설정 됩니다.The font size is set to one-sixth of the page width to make the display as large as possible.

액세스 가능성 문제Accessibility issues

합니다 EstimatedFontSize 프로그램 및 FitToSizeClock 두 프로그램 결함이 있다는 포함: 사용자가 Android 또는 Windows 10 Mobile 휴대폰의 내게 필요한 옵션 설정을 변경 하면 프로그램 이상 예측할 수 얼마나 큰 텍스트를 렌더링 하 글꼴 크기를 기준으로 합니다.The EstimatedFontSize program and the FitToSizeClock program both contain a subtle flaw: If the user changes the phone's accessibility settings on Android or Windows 10 Mobile, the program no longer can estimate how large the text is rendered based on the font size. 합니다 AccessibilityTest 샘플에서는이 문제를 보여 줍니다.The AccessibilityTest sample demonstrates this problem.

경험적으로 맞춤 텍스트Empirically fitting text

텍스트 사각형에 맞게 다른 방법은 알려지고 실험적으로 렌더링 된 텍스트 크기를 계산 하 고 위나 아래로 조정 하는 것입니다.Another way to fit text to a rectangle is to empirically calculate the rendered text size and adjust it up or down. 책 호출에서 프로그램 GetSizeRequest 원하는 크기를 요소의 시각적 요소에 있습니다.The program in the book calls GetSizeRequest on a visual element to obtain the element's desired size. 메서드는 더 이상 사용 되지 않습니다을 프로그램 대신 호출 해야 Measure 합니다.That method has been deprecated, and programs should instead call Measure.

에 대 한는 Label인수를 설정 해야 하지만 두 번째, 첫 번째 인수에 줄 바꿈을 허용) (컨테이너의 너비를 해야 합니다.를 Double.PositiveInfinity 비제한 높이 확인 합니다.For a Label, the first argument should be the width of the container (to allow wrapping), while the second argument should be set to Double.PositiveInfinity to make the height unconstrained. 합니다 EmpiricalFontSize 샘플에는이 기술을 보여 줍니다.The EmpiricalFontSize sample demonstrates this technique.