Xamarin.Forms 用户界面——控件——布局——RelativeLayout

来源：互联网发布：js 执行上下文编辑：程序博客网时间：2024/06/06 01:05

RelativeLayout

使用RelativeLayout创建适合任何屏幕尺寸的UI。

PDF用于离线使用

下载PDF

示例代码：

布局
BusinessTumble示例

让我们知道你对此的感受

最后更新：2015年11月

RelativeLayout用于相对于布局或兄弟视图的属性定位和缩放视图。不同的是AbsoluteLayout，RelativeLayout没有移动锚的概念，并且没有用于相对于布局的底部或右边缘定位元素的设施。RelativeLayout确实支持定位元素在自己的界限之外。

目的

RelativeLayout 可用于在屏幕上相对于整体布局或其他两个视图定位视图。

用法

了解约束

在一个视图内定位和调整大小RelativeLayout是用约束来完成的。约束表达式可以包括以下信息：

键入 - 约束是否相对于父或另一个视图。
属性 - 用作约束的依据的属性。
因子 - 适用于物业价值的因素。
Constant - 用作值偏移量的值。
ElementName - 约束相对于的视图的名称。

在XAML中，约束被表示为ConstraintExpressions。请考虑以下示例：

<BoxView Color="Green" WidthRequest="50" HeightRequest="50"    RelativeLayout.XConstraint =      "{ConstraintExpression Type=RelativeToParent,                             Property=Width,                             Factor=0.5,                             Constant=-100}"    RelativeLayout.YConstraint =      "{ConstraintExpression Type=RelativeToParent,                             Property=Height,                             Factor=0.5,                             Constant=-100}" />

在C＃中，使用函数而不是视图上的表达式来表达约束。约束被指定为布局Add方法的参数：

layout.Children.Add(box, Constraint.RelativeToParent((parent) =>    {      return (.5 * parent.Width) - 100;    }),    Constraint.RelativeToParent((parent) =>    {        return (.5 * parent.Height) - 100;    }),    Constraint.Constant(50), Constraint.Constant(50));

注意上述布局的以下几个方面：

在x和y约束自己的限制规定。
在C＃中，相对约束被定义为函数。概念Factor不在，但可以手动实现。
框的x坐标定义为父级宽度的一半，-100。
框的y坐标定义为父级高度的一半-100。

注意：由于定义了约束条件，因此可以在C＃中创建比XAML指定的更复杂的布局。

上述两个示例将约束定义为RelativeToParent- 即它们的值相对于父元素。还可以将约束定义为相对于另一个视图。这允许更直观（对开发人员）布局，并且可以使您的布局代码的意图更加明显。

考虑一个布局，其中一个元素需要比另一个元素低20像素。如果两个元素都用常量值定义，则下限可以将其Y约束定义为比较Y高元素的约束大20像素的常数。如果较高的元素使用一定比例来定位，那么该方法就很短，因此像素尺寸是未知的。在这种情况下，基于另一个元素的位置约束元素更加鲁棒：

