07 Frame、BoxView 和 读取文字资源

作者: 归零者 分类: Xamarin.forms基础 发布时间: 2017-09-06 11:31

这节介绍两个常用的UI控件,Frame 和 BoxView
先来介绍 Frame:
Frame

Frame 是一个于內部元件预设间隔 20 (padding = 20) ,自带边缘阴影特效的容器物件,有几个常用的属性可以设置:

  • HasShadow – 预设 True
  • BackgroundColor 
  • OutlineColor

    看名字就知道这些属性在设定什么了吧.

     

    不论是 Frame 或 BoxView,如沒有特別指定宽高,或是设定 LayoutOptions、HorizontalOptions,预设都是LayoutOptions.Fill (填满画面)

     

    举例来说,我们把一个居中的 Label 放在 Frame 內: 

  1. public
    class
    FramedTextPSZ ge : ContentPage
  2. {

  3. public
    FramedTextPage()
  4. {

  5. Padding = new
    Thickness(20);

  6. Content = new
    Frame
  7. {

  8. OutlineColor = Color.Accent,

  9. Content = new
    Label
  10. {

  11. Text = “I’ve been framed!”,

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

  13. HorizontalOptions = LayoutOptions.Center,

  14. VerticalOptions = LayoutOptions.Center
  15. }
  16. };
  17. }
  18. }


执行结果如下:可以观察到 Farme 预设填满整个画面。



接着我们把 Frame 置中,可以观察到 Frame 內边缘和 Label 间隔20单位。 

  1. public
    class
    FramedTextPage : ContentPage
  2. {

  3. public
    FramedTextPage()
  4. {

  5. Padding = new
    Thickness(20);

  6. Content = new
    Frame
  7. {

  8. OutlineColor = Color.Accent,

  9. HorizontalOptions = LayoutOptions.Center,

  10. VerticalOptions = LayoutOptions.Center,

  11. Content = new
    Label
  12. {

  13. Text = “I’ve been framed!”,

  14. FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
  15. }
  16. };
  17. }
  18. }



再来改一下颜色设定: 

  1. public
    class
    FramedTextPage : ContentPage
  2. {

  3. public
    FramedTextPage()
  4. {

  5. BackgroundColor = Color.Aqua;

  6. Content = new
    Frame
  7. {

  8. OutlineColor = Color.Black,

  9. BackgroundColor = Color.Yellow,

  10. HorizontalOptions = LayoutOptions.Center,

  11. VerticalOptions = LayoutOptions.Center,

  12. Content = new
    Label
  13. {

  14. Text = “I’ve been framed!”,

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

  16. FontAttributes = FontAttributes.Italic,

  17. TextColor = Color.Blue
  18. }
  19. };
  20. }
  21. }


执行结果:



BoxView

用法简单,直接看程式: 

  1. public
    class
    SizedBoxViewPage : ContentPage
  2. {

  3. public
    SizedBoxViewPage()
  4. {

  5. Content = new
    BoxView
  6. {

  7. Color = Color.Accent
  8. };
  9. }
  10. }


执行结果:同样预设是填满画布,iOS 甚至连最上方的 Bar 一起填满。



将BoxView 居中一下: 

  1. public
    class
    SizedBoxViewPage : ContentPage
  2. {

  3. public
    SizedBoxViewPage()
  4. {

  5. Content = new
    BoxView
  6. {

  7. Color = Color.Accent,

  8. HorizontalOptions = LayoutOptions.Center,

  9. VerticalOptions = LayoutOptions.Center
  10. };
  11. }
  12. }


执行结果:可以观察到 BoxView 有基本的宽高, 40 单位



这里要提到两个重要的属性:

  • WidthRequest
  • HeightRequest


    BoxView 就是将这两个预设设置为 40 单位。

     

    为什么说这两个属性重要,因为画面元件 ( VisualElement ) 其实也有 Width 和 Height 这两个单独属性,但:

    物件宽高要设定 WidthRequest 和 HeightRequest 才有效!

    一般来说 WidthRequest 和 HeightRequest 预设是 -1 (代表无定义),而这两个属性真正的含义是你希望(或要求)这个物件的宽高。

     

    *原因,是因为当你针对画面元件 (VisualElement) 设定 HorizontalOptions 或 VerticalOptions 时,WidthRequest 和 HeightRequest 会自动失效 (所以称之为要求的宽高)。

     

    举例来说,若你设定了 LayoutOptions.Fill,VisualElement 会填满画面而忽略 WidthRequest 或 HeightRequest 的设定。

     

    来设定下宽高:

  1. public
    class
    SizedBoxViewPage : ContentPage
  2. {

  3. public
    SizedBoxViewPage()
  4. {

  5. BackgroundColor = Color.Pink;

  6. Content = new
    BoxView
  7. {

  8. Color = Color.Navy,

  9. HorizontalOptions = LayoutOptions.Center,

  10. VerticalOptions = LayoutOptions.Center,

  11. WidthRequest = 200,

  12. HeightRequest = 100
  13. };
  14. }
  15. }


