[Xamarin.Forms 1.3.4pre-1]iOS판의 ListView가 셀의 높이를 자동 계산해 준다

무엇이 바뀌었습니까?

Xamarin.Forms 1.3.4-pre1 Released

"iOS Dynamic cell sizing support"

Xamarin.Forms 1.3.4(글쓰기 시점에서 -pre1)부터 iOS판 ListView가 셀마다 최적의 높이를 자동 계산해 줍니다. (Android 버전은 이전부터 만들어졌습니다)

지금까지는 Xamarin 공식 가이드의 "Enabling Different Cell Heights in iOS"에서 소개된 대로 문자 수로 셀의 높이를 정리하거나, CustomRenderer로 대처하거나, 꽤 머리가 아픈 문제로 했다.

XF1.3.3의 참상.



XF1.3.4에서는 각 셀의 내용에 딱 맞는 높이로 조정됩니다. 이를 위해 필요한 것은 ListView.HasUnevenRows 속성에 true를 설정하는 것입니다.

시도해보기

실제로 사용해 보겠습니다.
이런 느낌의 ViewModel을 정의하고.

using System.Collections.ObjectModel;

namespace XF134P
{
    public class ListPageViewModel
    {
        public ObservableCollection<Magic> Magics {
            get;
            private set;
        }

        public ListPageViewModel ()
        {
            Magics = new ObservableCollection<Magic> {
                new Magic{
                    Name = "光の白刃",
                    Spell = "我は放つ、光の白刃"
                },
                new Magic{
                    Name = "インディグネイション",
                    Spell = "天光満る処に我は在り、黄泉の門開く処に汝在り、出でよ神の雷"
                },
                new Magic{
                    Name = "ドラグスレイブ",
                    Spell = "黄昏よりも暗き存在（もの）､血の流れよりも赤き存在（もの）時間（とき）の流れに埋もれし偉大なる汝の名において､我ここに闇に誓わん､我らが前に立ち塞がりし全ての愚かなるものに、我と汝が力もて､等しく滅びを与えんことを"
                },
                new Magic{
                    Name = "セラフィックローサイト",
                    Spell = "其は忌むべき芳名にして偽印の使徒、神苑の淵に還れ招かれざる者よ"
                },
                new Magic{
                    Name = "Unlimited Blade Works",
                    Spell = "I am the bone of my sword. Steel is my body, and fire is my blood. I have created over a thousand blades. Unknown to Death. Nor known to Life. Have withstood pain to create many weapons. Yet, those hands will never hold anything. So as I pray, unlimited blade works."
                },
            };
        }
    }

    public class Magic
    {
        public string Name { get; set;}
        public string Spell { get; set;}
    }
}

이런 느낌의 Page를 표시합니다.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XF134P;assembly=XF134P"
             x:Class="XF134P.ListPage">
    <ContentPage.BindingContext>
        <local:ListPageViewModel />
    </ContentPage.BindingContext>

    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <OnPlatform.iOS>
                0, 20, 0, 0
            </OnPlatform.iOS>
        </OnPlatform>
    </ContentPage.Padding>

    <ContentPage.Content>
        <ListView HasUnevenRows="true"
                  ItemsSource="{Binding Magics}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Vertical"
                                     Padding="10,5,10,5">
                            <Label Text="{Binding Name}" />
                            <Label Text="{Binding Spell}" Font="Italic, Small" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

ViewCell 부분을 변경하면서 몇 가지 패턴을 시도해보십시오.

StackLayout(세로)

Grid(세로)

                    <ViewCell>
                        <Grid Padding="10,5,10,5">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Label Grid.Row="0" Text="{Binding Name}" />
                            <Label Grid.Row="1" Text="{Binding Spell}" Font="Italic, Small" />
                        </Grid>
                    </ViewCell>

Grid(가로) 안에 StackLayout(세로)

                    <ViewCell>
                        <Grid Padding="10,5,10,5">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="40"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <BoxView Grid.Column="0"
                                     VerticalOptions="StartAndExpand"
                                     Color="Green"/>
                            <StackLayout Grid.Column="1"
                                         Orientation="Vertical">
                                <Label Text="{Binding Name}" />
                                <Label Text="{Binding Spell}" Font="Italic, Small" />
                            </StackLayout>
                        </Grid>
                    </ViewCell>

StackLayout(가로) 안에 StackLayout(세로)

                    <ViewCell>
                        <StackLayout Orientation="Horizontal"
                                     Padding="10,5,10,5">
                            <BoxView WidthRequest="40"
                                     VerticalOptions="StartAndExpand"
                                     Color="Green"/>
                            <StackLayout HorizontalOptions="StartAndExpand"
                                         Orientation="Vertical">
                                <Label Text="{Binding Name}" />
                                <Label Text="{Binding Spell}" Font="Italic, Small" />
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>

요약

신 업데이트! !