在 RelativeLayout 中右对齐视图 RelativeToView答案

【问题标题】：Right align a view RelativeToView in a RelativeLayout在 RelativeLayout 中右对齐视图 RelativeToView
【发布时间】：2019-09-07 20:51:56
【问题描述】：

我正在尝试对齐 Xamarin.Forms 中另一个视图右上角的视图。我相信这必须通过RelativeLayout 才能实现，但我还没有弄清楚如何以正确的方式做到这一点（充其量在 XAML 中）。

我有一个适用于我的设备的解决方案，但我担心这不会在 Idioms/Platforms/Devices 之间移植。我是我的 XAML 我已经在 XAML 中定义了我的图像

<RelativeLayout HorizontalOptions="Fill" VerticalOptions="Fill" x:Name="RelativeLayout">
    <Image Source="http://lorempixel.com/300/300/nature/1/" 
           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.5, Constant=0}" 
           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.5, Constant=0}" 
           x:Name="Image"/>
</RelativeLayout>

在后面的代码中，我正在创建要添加到图像的徽章

Badge badge = new Badge()
{
  Count = 4
}
RelativeLayout.Children.Add(badge, 
    Constraint.RelativeToView(Image, (l, v) => v.X + v.Width - 22), 
    Constraint.RelativeToView(Image, (l, v) => v.Y));

（请不要问我，22 是从哪里来的，这在这一点上很简单，但很有必要，因为徽章尚未布局，因此宽度为 0）。它 - 有点 - 工作（见图）。但是 - 如前所述 - 我怀疑这是否适用于其他 Idions/Systems。

我会相信像

<RelativeLayout HorizontalOptions="Fill" VerticalOptions="Fill" x:Name="RelativeLayout">
    <Image Source="http://lorempixel.com/300/300/nature/1/" 
           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.5, Constant=0}" 
           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.5, Constant=0}" 
           x:Name="Image"/>
    <views:Badge Count="4" x:Name="Badge"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=Image, Property=Right}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=Image, Property=Y}" />
  </RelativeLayout>

可以，但是没有Right 属性，并且将XConstraint 设置为Property=Width, Scale=1.0 也不起作用，因为徽章将被放置在Image.Width 上RelativeLayout。

【问题讨论】：

标签： c# xaml xamarin xamarin.forms

【解决方案1】：

您可以将小图像包装在 StackLayout 中，该 StackLayout 填充您的 RelativeLayout 并将其右对齐。类似的东西：

<AbsoluteLayout Padding="50">
    <ContentView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" BackgroundColor="Green"/>
    <StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
        <ContentView BackgroundColor="Red" WidthRequest="20" HeightRequest="20" HorizontalOptions="EndAndExpand"/>
    </StackLayout>
</AbsoluteLayout>

【讨论】：

谢谢你的建议，我试试看

【解决方案2】：

例如，我将视图放置在约束为 0,0 的搜索栏下方 c#

 this._baseLayout.Children.Add(
                mapView,
                Constraint.RelativeToView(autoComplete, (r, v) => v.X),
                Constraint.RelativeToView(autoComplete, (r, v) => autoComplete.HeightOfSearchBar),
                heightConstraint: Constraint.RelativeToParent((r) => r.Height - autoComplete.HeightOfSearchBar),
                widthConstraint: Constraint.RelativeToView(autoComplete, (r, v) => v.Width));
xaml

【讨论】：

是的，但这在所有内容都布局好之前不起作用，对吧？