如何在Xamarin.Forms页面中获取选项卡栏的高度

Question

我在内容页中显示一张图片，使得它的高度是页面高度的固定百分比。我使用带星号单位行高的网格来实现这一点。然而，当将内容页放在TabbedPage中时，总网格高度似乎是[屏幕减去标签栏高度]的高度，因此导致图片显得有点短。

如果我可以在内容页中访问标签栏高度，那么要调整百分比就很简单了。

问题：

1）如何在内容页中获取标签栏高度？

2）是否有更好的方法来实现所需结果？

- Ash

Answer 1

1) 如何在内容页面中获得选项卡栏的高度？

我们无法直接从PCL获取选项卡栏的高度。只需要为TabbedRenderer创建自定义渲染器即可。

[assembly: ExportRenderer(typeof(TabbedPage), 
typeof(CustomTabbedPageRenderer))]
namespace TabbedPageWithNavigationPage.iOS
{
    class CustomTabbedPageRenderer : TabbedRenderer
    {
        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);
            App.TabHeight = (int)TabBar.Frame.Height;
        }
    }
}

在PCL中的App中定义TabHeight。

public static int TabHeight { get; set; }

获取TabbedPage中的高度

protected override void OnAppearing()
{
    base.OnAppearing();
    int height = App.TabHeight;
}

2) 有更好的方法实现所需的结果吗？

最好不要在图像上设置固定的框架，也不应该手动操作框架。

Aspect属性可以帮助我们按照需要显示图像。

---

AspectFit

---

AspectFill

---

Fill

- ColeX

---

嘿，可爱的狗狗。我已经在图像上使用了AspectFill。这很好用。但是我需要将图像所在的容器高度设置为整个屏幕的百分比。 - Ash

我需要先尝试一下这个方法是否可行。也就是说，我需要通过调整百分比来设置我的图像容器的高度，以便根据使用此方法获取的选项卡栏高度进行调整。我会及时向您报告。 - Ash

Answer 2

编辑：

我建议您获取屏幕尺寸并根据屏幕尺寸计算百分比，使用变量值而不是比例值。这样，您可以使用除AbsoluteLayout之外的其他布局，但我在我的示例中使用了AbsoluteLayout：

protected override void OnAppearing()
        {
            var imageWidth = this.Width;
            var imageHeight = this.Height * 0.25;
            AbsoluteLayout.SetLayoutBounds(image, new Rectangle(0, 0, imageWidth, imageHeight));
            AbsoluteLayout.SetLayoutFlags(image, AbsoluteLayoutFlags.None);
        }

在我的测试中，当我使用AbsoluteLayout的比例方法时：
AbsoluteLayout.LayoutBounds = "0,0,1,0.25" AbsoluteLayout.LayoutFlags="All"
如果页面使用或不使用Tabbedpage，两个图像大小的结果会略有不同。
因此，我建议使用代码获取基于[屏幕高度*百分比]的图像大小。

<?xml version="1.0" encoding="utf-8"?>
<TabbedPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:local="clr-namespace:AbsoluteLayoutExample" x:Class="AbsoluteLayoutExample.AbsoluteLayoutExamplePage">

    <ContentPage x:Name="MyPage" Title = "Page 1">
        <AbsoluteLayout> 
           <Image x:Name="image" Source="icon.png" Aspect="AspectFill" />
        </AbsoluteLayout> 
    </ContentPage>

    <ContentPage Title = "Page 2">
        <Label Text="Hello" />
    </ContentPage>

</TabbedPage>

代码后端：

protected override void OnAppearing()
{
    var imageWidth = this.Width;
    var imageHeight = this.Height * 0.25;
    AbsoluteLayout.SetLayoutBounds(image, new Rectangle(0,0,imageWidth,imageHeight));
    AbsoluteLayout.SetLayoutFlags(image,AbsoluteLayoutFlags.None);
}

内容页面：

XAML：

<?xml version="1.0" encoding="utf-8"?>
<ContentPage Padding="0,20,0,0"
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:local="clr-namespace:ContentPageWidthAndHieght" 
    x:Class="ContentPageWidthAndHieght.ContentPageWidthAndHieghtPage">
    <AbsoluteLayout>
         <Image x:Name="image" Source="icon.png" Aspect="AspectFill"/>
    </AbsoluteLayout>
</ContentPage>

代码后台：

protected override void OnAppearing()
{
    var imageWidth = this.Width;
    var imageHeight = this.Height * 0.25;
    AbsoluteLayout.SetLayoutBounds(image, new Rectangle(0, 0, imageWidth, imageHeight));
    AbsoluteLayout.SetLayoutFlags(image, AbsoluteLayoutFlags.None);
}

- Jsw

---

你例子中的0.5秒是指Aqua盒子的哪个角落？另外，我的问题是让高度占屏幕高度的25％，宽度为100％。所以根据你的说法，我需要将LayoutBounds指定为“... 100,25”，并将LayoutFlags设置为“all”吗？ - Ash

从你的问题来看，我认为你真正需要的不是选项卡的高度，而是当有选项卡时，你的图像仍然保持在应该的位置，我说得对吗？ - Jsw

左上角是参考点。是的，您可以使用LayoutFlags =“All”，但如果100％和25％的LayoutBounds应为“x，x，1，0.25”。您的目标图像位置在哪里？ - Jsw

我已经编辑了我的回答，将图片放在屏幕底部，应该与您的情况类似。 - Jsw

我的问题与图像的位置无关，而是与其高度有关。它所在的容器始终位于顶部，但我需要该容器的高度始终为屏幕高度的25。 - Ash

这意味着无论是否有制表符，图像的高度都需要保持相同的尺寸吗？例如，如果没有制表符，高度的25％为100毫米，那么有制表符时，它也需要是100毫米吗？ - Jsw