Сводка Глава 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
  • Значение по умолчанию Padding в Frame — 20The default Padding in a Frame is 20
  • Значение по умолчанию Spacing на StackLayout 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, частные интерфейсы и 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 разработчики использовали аппаратно независимых единицах (DIUs) на основании 1/96 дюйма.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.

Мобильные устройства, тем не менее, обычно хранятся намного ближе к поверхности и имеют более высокое разрешение, чем desktop экраны, которые подразумевает, что можно скорректировать большей плотности пикселей.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 по-прежнему работать в единицах точек, но есть 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. Программисты работают в единицах density независимых пикселях (dps), и связь между dps и пикселей основан на 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 аппаратно независимых единиц в дюйме.Windows phones and mobile devices have also established scaling factors that imply something close to 160 device-independent units to the inch.

Примечание

Xamarin.Forms больше не поддерживает любого phone на основе 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:

  • 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 один дюйм высоту, а второй Расширенный сантиметры.The MetricalBoxView uses WidthRequest and HeightRequest to display a BoxView one inch tall and one centimeter wide.

Размеры шрифтов, оценкаEstimated font sizes

Размеры шрифта примере показано, как использовать 160-единицы дюймов правила для укажите размер шрифта в единицах точек.The FontSizes sample shows how to use the 160-units-to-the-inch rule to specify font sizes in units of points. Визуальная целостность между платформами, при использовании этого метода лучше, чем Device.GetNamedSize.The visual consistency among the platforms using this technique is better than Device.GetNamedSize.

Изменение размера текста по доступный размерFitting text to available size

Это возможно в соответствии с путем вычисления блок текста в прямоугольнике, определенного FontSize из Label используйте следующие критерии: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% от размера шрифта (130% на платформах Windows).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.

Тройной снимок предполагаемый размер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. Размер шрифта будет присвоено Шестая часть ширины страницы, чтобы сделать изображение как можно большего размера.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.