05 文字的属性和格式化

作者: 归零者 分类: Xamarin.forms基础 发布时间: 2017-09-05 15:28

05文字的属性和格式化

Label,其文字大小或字体,通常预设是各个平台的预设值,不过 Label 也定义了一些属性,开发者可以定制化。

Label 有三个属性可以更改:

  1. 平台是否支持此字体
  2. 此字体在此平台上被称作什么

 

在这里,Xamarin.Forms Device 提供静态方法 GetNamedSize 让我们更方便的去设置字体大小,方法需要带入 NameSize 参数,而 NameSize 包含的物件成员如下:

  1. Default
  2. Micro
  3. Small
  4. Medium
  5. Large

GetNamedSize 还需要带入物体的类别,像是 typeof(Label) 或是 typeof(Button)。

 

FontAttributes 是這三個最容易使用的属性,可以带入 Bold 或是 Italic。

来看一下代码:


  1. class
    GreetingsPage : ContentPage
  2. {

  3. public
    GreetingsPage()
  4. {

  5. Content = new
    Label
  6. {

  7. Text = “Greetings, Xamarin.Forms!”,

  8. HorizontalOptions = LayoutOptions.Center,

  9. VerticalOptions = LayoutOptions.Center,

  10. FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),

  11. FontAttributes = FontAttributes.Bold | FontAttributes.Italic
  12. };
  13. }
  14. }


三个平台的执行结果如下:


文字格式化

Label 除了 Text 可以设定文字外,也提供了一个 FormattedText 属性让开发者分段设置文字和其属性.

话一点就是,如果同一段文字內每个句子的属性都要不一样,就能用 FormattedText 分別处理。

FormattedText 的类为 FormattedString,而 FormattedString 提供 Spans属性可以使用,其类为 IList<Span>,每个 Span 底下有六种属性可以设定:

  • Text
  • FontFamily
  • FontSize
  • FontAttributes
  • ForegroundColor
  • BackgroundColor

     

    直接看代码:


  1. public
    class
    VariableFormattedTextPage : ContentPage
  2. {

  3. public
    VariableFormattedTextPage()
  4. {

  5. FormattedString formattedString = new
    FormattedString();
  6. formattedString.Spans.Add(new
    Span
  7. {

  8. Text = “I “
  9. });
  10.  
     
  11. formattedString.Spans.Add(new
    Span
  12. {

  13. Text = “love”,

  14. FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),

  15. FontAttributes = FontAttributes.Bold
  16. });
  17.  
     
  18. formattedString.Spans.Add(new
    Span
  19. {

  20. Text = ” Xamarin.Forms!”
  21. });
  22.  
     

  23. Content = new
    Label
  24. {

  25. FormattedText = formattedString,

  26. HorizontalOptions = LayoutOptions.Center,

  27. VerticalOptions = LayoutOptions.Center,

  28. FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
  29. };
  30. }
  31. }


上方是构造的方式,声明每个 Span 和其属性后加入 FromattedString 內,
不过,也可以直接在 Label 內初始化 FormattedText :


  1. public
    VariableFormattedTextPage()
  2. {

  3. Content = new
    Label
  4. {

  5. FormattedText = new
    FormattedString
  6. {

  7. Spans =
  8. {

  9. new
    Span
  10. {

  11. Text = “I “
  12. },

  13. new
    Span
  14. {

  15. Text = “love”,

  16. FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),

  17. FontAttributes = FontAttributes.Bold
  18. },

  19. new
    Span
  20. {

  21. Text = ” Xamarin.Forms!”
  22. }
  23. }
  24. },

  25. HorizontalOptions = LayoutOptions.Center,

  26. VerticalOptions = LayoutOptions.Center,

  27. FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
  28. };
  29. }

执行结果如下 


 

可以新增值为 NewLine 的 Span 来换行。

下方代码是用循环将每一个字体大小显示出来,并与每个 Span 之间加入换行:


  1. public
    class
    NamedFontSizesPage : ContentPage
  2. {

  3. public
    NamedFontSizesPage()
  4. {

  5. FormattedString formattedString = new
    FormattedString();

  6. NamedSize[] namedSizes =
  7. {

  8. NamedSize.Default,

  9. NamedSize.Micro,

  10. NamedSize.Small,

  11. NamedSize.Medium,

  12. NamedSize.Large
  13. };
  14.  
     

  15. foreach (NamedSize namedSize in namedSizes)
  16. {

  17. double fontSize = Device.GetNamedSize(namedSize, typeof(Label));
  18. formattedString.Spans.Add(new
    Span
  19. {

  20. Text = String.Format(“Named Size = {0} ({1:F2})”,
  21. namedSize,
  22. fontSize),

  23. FontSize = fontSize
  24. });
  25.  
     

  26. if (namedSize != namedSizes.Last())
  27. {
  28. formattedString.Spans.Add(new
    Span
  29. {

  30. Text = Environment.NewLine + Environment.NewLine
  31. });
  32. }
  33. }
  34.  
     

  35. Content = new
    Label
  36. {

  37. FormattedText = formattedString,

  38. HorizontalOptions = LayoutOptions.Center,

  39. VerticalOptions = LayoutOptions.Center
  40. };
  41. }
  42. }
  43.  
     

执行行结果如下:



不过,在 Label 显示一个段落的文字,用 Span 每个拆开并不是很好的方法… 更多的情況下段落都很长的..长到需要上下滚动.

下一章节来讨论使用 StackLayout 和 ScrollView 如何让多行的文字在手机上滚动。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

说点什么

avatar
  Subscribe  
提醒
跳至工具栏