第五章:尺寸处理(2)

简介:

Metrical大小
现在您已经知道Xamarin.Forms应用程序中的大小与英寸和厘米的度量尺寸大致相对应,您可以调整元素的大小以使它们在各种设备上大小相同。 这里有一个名为MetricalBoxView的程序,它显示一个宽约1厘米,高约1英寸的BoxView:

public class MetricalBoxViewPage : ContentPage
{
    public MetricalBoxViewPage()
    {
        Content = new BoxView
        {
            Color = Color.Accent,
            WidthRequest = 64,
            HeightRequest = 160,
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        };
    }
}

如果你真的拿着尺子到手机屏幕上的物体上,你会发现它不是所需的尺寸,但确实接近它,因为这些屏幕截图还证实:
5_1
这个程序是打算在手机上运行。 如果您想在平板电脑上运行它,则可以使用Device.Idiom属性为iPad和Windows平板电脑设置较小的因子。
估计的字体大小
Label和Button上的FontSize属性指定从下边界到下边界顶部的字体字符的大致高度,通常(取决于字体)还包括变音符号。 在大多数情况下,您需要将此属性设置为由Device.GetNamedSize方法返回的值。 这允许您指定NamedSize枚举的成员:
默认,微型,小型,中型或大型。
或者,您可以将FontSize属性设置为实际的数字字体大小,但会涉及一些小问题(稍后将详细讨论)。 大多数情况下,您可以在整个Xamarin.Forms中使用的设备无关单元中指定字体大小,这意味着您可以根据平台分辨率计算独立于设备的字体大小。
例如,假设您想在程序中使用12点字体。 你应该知道的第一件事是,尽管12磅字体可能对于印刷材料或桌面屏幕来说是舒适的尺寸,但在手机上它相当大。 但让我们继续。
英寸有72点,所以12点字体是一英寸的六分之一。 DPI分辨率为160,这是大约27个独立于设备的单元。
我们来编写一个名为FontSizes的小程序,该程序以类似于第3章中的NamedFontSizes程序的显示开始,但随后显示一些带有数字点大小的文本,并使用设备分辨率转换为与设备无关的单元:

public class FontSizesPage : ContentPage
{
    public FontSizesPage()
    {
        BackgroundColor = Color.White;
        StackLayout stackLayout = new StackLayout
        {
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center
        };
        // Do the NamedSize values.
        NamedSize[] namedSizes = 
        {
            NamedSize.Default, NamedSize.Micro, NamedSize.Small,
            NamedSize.Medium, NamedSize.Large
        };
        foreach (NamedSize namedSize in namedSizes)
        {
            double fontSize = Device.GetNamedSize(namedSize, typeof(Label));
            stackLayout.Children.Add(new Label
                {
                     Text = String.Format("Named Size = {0} ({1:F2})",
                                                             namedSize, fontSize),
                     FontSize = fontSize,
                     TextColor = Color.Black
                });
        }
        // Resolution in device-independent units per inch.
        double resolution = 160;
        // Draw horizontal separator line.
        stackLayout.Children.Add(
            new BoxView
            {
                 Color = Color.Accent,
                 HeightRequest = resolution / 80
            });
        // Do some numeric point sizes.
        int[] ptSizes = { 4, 6, 8, 10, 12 };
        foreach (double ptSize in ptSizes)
        {
            double fontSize = resolution * ptSize / 72;
            stackLayout.Children.Add(new Label
                {
                    Text = String.Format("Point Size = {0} ({1:F2})",
                                                   ptSize, fontSize),
                    FontSize = fontSize,
                    TextColor = Color.Black
                });
        }
        Content = stackLayout;
    }
}

为了便于在三个屏幕之间进行比较,背景已统一设置为白色,标签为黑色。 注意BoxView插入到两个foreach块之间的StackLayout中:HeightRequest设置使其与设备无关的高度约为八十英寸,并且类似于水平线。
有趣的是,基于计算的结果视觉大小在平台之间比命名大小更一致。 括号中的数字是设备独立单元中的数字FontSize值:
5_2

目录
相关文章
|
4月前
|
XML 搜索推荐 Java
Android App开发之自定义图形中位图与图形互转、剪裁图形内部区域、给图形添加部件的讲解及实战(附源码 简单易懂)
Android App开发之自定义图形中位图与图形互转、剪裁图形内部区域、给图形添加部件的讲解及实战(附源码 简单易懂)
33 0
|
3月前
|
移动开发 前端开发 iOS开发
H5页面布局之图片液态化(自适应)处理简述
H5页面布局之图片液态化(自适应)处理简述
19 0
H5页面布局之图片液态化(自适应)处理简述
|
4月前
|
C++
C++ Qt开发:SpinBox数值微调框组件
`QSpinBox`是Qt框架中的一个部件(Widget),用于提供一个方便用户输入整数值的界面元素。它通常以微调框(SpinBox)的形式展现,用户可以通过微调框上的按钮或手动输入来增加或减少整数值。在实际使用中该控件主要用于整数或浮点数的计数显示,与普通的`LineEdit`组件不同,该组件可以在前后增加特殊符号并提供了上下幅度的调整按钮,灵活性更强。
31 0
C++ Qt开发:SpinBox数值微调框组件
|
前端开发
前端知识案例学习9-可调整尺寸得UI
前端知识案例学习9-可调整尺寸得UI
113 0
前端知识案例学习9-可调整尺寸得UI
|
JSON JavaScript 编译器
Qt编写地图综合应用5-自适应拉伸
一、前言 用过echart的人都会遇到一个问题,就算是代码中写了window.onresize = echart.resize,也只是横向自适应拉伸填充页面,垂直方向不会变化,除非指定高度才可以,这就比较郁闷了,为何echart本身不会自适应呢?按道理不应该啊,莫非实现起来很困难?好吧先不管这个了.
687 0
Qt编写地图综合应用5-自适应拉伸
|
C#
WPF图形/文字特别效果之一:交叉效果探讨
原文:WPF图形/文字特别效果之一:交叉效果探讨 为了说明问题,先看下图:图1  完全重叠的单一颜色文字它是2008几个字的叠加,并且颜色为单一的红色。
761 0
|
C#
WPF图形/文字特别效果之一:交叉效果探讨(续)
原文:WPF图形/文字特别效果之一:交叉效果探讨(续) 在“WPF图形/文字特别效果之一:交叉效果探讨”(http://blog.csdn.net/johnsuna/archive/2008/05/08/2419404.aspx)一文中,我使用了根据笔画顺序书写及顺时针/逆时针的方式来对交叉块进行分类描述,籍以探讨如何给各交叉色块填充颜色。
937 0
|
Android开发 容器
第五章:尺寸处理(6)
经验拟合文本在具有特定尺寸的矩形内拟合文本的另一种方法涉及基于特定字体大小凭经验确定呈现文本的大小,然后向上或向下调整该字体大小。 无论可访问性设置如何,此方法都具有在所有设备上工作的优势。但是这个过程可能很棘手:第一个问题是字体大小和渲染文本的高度之间没有干净的线性关系。
914 0
|
Android开发 iOS开发 Windows