Xamarin表单 - 如何创建图像叠加？-Java 学习之路

我使用主细节导航创建了Xamarin Forms应用程序（适用于Android） . 对于 Headers 中的菜单（ListView.Header），我想创建它：

enter image description here

1 - 背景图像

2 - 标识我的应用程序

3 - 社交网络的头像用户 . 阿凡达小于徽标，并在徽标内 .

和用户名（在徽标下） .

这是我现有的代码（没有徽标）：

<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？任何帮助 .

2 回答

根据我使用Xamarin.Forms的经验，我逐渐明白，使用网格比使用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 . 它只是一种表示，但实现实际网格应该非常简单 .

EDIT

我将尝试在此处发布完整的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>

这应该工作 . 当然，您必须更改某些值才能对其进行自定义 .

回复于 2024-05-12T05:28:52+08:00

我用RelativeLayout解决了这个问题：

<RelativeLayout>

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

                <Image Source="logo" HeightRequest="140" WidthRequest="116"
                       Margin="5,0,0,0"
                       RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0.5, Constant=0}"
                       RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0.5, Constant=0}"/>

                <custom1:CircleImageViewCustom
                    x:Name="Avatar"
                    Margin="5"
                    Source="avatar"
                    HeightRequest="100"
                    HorizontalOptions="Start"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y,  Factor=0.5, Constant=15}"
                    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=0.5, Constant=8}"
                    VerticalOptions="Center"
                    WidthRequest="100" />

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


</RelativeLayout>

回复于 2024-05-12T05:28:52+08:00

Xamarin表单 - 如何创建图像叠加？

2 回答

相关问题