Позиционирование элементов в списке с помощью xaml / xamarin

Question

Я хотел бы понять, как позиционировать элементы в списке (CustomCell), так как это будет мой основной элемент отображения.Но у меня есть трудности с использованием тега AbsoluteLayout, возможно, кто-нибудь может дать некоторые подсказки.

Я использую VisualStudio 2017 15.9, протестирую его на эмуляторе Android (но не думаю, что это актуально)

У меня есть пример из интернета, что работает, и в принципе я это понимаю.Я играю со всеми способами, чтобы расположить элементы по своему желанию, но безуспешно.

1. Например, я хотел бы, чтобы обе метки всегда были в середине (x = 50%) строкинезависимо от размера изображения.AbsoluteLayout не работает должным образом, возможно, потому что он внутри StackLayout.

Метки всегда располагаются сразу после изображения с небольшим зазором.

Кроме того, я бы хотел разместить вторую метку в Yposition, чтобы между первой и второй метками не было разрыва.

На самом деле первая метка начинается с y = 0, а втораяметка около y = 50%, поэтому между ними есть разрыв.

Спасибо за помощь, Фрэнк

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="FormsListViewSample.MainViewXaml"
xmlns:local="clr-namespace:FormsListViewSample;assembly=FormsListViewSample"
Title="ListView Xaml Sample"
>
    <ContentPage.Content>
        <ListView  x:Name="lstView" RowHeight="50">
            <ListView.ItemTemplate>
                <DataTemplate>
          <ViewCell>
            <AbsoluteLayout>
              <StackLayout Orientation="Horizontal" >
                <Image Source="{Binding Image}"  BackgroundColor="Aqua"  />
                <StackLayout Orientation="Vertical"  BackgroundColor="Yellow" >

                  <Label BackgroundColor="Red" Text = "{Binding Name}" AbsoluteLayout.LayoutBounds="0.5, 0, 100, 30" AbsoluteLayout.LayoutFlags="PositionProportional"/>
                  <Label BackgroundColor="Blue" Text = "{Binding Type}" AbsoluteLayout.LayoutBounds="0.5, 0.4, 100, 30" AbsoluteLayout.LayoutFlags="PositionProportional"/>
                </StackLayout>

              </StackLayout>
            </AbsoluteLayout>
          </ViewCell>
        </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

Это фактические результаты

Это то, что я хотел бы иметь

Answer 1

О AbsoluteLayout , официальный документ объясняет, что:

AbsoluteLayout имеет уникальную модель привязки, в соответствии с которой привязка элемента позиционируется относительно его элемента при позиционировании элементаотносительно макета при использовании пропорционального позиционирования.Когда используется абсолютное позиционирование, якорь находится в точке (0,0) в представлении.Это имеет два важных следствия:

• Элементы не могут быть расположены вне экрана с использованием пропорциональных значений.
• Элементы могут быть надежно расположены вдоль любой стороны макета или в центре, независимо отразмер макета или устройства.

AbsoluteLayout, подобно RelativeLayout, может позиционировать элементы таким образом, чтобы они перекрывались.

Примечание в общей ссылке,Якорь коробки - белая точка.Обратите внимание на связь между якорем и ящиком при его перемещении по макету.

Может быть, это кажется трудным для понимания, но AbsoluteLayout выглядит следующим образом. Вот пример кода о том, как Anchorработает в AbsoluteLayout.

