03 控件位置和居中

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


一、控件位置:

Page 类有提供一個可位移的属性,叫做 Padding,类为 Thickness,而 Thickness 是一种定义了 Left, Top, Right, Bottom 四种属性的结构体(Structure) (Thickness 的順序是固定的可以及记一下)。

iPhone 顶部的高度为 20,所以我们要控件从上方往下位移 20 “单位”。
目前还不会讨论到单位,第五章会有更详细的介绍.

代码如下

  1. public Greetings()
  2. {
  3. //初始化 XAML
  4. InitializeComponent();
  5. Content = new Label
  6. {
  7. Text = “Greetings, Xamarin.Forms!”
  8. };
  9. Padding = new Thickness(0, 20, 0, 0);
  10. }

结果如下

但此时又会产生另一个问题:Android 和 Windows Phone 也一起位移 了20个单位. 我们只想要iPhone 位移啊!!!

如何只位移 iPhone

Xamarin 有提供一各 Device 的类可以取得目前设备的信息,如:

  • Device.OS – 可以取得当前设备如 iOS, Android, WinPhone or Other
  • Device.Idiom – 可以取得当前的平台如 Phone, Tablet, Desktop or Unsupported


    当然在 .cs 內可以写 if else 去判断当前的系统,再来针对特定的平台给与不同的属性设置。


    但 Device 有提供更好的方法 – OnPlatform

    泛型方法 OnPlatform<T> 有三個 arguments 可以带入,順序第一是 iOS, 第二是 Android,第三是 Windows Phone。

    下方代码就代表只设定定 iOS 的位移,其他两种平台不变。

  1. Padding = Device.OnPlatform<Thickness>(new Thickness(0, 20, 0, 0),
  2. new Thickness(0),
  3. new Thickness(0));


如 arguments 类型可以被识别的话,泛型的类型可以不用写:

  1. Padding = Device.OnPlatform(new Thickness(0, 20, 0, 0),
  2. new Thickness(0),
  3. new Thickness(0));

甚至能改写成 Lambda 语法,让代码看起来更简洁。

  1. public Greetings()
  2. {
  3. //初始化 XAML
  4. InitializeComponent();
  5. Content = new Label
  6. {
  7. Text = “Greetings, Xamarin.Forms!”
  8. };
  9. Device.OnPlatform(iOS: () =>
  10. {
  11. Padding = new Thickness(0, 20, 0, 0);
  12. });
  13. }

二、Label 置中

除了将真个画面位移外这种大工程外,能不能将 Label 置中就解決问题呢?

Xamrin.Forms 提供了多种自动去计算物件在画面上位置的方法。

View 类定义了两个属性,分別为 HorizontalOptionsVerticalOptions,这两个属性可以设置物件相相对于父物体 ( parent ) 的位置。

通常会使用 LayoutOptions 结构提供的预设值来做设定,总共八种。

  • Start
  • Center
  • End
  • Fill
  • StartAndExpand
  • CenterAndExpand
  • EndAndExpand
  • FillAndExpand

    当然你也可以自行定义 LayoutOptions 的值。这一小段在第四章会有更详细的解释,现在你只需要学会如何利用 LayoutOptions 设定 HorizontalOptionsVerticalOptions

    代码如下,水平和垂直都设定为 Center 就能将Label 置中

  1. public Greetings()
  2. {
  3. InitializeComponent();
  4. Content = new Label
  5. {
  6. Text = “Greetings, Xamarin.Forms!”,
  7. HorizontalOptions = LayoutOptions.Center,
  8. VerticalOptions = LayoutOptions.Center
  9. };
  10. }


文字在 Label 內的排版

常常会需要在 Label 內调整文字的位置,而 Label 也提供了两个属性可以设置,HorizontalAlignment VerticalTextAlignment

TextAlignment 提供的预设值来设定,有 Start, Center End这三个可使用。

代码如下

  1. public Greetings()
  2. {
  3. InitializeComponent();
  4. Content = new Label
  5. {
  6. Text = “Greetings, Xamarin.Forms!”,
  7. HorizontalTextAlignment = TextAlignment.Center,
  8. VerticalTextAlignment = TextAlignment.Center
  9. };
  10. }

最后显示效果和前一小节设定 HorizontalOptions、VerticalOptinos 一样。

但这两个技术是完全不同的事情,我们将在下一章节有更详细的介绍.

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

说点什么

avatar
  Subscribe  
提醒
跳至工具栏