第五章:尺寸处理(3)

简介:

将文本拟合为可用的大小
您可能需要将文本块合并到特定的矩形区域。 可以计算一个值
对于Label的FontSize属性,基于文本字符的数量,矩形区域的大小以及两个数字。
第一个数字是行间距。 这是每行文本的标签视图的垂直高度。 对于与三个平台关联的默认字体,它与FontSize属性大致相关,如下所示:
 iOS: lineSpacing = 1.2 * label.FontSize
 Android: lineSpacing = 1.2 * label.FontSize
 Windows Phone: lineSpacing = 1.3 * label.FontSize
第二个有用的数字是平均字符宽度。 对于默认字体的大写和小写字母的正常混合,平均字符宽度约为字体大小的一半,与平台无关:
 averageCharacterWidth = 0.5 * label.FontSize
例如,假设您想要包含宽度为320个单位的80个字符的文本字符串,并且希望字体大小尽可能大。 将宽度(320)除以字符数(40)的一半,即可得到8的字体大小,您可以将其设置为Label的FontSize属性。 对于有些不确定且不能事先测试的文本,您可能希望使此计算更保守一点以避免意外。
以下程序使用行间距和平均字符宽度来适合页面上的文本段落,减去状态栏占用的iPhone顶部区域。 为了在此程序中排除iOS状态栏,该程序使用ContentView。
ContentView派生自布局,但仅将Content属性添加到从布局继承的内容属性。 ContentView也是Frame的基类。 尽管ContentView除了占用矩形空间区域之外没有其他功能,但它有两个用途:大多数情况下,ContentView可以是其他视图的父级,以定义新的自定义视图。 但是ContentView也可以模拟边距。
正如您可能已经注意到的那样,Xamarin.Forms没有保证金的概念,传统上它与填充相似,不同之处在于填充位于视图和视图的一部分内,而保证位于视图之外,实际上是父视图的一部分。 ContentView让我们模拟这个。 如果您发现需要在视图上设置边距,请将该视图置于ContentView中,并将该Padding属性设置在ContentView上。 ContentView从Layout继承Padding属性。
EstimatedFontSize程序以稍微不同的方式使用ContentView:它在页面上设置惯用的填充以避免iOS状态栏,但随后将ContentView设置为该页面的内容。 因此,此ContentView与页面的大小相同,但不包括iOS状态栏。 正是在此ContentView上附加了SizeChanged事件,并且这是用于计算文本字体大小的此ContentView的大小。
SizeChanged处理程序使用第一个参数来获取触发事件的对象(本例中为ContentView),该对象是Label必须适合的对象。 计算在评论中描述:

public class EstimatedFontSizePage : ContentPage
{
    Label label;
    public EstimatedFontSizePage()
    {
        label = new Label();
        Padding = new Thickness(0,Device.OnPlatform(20, 0, 0), 0, 0);
        ContentView contentView = new ContentView
        {
            Content = label
        };
        contentView.SizeChanged += OnContentViewSizeChanged;
        Content = contentView;
    }
    void OnContentViewSizeChanged(object sender, EventArgs args)
    {
        string text =
        "A default system font with a font size of S " +
            "has a line height of about ({0:F1} * S) and an " +
            "average character width of about ({1:F1} * S). " +
            "On this page, which has a width of {2:F0} and a " +
            "height of {3:F0}, a font size of ?1 should " +
            "comfortably render the ??2 characters in this " +
            "paragraph with ?3 lines and about ?4 characters " +
            "per line. Does it work?";
        // Get View whose size is changing.
        View view = (View)sender;
        // Define two values as multiples of font size.
        double lineHeight = Device.OnPlatform(1.2, 1.2, 1.3);
        double charWidth = 0.5;
        // Format the text and get its character length.
        text = String.Format(text, lineHeight, charWidth, view.Width, view.Height);
        int charCount = text.Length;
        // Because:
        // lineCount = view.Height / (lineHeight * fontSize)
        // charsPerLine = view.Width / (charWidth * fontSize)
        // charCount = lineCount * charsPerLine
        // Hence, solving for fontSize:
        int fontSize = (int)Math.Sqrt(view.Width * view.Height /
 (charCount * lineHeight * charWidth));
        // Now these values can be calculated.
        int lineCount = (int)(view.Height / (lineHeight * fontSize));
        int charsPerLine = (int)(view.Width / (charWidth * fontSize));
        // Replace the placeholders with the values.
        text = text.Replace("?1", fontSize.ToString());
        text = text.Replace("??2", charCount.ToString());
        text = text.Replace("?3", lineCount.ToString());
        text = text.Replace("?4", charsPerLine.ToString());
        // Set the Label properties.
        label.Text = text;
        label.FontSize = fontSize;
    }
}

名为“?1”,“?? 2”,“?3”和“?4”的文本占位符被选择为唯一的,但其字符数与替换它们的数字相同。
如果目标是使文本尽可能大而文本不会溢出页面,则结果将验证该方法:
5_3

不错。 一点也不差。 文本实际上显示在所有三个平台上显示的少一行中,但该技术看起来很合理。 并非总是为横向模式计算相同的FontSize,但有时会发生这种情况:
5_4

目录
相关文章
|
28天前
|
计算机视觉 Python
目标检测笔记(四):自适应缩放技术Letterbox完整代码和结果展示
自适应缩放技术Letterbox通过计算缩放比例并填充灰边像素,将图片调整为所需尺寸,保持原始比例不变,广泛应用于目标检测领域。
28 1
目标检测笔记(四):自适应缩放技术Letterbox完整代码和结果展示
|
4月前
|
容器
软件开发常见流程之物理像素导致图片变形问题如何解决,先把图缩放为原先的两倍,再缩放,利用Cutterman生成矢量图
软件开发常见流程之物理像素导致图片变形问题如何解决,先把图缩放为原先的两倍,再缩放,利用Cutterman生成矢量图
|
数据可视化 异构计算
【视觉高级篇】19 # 如何用着色器实现像素动画?
【视觉高级篇】19 # 如何用着色器实现像素动画?
98 0
【视觉高级篇】19 # 如何用着色器实现像素动画?
【视觉高级篇】19 # 如何用着色器实现像素动画?2
【视觉高级篇】19 # 如何用着色器实现像素动画?
87 0
【视觉高级篇】19 # 如何用着色器实现像素动画?2
|
前端开发
前端知识案例学习9-可调整尺寸得UI
前端知识案例学习9-可调整尺寸得UI
132 0
前端知识案例学习9-可调整尺寸得UI
案例03 补充:金字塔等图形边框的绘制
案例03 补充:金字塔等图形边框的绘制
254 0
案例03 补充:金字塔等图形边框的绘制
|
Android开发 容器
第五章:尺寸处理(6)
经验拟合文本在具有特定尺寸的矩形内拟合文本的另一种方法涉及基于特定字体大小凭经验确定呈现文本的大小,然后向上或向下调整该字体大小。 无论可访问性设置如何,此方法都具有在所有设备上工作的优势。但是这个过程可能很棘手:第一个问题是字体大小和渲染文本的高度之间没有干净的线性关系。
943 0
|
Android开发 iOS开发 Windows
|
编解码 Android开发