嵌入图片超出布局的宽度限制（RelativeLayout）

Question

我对嵌入到相关布局中的图像资源有疑问。图像本身即使是大图像也可以完美缩放，但不知何故它的宽度超过了布局中给定的宽度限制。

以下代码显示有问题的图像 (Koala.jpg) 的相对布局：

<RelativeLayout HorizontalOptions="Center"  HeightRequest="100" x:Name="HotelButton"  BackgroundColor="Orange" Opacity="0.5"
                                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MenuStack,Property=Width, Factor=0.2}" >

                            <Image Source="{local:ImageResource TestUIPCL.images.Koala.jpg}"  VerticalOptions="Center"
                                   RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=HotelButton Property=Width, Factor=1}" />

                            <Label x:Name="lblTheHotel" TextColor="White" Text="THE HOTEL" HorizontalOptions="Center" Margin="0,0,0,0" YAlign="Start"></Label>
                        </RelativeLayout>

image exceeds defined layout width

当在其中插入图像时，"HotelButton" RelativeLayout 堆栈会在其定义的宽度约束（到 MenuStack 布局）上额外扩展。如您所见，后台的 "Red" 布局用于制作和标记菜单限制，酒店按钮和配置文件按钮应位于后台的 "Red" 布局内。但是，当为 Hotel Button 插入图像时，它会将 Profile 按钮推到 "Red" 布局的边界之外。

请注意，酒店按钮和个人资料按钮的大小应相同 - 宽度应相同。酒店按钮标有 "Orange" 颜色以便更好地说明。

为什么在布局中插入图像时会发生这种情况？为什么图像本身未在布局的定义宽度限制（酒店按钮）内缩放？

像这样嵌入图像时，我应该使用不同的布局类型还是布局组合？欢迎任何建议和更正。谢谢！

完成XAML代码：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TestUIPCL;assembly=TestUIPCL"
             x:Class="TestUIPCL.Page1">

    <RelativeLayout VerticalOptions="Fill"
                    HorizontalOptions="Fill" x:Name="backrel"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                    RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Constant=0}"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Constant=0}" >

        <RelativeLayout VerticalOptions="Fill"
                        HorizontalOptions="Fill" x:Name="backmenu"
                        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=backrel,Property=Width, Factor=0.5}"
                        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,Constant=0}"
                        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,Constant=0.4}" BackgroundColor="Black">

            <StackLayout Orientation="Vertical" x:Name="MainStack" Margin="0,0,0,0" HorizontalOptions="Fill"
                         RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}"
                         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0}"
                         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height,Factor=1}" BackgroundColor="Red">

                <StackLayout VerticalOptions="Center" HorizontalOptions="Center"  HeightRequest="150" Margin="0,20,0,0"  x:Name="LogoStack" BackgroundColor="Black">
                    <Image Source="{local:ImageResource TestUIPCL.images.logo.png}"  Margin="0,0,0,0" VerticalOptions="CenterAndExpand"  />
                </StackLayout>

                <StackLayout Orientation="Horizontal" x:Name="MenuStack"  HeightRequest="150"
                             RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MainStack, Property=Width, Factor=0.2}">

                    <RelativeLayout HorizontalOptions="Center"  HeightRequest="100" x:Name="HotelButton"  BackgroundColor="Orange" Opacity="0.5"
                                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MenuStack,Property=Width, Factor=0.2}" >

                        <Image Source="{local:ImageResource TestUIPCL.images.Koala.jpg}"  VerticalOptions="Center"
                               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=HotelButton Property=Width, Factor=1}" />

                        <Label x:Name="lblTheHotel" TextColor="White" Text="THE HOTEL" HorizontalOptions="Center" Margin="0,0,0,0" YAlign="Start"></Label>
                    </RelativeLayout>

                    <StackLayout HorizontalOptions="CenterAndExpand"  HeightRequest="100" x:Name="ProfileButton"  BackgroundColor="Black" Opacity="0.5">
                        <Image Source="{local:ImageResource TestUIPCL.images.logohotel.png}" VerticalOptions="Center" Margin="0,0,0,0"/>
                        <Label x:Name="lblProfile" TextColor="White" Text="PROFILE" HorizontalOptions="Center" Margin="0,2,0,0" YAlign="Start"></Label>
                    </StackLayout>


                </StackLayout>
            </StackLayout>

        </RelativeLayout>
    </RelativeLayout>

</ContentPage>

Answer 1

根据Sizing of StackLayout：

The size of a view in a StackLayout depends on both the height and width requests and the layout options.StackLayout will enforce padding.

因此，如果您使用 StackLayout 作为父布局，RelativeLayout.WidthConstraint 将无法在 StackLayout 的子元素中工作。（子元素将采用与其父元素相同的宽度）。

在您的 xaml 代码中，您需要将 MainStack 和 MenuStack 替换为其他布局，这在很大程度上取决于您的要求。

嵌入图片超出布局的宽度限制（RelativeLayout）

Embedded Image Exceeds WidthConstraint of Layout (RelativeLayout)

layout

android

image

xamarin

android-relativelayout