Xamarin.Forms CarouselView 레이아웃

  • 아티클

Download Sample 샘플 다운로드

CarouselView 는 레이아웃을 제어하는 다음 속성을 정의합니다.

  • ItemsLayout형식 LinearItemsLayout의 는 사용할 레이아웃을 지정합니다.
  • PeekAreaInsets형식 Thickness의 는 인접 항목을 부분적으로 표시할 정도를 지정합니다.

이러한 속성은 개체에 의해 BindableProperty 지원되므로 속성이 데이터 바인딩의 대상이 될 수 있습니다.

기본적으로 A는 CarouselView 해당 항목을 가로 방향으로 표시합니다. 단일 항목이 화면에 표시되고 살짝 밀기 제스처가 표시되어 항목 컬렉션을 통해 앞으로 및 뒤로 탐색이 발생합니다. 그러나 세로 방향도 가능합니다. 이는 속성이 ItemsLayout 클래스에서 상속되는 형식 LinearItemsLayout이기 때문 ItemsLayout 입니다. ItemsLayout 클래스는 다음 속성을 정의합니다.

이러한 속성은 개체에 의해 BindableProperty 지원되므로 속성이 데이터 바인딩의 대상이 될 수 있습니다. 끌기 지점에 대한 자세한 내용은 CollectionView 스크롤 가이드의 Xamarin.Forms 끌기 지점을 참조하세요.

ItemsLayoutOrientation 열거형은 다음 멤버를 정의합니다.

  • Vertical 는 항목이 CarouselView 추가될 때 세로로 확장됨을 나타냅니다.
  • Horizontal 는 항목이 CarouselView 추가될 때 가로로 확장됨을 나타냅니다.

클래스는 LinearItemsLayout 클래스에서 ItemsLayout 상속되며 각 항목 주위의 빈 공간을 나타내는 형식double의 속성을 정의 ItemSpacing 합니다. 이 속성의 기본값은 0이며 해당 값은 항상 0보다 크거나 같아야 합니다. 또한 클래스는 LinearItemsLayout 정적 Vertical 및 Horizontal 멤버를 정의합니다. 이러한 멤버는 각각 세로 또는 가로 목록을 만드는 데 사용할 수 있습니다. 또는 열거형 멤버를 LinearItemsLayout 인수로 지정하여 ItemsLayoutOrientation 개체를 만들 수 있습니다.

참고 항목

CarouselView 는 네이티브 레이아웃 엔진을 사용하여 레이아웃을 수행합니다.

가로 레이아웃

기본적으로 CarouselView 항목이 가로로 표시됩니다. 따라서 이 레이아웃을 사용하도록 속성을 설정할 ItemsLayout 필요는 없습니다.

<CarouselView ItemsSource="{Binding Monkeys}">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <Frame HasShadow="True"
                       BorderColor="DarkGray"
                       CornerRadius="5"
                       Margin="20"
                       HeightRequest="300"
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand">
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontAttributes="Bold"
                               FontSize="Large"
                               HorizontalOptions="Center"
                               VerticalOptions="Center" />
                        <Image Source="{Binding ImageUrl}"
                               Aspect="AspectFill"
                               HeightRequest="150"
                               WidthRequest="150"
                               HorizontalOptions="Center" />
                        <Label Text="{Binding Location}"
                               HorizontalOptions="Center" />
                        <Label Text="{Binding Details}"
                               FontAttributes="Italic"
                               HorizontalOptions="Center"
                               MaxLines="5"
                               LineBreakMode="TailTruncation" />
                    </StackLayout>
                </Frame>
            </StackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

또는 이 레이아웃은 속성을 LinearItemsLayout 개체로 설정하고 ItemsLayout 열거형 멤버를 속성 값으로 Orientation 지정하여 HorizontalItemsLayoutOrientation 수행할 수도 있습니다.

<CarouselView ItemsSource="{Binding Monkeys}">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal" />
    </CarouselView.ItemsLayout>
    ...
</CarouselView>

해당하는 C# 코드는 다음과 같습니다.

CarouselView carouselView = new CarouselView
{
    ...
    ItemsLayout = LinearItemsLayout.Horizontal
};

그러면 새 항목이 추가될 때 레이아웃이 가로로 증가합니다.

Screenshot of a CarouselView horizontal layout, on iOS and Android

세로 레이아웃

CarouselView에서는 속성을 개체로 설정하고 ItemsLayout 열거형 멤버를 속성 값으로 지정하여ItemsLayoutOrientationVertical항목을 세로로 Orientation 표시할 LinearItemsLayout 수 있습니다.