<AbsoluteLayout HeightRequest="200"  BackgroundColor="Yellow">  
    <Label BackgroundColor="YellowGreen" Text = "labeone1"    AbsoluteLayout.LayoutBounds="0, 0, 0.5, 0.09"     AbsoluteLayout.LayoutFlags="All"/>
    <Label BackgroundColor="Red"         Text = "labetwo2"    AbsoluteLayout.LayoutBounds="0.1, 0.1, 0.5, 0.09" AbsoluteLayout.LayoutFlags="All"/>
    <Label BackgroundColor="Blue"        Text = "labethree3"  AbsoluteLayout.LayoutBounds="0.2, 0.2, 0.5, 0.09" AbsoluteLayout.LayoutFlags="All"/>
    <Label BackgroundColor="White"       Text = "labefour4"   AbsoluteLayout.LayoutBounds="0.3, 0.3, 0.5, 0.09" AbsoluteLayout.LayoutFlags="All"/>
    <Label BackgroundColor="Gray"        Text = "labefive5"   AbsoluteLayout.LayoutBounds="0.4, 0.4, 0.5, 0.09" AbsoluteLayout.LayoutFlags="All"/>
    <Label BackgroundColor="Green"       Text = "labesix6"    AbsoluteLayout.LayoutBounds="0.5, 0.5, 0.5, 0.09" AbsoluteLayout.LayoutFlags="All"/>
    <Label BackgroundColor="BlueViolet"  Text = "labeseven7"  AbsoluteLayout.LayoutBounds="0.6, 0.6, 0.5, 0.09" AbsoluteLayout.LayoutFlags="All"/>
    <Label BackgroundColor="AliceBlue"   Text = "labeeight8"  AbsoluteLayout.LayoutBounds="0.7, 0.7, 0.5, 0.09" AbsoluteLayout.LayoutFlags="All"/>
    <Label BackgroundColor="BlueViolet"  Text = "labenine9"   AbsoluteLayout.LayoutBounds="0.8, 0.8, 0.5, 0.09" AbsoluteLayout.LayoutFlags="All"/>
    <Label BackgroundColor="DarkSlateGray" Text = "labeten10" AbsoluteLayout.LayoutBounds="0.9,0.9, 0.5, 0.09"  AbsoluteLayout.LayoutFlags="All"/>
    <Label BackgroundColor="Orange"     Text = "labeeleven11" AbsoluteLayout.LayoutBounds="1, 1, 0.5, 0.09"     AbsoluteLayout.LayoutFlags="All"/>
    <Label BackgroundColor="OrangeRed"  Text = "labeeleven12" AbsoluteLayout.LayoutBounds="1.1, 1.1, 0.5, 0.09" AbsoluteLayout.LayoutFlags="All"/>
</AbsoluteLayout>

При использовании AbsoluteLayout, как это, он будет работать:

<ListView.ItemTemplate>
  <DataTemplate>
    <ViewCell> 
       <StackLayout HeightRequest="50" Padding="10">
          <AbsoluteLayout>
             <Image Source="{Binding ImageUrl}"  BackgroundColor="Aqua"   AbsoluteLayout.LayoutBounds="0, 0, 0.5, 1" AbsoluteLayout.LayoutFlags="All"/>
             <Label BackgroundColor="Red" Text = "{Binding Name}" AbsoluteLayout.LayoutBounds="1, 0, 0.5, 0.5" AbsoluteLayout.LayoutFlags="All"/>
             <Label BackgroundColor="Blue" Text = "{Binding Location}" AbsoluteLayout.LayoutBounds="1, 1, 0.5, 0.5" AbsoluteLayout.LayoutFlags="All"/>
          </AbsoluteLayout>
       </StackLayout>
     </ViewCell>
   </DataTemplate>
</ListView.ItemTemplate>

Здесь AbsoluteLayout - не лучшее решение для достижения того, чего вы хотите, вы можете попробовать использовать макет Grid в ViewCell следующим образом:

<ListView.ItemTemplate>
  <DataTemplate>
    <ViewCell> 
       <Grid Padding="10,10,10,10">
           <Grid.RowDefinitions>
              <RowDefinition Height="25"></RowDefinition>
              <RowDefinition Height="25"></RowDefinition>
           </Grid.RowDefinitions>
           <Grid.ColumnDefinitions>
              <ColumnDefinition Width="50*"></ColumnDefinition>
              <ColumnDefinition Width="50*"></ColumnDefinition>
           </Grid.ColumnDefinitions>

           <Image Grid.Column="0" Grid.RowSpan="2" Source="{Binding Location}" BackgroundColor="Accent"/>
           <Label  Grid.Row="0" Grid.Column="1" Text="{Binding Name}" BackgroundColor="Red" TextColor="White" FontSize="Large" HorizontalOptions="Start" VerticalOptions="Center"></Label>
           <Label Grid.Row="1" Grid.Column="1" Text="{Binding Type}" BackgroundColor="Green" TextColor="White" FontSize="Large" HorizontalOptions="Start" VerticalOptions="Center"></Label>
        </Grid>
     </ViewCell>
   </DataTemplate>
</ListView.ItemTemplate>

Answer 2

вы правы, AbsolueLayout трудно понять в начале, они почти сводили меня с ума.Но через два часа я понял это на твоих примерах.Суть документа в первом предложении: значения X и Y изменяют привязку внутри элемента И окружающего вида.На прилагаемой картинке вы можете (я думаю) понять это довольно хорошо.Я продолжаю использовать AbsoluteLayout сейчас, потому что он позволяет мне хорошо реализовать все запланированные макеты.Большое спасибо за умственную поддержку.

введите описание изображения здесь