<RelativeLayout>    <BoxView Color="Red" x:Name="redBox"        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,            Property=Height,Factor=.15,Constant=0}"        RelativeLayout.WidthConstraint="{ConstraintExpression            Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"        RelativeLayout.HeightConstraint="{ConstraintExpression            Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}" />    <BoxView Color="Blue"        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,            ElementName=redBox,Property=Y,Factor=1,Constant=20}"        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,            ElementName=redBox,Property=X,Factor=1,Constant=20}"        RelativeLayout.WidthConstraint="{ConstraintExpression            Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"        RelativeLayout.HeightConstraint="{ConstraintExpression            Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}" /></RelativeLayout>

要在C＃中完成相同的布局：

layout.Children.Add (redBox, Constraint.RelativeToParent ((parent) => {        return parent.X;    }), Constraint.RelativeToParent ((parent) => {        return parent.Y * .15;    }), Constraint.RelativeToParent((parent) => {        return parent.Width;    }), Constraint.RelativeToParent((parent) => {        return parent.Height * .8;    }));layout.Children.Add (blueBox, Constraint.RelativeToView (redBox, (Parent, sibling) => {        return sibling.X + 20;    }), Constraint.RelativeToView (blueBox, (parent, sibling) => {        return sibling.Y + 20;    }), Constraint.RelativeToParent((parent) => {        return parent.Width * .5;    }), Constraint.RelativeToParent((parent) => {        return parent.Height * .5;    }));

这产生以下输出，蓝盒的位置相对于红色框的位置确定：

浆纱

通过布局视图RelativeLayout具有指定大小两种选择：

HeightRequest & WidthRequest
RelativeLayout.WidthConstraint ＆ RelativeLayout.HeightConstraint

HeightRequest并WidthRequest指定视图的预期高度和宽度，但可能会根据需要被布局覆盖。WidthConstraint并HeightConstraint支持将高度和宽度设置为相对于布局或另一视图属性的值，或作为常量值。

探索复杂的布局

每个布局都具有创建特定布局的优缺点。在这一系列布局文章中，已经创建了一个示例应用程序，并使用三种不同的布局实现了相同的页面布局。

考虑以下XAML：

<?xml version="1.0" encoding="UTF-8"?><ContentPage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="TheBusinessTumble.RelativeLayoutPage"BackgroundColor="Maroon"Title="RelativeLayout">    <ContentPage.Content>    <ScrollView>      <RelativeLayout>        <BoxView Color="Gray" HeightRequest="100"            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />        <Button BorderRadius="35" x:Name="imageCircleBack"            BackgroundColor="Maroon" HeightRequest="70" WidthRequest="70" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width, Factor=.5, Constant = -35}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Factor=0, Property=Y, Constant=70}" />        <Button BorderRadius="30" BackgroundColor="Red" HeightRequest="60"            WidthRequest="60" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=imageCircleBack, Property=X, Factor=1,Constant=5}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Factor=0, Property=Y, Constant=75}" />        <Label Text="User Name" FontAttributes="Bold" FontSize="26"            HorizontalTextAlignment="Center" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=140}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />        <Entry Text="Bio + Hashtags" TextColor="White" BackgroundColor="Maroon"            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=180}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />        <RelativeLayout BackgroundColor="White" RelativeLayout.YConstraint="            {ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=220}" HeightRequest="60" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" >            <BoxView BackgroundColor="Black" WidthRequest="50"                HeightRequest="50" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=5}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0, Constant=5}" />            <BoxView BackgroundColor="Maroon" WidthRequest="50"                HeightRequest="50" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=5}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=}" />            <Label FontSize="14" TextColor="Black" Text="Accent Color"                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=20}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0, Constant=60}" />            <Label FontSize="14" TextColor="Black" Text="Primary Color"                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=20}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.5, Constant=55}" />        </RelativeLayout>        <RelativeLayout Padding="5,0,0,0">          <Label FontSize="14" Text="Age:" TextColor="White"            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0,Constant=305}"            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0, Constant=10}"            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=.25,Constant=0}"            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0,Constant=50}" />          <Entry Text="35" TextColor="White" BackgroundColor="Maroon"            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0,Constant=280}"            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.3, Constant=0}"            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=0.75,Constant=0}"            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0,Constant=50}" />        </RelativeLayout>        <RelativeLayout  Padding="5,0,0,0">          <Label FontSize="14" Text="Interests:" TextColor="White"            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0,Constant=345}"            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0, Constant=10}"            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=.25,Constant=0}"            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0,Constant=50}" />          <Entry Text="Xamarin.Forms" TextColor="White" BackgroundColor="Maroon"            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0,Constant=320}"            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.3, Constant=0}"            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=0.75,Constant=0}"            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0,Constant=50}" />        </RelativeLayout>        <RelativeLayout  Padding="5,0,0,0">          <Label FontSize="14" Text="Ask me about:" TextColor="White"            LineBreakMode="WordWrap"            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0,Constant=395}"            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0, Constant=10}"            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=.25,Constant=0}"            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0,Constant=50}" />          <Entry Text="Xamarin, C#, .NET, Mono" TextColor="White"            BackgroundColor="Maroon"            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0,Constant=370}"            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.3, Constant=0}"            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width,Factor=0.75,Constant=0}"            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0,Constant=50}" />        </RelativeLayout>      </RelativeLayout>    </ScrollView>  </ContentPage.Content></ContentPage>

上述代码产生以下布局：

请注意，由于Windows Phone的按钮呈现不同，某些圈子已被Windows Phone屏幕截图中的框图替换。

注意，RelativeLayoutss是嵌套的，因为在某些情况下，嵌套布局可以比在同一布局中显示所有元素更容易。还要注意一些元素RelativeToView，因为这样允许更简单和更直观的布局，当视图之间的关系引导定位。

阅读全文

0 0