执行结果:



Stacklayout、Frame 和 BoxView 的排版,这里只贴上执行结果,有兴趣看代码就自行看原文电子书~

https://download.xamarin.com/developer/xamarin-forms-book/XamarinFormsBook-Ch04-Apr2016.pdf

 


读取 .txt 文件

小结最后要实际做一个电子书程序
本支程式会先读取 .txt文档后,将第一行文字设定为固定于顶端的标题 Label,而标题下方的內容文字可以滚动阅读。

读取 .txt 文档最简单的方式就是将文档放在 PCL 的內嵌资源內,如下步骤:

  1. 于 VisualStudio 项目右侧 → 新增文件夹,命名为 Texts
  2. 右键 Texts 文件夹,加入 → 现有项目 (读取 .txt 文档)
  3. 右键文档 → 属性 → 更改生成操作 (Build Action) 为内嵌资源 (Embedded Resourc
  4. 生成项目

以上四个步驟就能將 txt文档內嵌到 dll 档案內當作资源使用了。

 

程式方面,我们将用 Assembly 类提供的 GetManifestResourceStream 方法来获取这个资源。

 

Assembly 可以如下声明为物件使用:

Assembly assembly = GetType().GetTypeInfo().Assembly;

接着要注意的是使用 GetManifestResourceStream 时需要带入的参数Resource ID,这参数組成的格式如下:

Namespace.文件夹名.文件名.文档后缀

例如:BlackCat.Texts.TheBlackCat.txt

GetManifestResourceStream 执行后会返回一个 Stream 对象,我们就能用 .NET 的 StreamReader 来读取物件內的每一行文字。

来看代码:

  1. class
    BlackCatPage : ContentPage
  2. {

  3. public
    BlackCatPage()
  4. {

  5. StackLayout mainStack = new
    StackLayout();

  6. StackLayout textStack = new
    StackLayout
  7. {

  8. Padding = new
    Thickness(5),

  9. Spacing = 10
  10. };

  11. // Get access to the text resource.

  12. Assembly assembly = GetType().GetTypeInfo().Assembly;

  13. string resource = “BlackCat.Texts.TheBlackCat.txt”;
  14. using (Stream stream = assembly.GetManifestResourceStream(resource))
  15. {
  16. using (StreamReader reader = new
    StreamReader(stream))
  17. {

  18. bool gotTitle = false;

  19. string line;

  20. // Read in a line (which is actually a paragraph).

  21. while (null != (line = reader.ReadLine()))
  22. {

  23. Label label = new
    Label
  24. {

  25. Text = line,

  26. // Black text for ebooks!

  27. TextColor = Color.Black
  28. };

  29. if (!gotTitle)
  30. {

  31. // Add first label (the title) to mainStack.
  32. label.HorizontalOptions = LayoutOptions.Center;
  33. label.FontSize = Device.GetNamedSize(NamedSize.Medium, label);
  34. label.FontAttributes = FontAttributes.Bold;
  35. mainStack.Children.Add(label);
  36. gotTitle = true;
  37. }

  38. else
  39. {

  40. // Add subsequent labels to textStack.
  41. textStack.Children.Add(label);
  42. }
  43. }
  44. }
  45. }

  46. // Put the textStack in a ScrollView with FillAndExpand.

  47. ScrollView scrollView = new
    ScrollView
  48. {

  49. Content = textStack,

  50. VerticalOptions = LayoutOptions.FillAndExpand,

  51. Padding = new
    Thickness(5, 0),
  52. };

  53. // Add the ScrollView as a second child of mainStack.
  54. mainStack.Children.Add(scrollView);

  55. // Set page content to mainStack.

  56. Content = mainStack;

  57. // White background for ebooks!

  58. BackgroundColor = Color.White;
  59.  
     

  60. // Add some iOS padding for the page.

  61. Padding = new
    Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
  62. }
  63. }


执行结果:



代码内要注意还有排版的层级关系。最外面一层mainStack,包含两个子项目,标题 Label 和 內容 ScrollViewt。

利用外层的 Stacklayout 将这两个子项目做成堆叠排版,就能达到标题 Label 固定于最上方的效果。

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

说点什么

avatar
  Subscribe  
提醒
跳至工具栏