android - Xamarin Forms - 如何创建图像叠加层？

Question

我创建了带有主细节导航的 Xamarin Forms 应用程序(适用于 Android)。对于 header(ListView.Header) 中的菜单，我想创建它:

1 - 背景图片

2 - 标志我的应用

3 - 社交网络的化身用户。头像比 Logo 小，位于 Logo 内部。

和用户名(在标志下)。

这是我现有的代码(没有标志):

 <RelativeLayout>

                <Image
                    Aspect="Fill"
                    HeightRequest="150"
                    HorizontalOptions="FillAndExpand"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                          Property=Width,
                                                                          Constant=0}"
                    Source="bg.png" />

               <custom1:CircleImageViewCustom
                    x:Name="Avatar"
                    Margin="5"
                    HeightRequest="100"
                    HorizontalOptions="Start"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                          Property=Width,
                                                                          Factor=1,
                                                                          Constant=0}"
                    VerticalOptions="Center"
                    WidthRequest="100" />


                <Label
                    x:Name="UserName"
                    Margin="10,5,5,5"
                    FontSize="Small"
                    RelativeLayout.XConstraint="5"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                      Factor=0,
                                                                      Property=Y,
                                                                      Constant=110}" />


 </RelativeLayout>

我试图插入一个标志，但它不起作用。使用 AbsolutyLayout 可能更好吗？任何帮助。

Answer 1

根据我使用 Xamarin.Forms 的经验，我开始明白，几乎总是使用 Grid 比使用 RelativeLayout 更好。

因此，我建议您改为使用网格。我不太使用 XAML，所以我不能在这里发布完整的 XAML 代码，但我的想法是这样的:

<Grid>
    <Column Width="1 Auto">
        <Row Width="1 Star">
            <YourAppLogo Height=150 />
            <Avatar Width="100 Absolute" HorizontalOptions="Center" VerticalOption="Center" />
        </Row>
        <Row Width="1 Auto">
            <UserName />
        </Row>
    </Column>
    <Column Width="1 Star" />

    <Background Column=0 ColumnSpan=2 Row=0 RowSpan=2 />
</Grid>

请记住:这实际上不是 XAML。这只是一个表示，但实现实际的网格应该非常简单。

---

编辑

我将尝试在此处发布完整的 XAML 代码:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="16" /> <!-- Margin -->
        <RowDefinition Height="1*" /> <!-- Logo and Avatar -->
        <RowDefinition Height="Auto" /> <!-- User name -->
        <RowDefinition Height="16" /> <!-- Margin -->
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="16" /> <!-- Margin -->
        <ColumnDefinition Width="Auto" /> <!-- Logo, Avatar and Username -->
        <ColumnDefinition Width="1*" /> <!-- Empty space -->
        <ColumnDefinition Width="16" /> <!-- Margin -->
    </Grid.ColumnDefinitions>

    <Image Grid.Column="0" Grid.ColumnSpan="4"
           Grid.Row="0"    Grid.RowSpan="4"
           Source="bg.png" /> <!-- Background -->

    <Grid Grid.Column="1" Grid.Row="1"> <!-- Logo and Avatar -->
        <Image HeightRequest="150" Source="[LOGO]" /> <!-- Logo -->

        <custom1:CircleImageViewCustom VerticalOptions="Center"
                                       HorizontalOptions="Center"
                                       HeightRequest="100"
                                       Source="[AVATAR]" /> <!-- Avatar -->
    </Grid>

    <Label Grid.Column="1" Grid.Row="2"
           HorizontalAlignment="Center"
           Margin="10, 5, 5, 5"
           FontSize="Small" /> <!-- Username -->
</Grid>

这应该有效。当然，您必须更改一些值才能对其进行自定义。