<CarouselView ItemsSource="{Binding Monkeys}">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" />
    </CarouselView.ItemsLayout>
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <Frame HasShadow="True"
                       BorderColor="DarkGray"
                       CornerRadius="5"
                       Margin="20"
                       HeightRequest="300"
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand">
                    <StackLayout>
                        <Label Text="{Binding Name}"
                               FontAttributes="Bold"
                               FontSize="Large"
                               HorizontalOptions="Center"
                               VerticalOptions="Center" />
                        <Image Source="{Binding ImageUrl}"
                               Aspect="AspectFill"
                               HeightRequest="150"
                               WidthRequest="150"
                               HorizontalOptions="Center" />
                        <Label Text="{Binding Location}"
                               HorizontalOptions="Center" />
                        <Label Text="{Binding Details}"
                               FontAttributes="Italic"
                               HorizontalOptions="Center"
                               MaxLines="5"
                               LineBreakMode="TailTruncation" />
                    </StackLayout>
                </Frame>
            </StackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

해당하는 C# 코드는 다음과 같습니다.

CarouselView carouselView = new CarouselView
{
    ...
    ItemsLayout = LinearItemsLayout.Vertical
};

그러면 새 항목이 추가되면 레이아웃이 세로로 증가합니다.

Screenshot of a CarouselView vertical layout, on iOS and Android

부분적으로 표시되는 인접 항목

기본적으로 CarouselView 전체 항목을 한 번에 표시합니다. 그러나 이 동작은 인접 항목을 부분적으로 표시할 Thickness 양을 지정하는 값으로 속성을 설정 PeekAreaInsets 하여 변경할 수 있습니다. 이는 사용자에게 볼 추가 항목이 있음을 나타내는 데 유용할 수 있습니다. 다음 XAML에서는 이 속성을 설정하는 예제를 보여 있습니다.

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    ...
</CarouselView>

해당하는 C# 코드는 다음과 같습니다.

CarouselView carouselView = new CarouselView
{
    ...
    PeekAreaInsets = new Thickness(100)
};

그 결과 인접 항목이 화면에 부분적으로 노출됩니다.

Screenshot of a CollectionView with partially visible adjacent items, on iOS and Android

항목 간격

기본적으로 CarouselView. 이 동작은 에서 사용하는 CarouselView항목 레이아웃에서 속성을 설정 ItemSpacing 하여 변경할 수 있습니다.

CarouselView 속성을 ItemsLayout 개체 LinearItemsLayout.ItemSpacing 로 LinearItemsLayout 설정하면 항목 사이의 공간을 나타내는 값으로 double 속성을 설정할 수 있습니다.

<CarouselView ItemsSource="{Binding Monkeys}">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           ItemSpacing="20" />
    </CarouselView.ItemsLayout>
    ...
</CarouselView>

참고 항목

속성의 LinearItemsLayout.ItemSpacing 값이 항상 0보다 크거나 같은지 확인하는 유효성 검사 콜백 집합이 있습니다.

해당하는 C# 코드는 다음과 같습니다.

CarouselView carouselView = new CarouselView
{
    ...
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        ItemSpacing = 20
    }
};

이 코드는 항목 사이의 간격이 20인 세로 레이아웃을 생성합니다.

항목의 동적 크기 조정

내 요소DataTemplate의 CarouselView 레이아웃 관련 속성을 변경하여 런타임에 항목의 크기를 동적으로 조정할 수 있습니다. 예를 들어 다음 코드 예제에서는 개체의 HeightRequestImage 속성과 WidthRequestHeightRequest 해당 부모의 Frame속성을 변경합니다.

void OnImageTapped(object sender, EventArgs e)
{
    Image image = sender as Image;
    image.HeightRequest = image.WidthRequest = image.HeightRequest.Equals(150) ? 200 : 150;
    Frame frame = ((Frame)image.Parent.Parent);
    frame.HeightRequest = frame.HeightRequest.Equals(300) ? 350 : 300;
}

OnImageTapped 이벤트 처리기는 탭되는 개체에 대한 응답으로 Image 실행되고 이미지(및 해당 부모Frame)의 차원을 변경하여 더 쉽게 볼 수 있도록 합니다.

Screenshot of a CarouselView with dynamic item sizing, on iOS and Android

오른쪽에서 왼쪽 레이아웃

CarouselView 에서는 속성을 .로 설정 FlowDirection 하여 콘텐츠를 오른쪽에서 왼쪽 흐름 방향으로 레이아웃할 RightToLeft수 있습니다. 그러나 이 속성은 FlowDirection 페이지 또는 루트 레이아웃에서 설정해야 하며, 이로 인해 페이지 내의 모든 요소 또는 루트 레이아웃이 흐름 방향에 응답합니다.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CarouselViewDemos.Views.HorizontalTemplateLayoutRTLPage"
             Title="Horizontal layout (RTL FlowDirection)"
             FlowDirection="RightToLeft">    
    <CarouselView ItemsSource="{Binding Monkeys}">
        ...
    </CarouselView>
</ContentPage>

부모가 있는 요소의 기본값 FlowDirection 은 .입니다 MatchParent. 따라서 속성 값은 CarouselView .에서 ContentPage상속됩니다FlowDirection.

흐름 방향에 대한 자세한 내용은 오른쪽에서 왼쪽 지역화를 참조 하세요.