RelativeLayout
使用RelativeLayout创建适合任何屏幕尺寸的UI。
RelativeLayout
用于相对于布局或兄弟视图的属性定位和缩放视图。不同的是AbsoluteLayout
,RelativeLayout
没有移动锚的概念,并且没有用于相对于布局的底部或右边缘定位元素的设施。RelativeLayout
确实支持定位元素在自己的界限之外。
目的
RelativeLayout
可用于在屏幕上相对于整体布局或其他两个视图定位视图。
用法
了解约束
在一个视图内定位和调整大小RelativeLayout
是用约束来完成的。约束表达式可以包括以下信息:
- 键入 - 约束是否相对于父或另一个视图。
- 属性 - 用作约束的依据的属性。
- 因子 - 适用于物业价值的因素。
- Constant - 用作值偏移量的值。
- ElementName - 约束相对于的视图的名称。
在XAML中,约束被表示为ConstraintExpression
s。请考虑以下示例:
<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。
上述两个示例将约束定义为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屏幕截图中的框图替换。
注意,RelativeLayouts
s是嵌套的,因为在某些情况下,嵌套布局可以比在同一布局中显示所有元素更容易。还要注意一些元素RelativeToView
,因为这样允许更简单和更直观的布局,当视图之间的关系引导定位。