Xamarin.ios CarouselView 레이아웃Xamarin.Forms CarouselView Layout

샘플 다운로드 샘플 다운로드Download Sample Download the sample

CarouselView 는 레이아웃을 제어 하는 다음 속성을 정의 합니다.CarouselView defines the following properties that control layout:

  • LinearItemsLayout 형식의 ItemsLayout는 사용할 레이아웃을 지정 합니다.ItemsLayout, of type LinearItemsLayout, specifies the layout to be used.
  • ItemSizingStrategy형식의 ItemSizingStrategy은 사용할 항목 측정 전략을 지정 합니다.ItemSizingStrategy, of type ItemSizingStrategy, specifies the item measure strategy to be used.
  • int 형식의 NumberOfSideItems 현재 항목에 인접 한 표시 되는 항목의 수입니다.NumberOfSideItems, of type int, the number of visible items adjacent to the current item. 기본값은 0입니다.The default value is 0.
  • Thickness형식의 PeekAreaInsets는 인접 한 항목을에서 부분적으로 표시할 수 있는 정도를 지정 합니다.PeekAreaInsets, of type Thickness, specifies how much to make adjacent items partially visible by.

이러한 속성은 BindableProperty 개체에서 지원 됩니다. 즉, 속성은 데이터 바인딩의 대상이 될 수 있습니다.These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

기본적으로 CarouselView 은 해당 항목을 가로 방향으로 표시 합니다.By default, a CarouselView will display its items in a horizontal orientation. 단일 항목이 화면에 표시 되 고, 살짝 밀기 제스처를 사용 하 여 항목 컬렉션을 전달 하 고 뒤로 탐색 합니다.A single item will be displayed on screen, with swipe gestures resulting in forwards and backwards navigation through the collection of items. 그러나 세로 방향도 가능 합니다.However, a vertical orientation is also possible. 이는 ItemsLayout 속성이 ItemsLayout 클래스에서 상속 되는 LinearItemsLayout 형식 이기 때문입니다.This is because the ItemsLayout property is of type LinearItemsLayout, which inherits from the ItemsLayout class. @No__t_0 클래스는 다음 속성을 정의 합니다.The ItemsLayout class defines the following properties:

이러한 속성은 BindableProperty 개체에서 지원 됩니다. 즉, 속성은 데이터 바인딩의 대상이 될 수 있습니다.These properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings. 스냅 점에 대 한 자세한 내용은 CollectionView 스크롤 가이드의 중심점 을 참조 하세요.For more information about snap points, see Snap points in the Xamarin.Forms CollectionView Scrolling guide.

@No__t_1 열거형은 다음 멤버를 정의 합니다.The ItemsLayoutOrientation enumeration defines the following members:

  • Vertical는 항목이 추가 될 때 CarouselView 세로로 확장 됨을 나타냅니다.Vertical indicates that the CarouselView will expand vertically as items are added.
  • Horizontal는 항목이 추가 될 때 CarouselView 가로로 확장 됨을 나타냅니다.Horizontal indicates that the CarouselView will expand horizontally as items are added.

@No__t_0 클래스는 ItemsLayout 클래스에서 상속 되며 각 항목 주위의 빈 공간을 나타내는 double 형식의 ItemSpacing 속성을 정의 합니다.The LinearItemsLayout class inherits from the ItemsLayout class, and defines an ItemSpacing property, of type double, that represents the empty space around each item. 이 속성의 기본값은 0이 고 해당 값은 항상 0 보다 크거나 같아야 합니다.The default value of this property is 0, and its value must always be greater than or equal to 0. 또한 LinearItemsLayout 클래스는 정적 VerticalHorizontal 멤버를 정의 합니다.The LinearItemsLayout class also defines static Vertical and Horizontal members. 이러한 멤버를 사용 하 여 각각 세로 또는 가로 목록을 만들 수 있습니다.These members can be used to create vertical or horizontal lists, respectively. 또는 ItemsLayoutOrientation 열거형 멤버를 인수로 지정 하 여 LinearItemsLayout 개체를 만들 수 있습니다.Alternatively, a LinearItemsLayout object can be created, specifying an ItemsLayoutOrientation enumeration member as an argument.

참고

CarouselView 는 기본 레이아웃 엔진을 사용 하 여 레이아웃을 수행 합니다.CarouselView uses the native layout engines to perform layout.

가로 레이아웃Horizontal layout

기본적으로 CarouselView 는 항목을 가로로 표시 합니다.By default, CarouselView will display its items horizontally. 따라서이 레이아웃을 사용 하도록 ItemsLayout 속성을 설정 하지 않아도 됩니다.Therefore, it's not necessary to set the ItemsLayout property to use this layout:

<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>

또는 Horizontal ItemsLayoutOrientation 열거형 멤버를 Orientation 속성 값으로 지정 하 여 ItemsLayout 속성을 LinearItemsLayout 개체로 설정 하 여이 레이아웃을 수행할 수도 있습니다.Alternatively, this layout can also be accomplished by setting the ItemsLayout property to a LinearItemsLayout object, specifying the Horizontal ItemsLayoutOrientation enumeration member as the Orientation property value:

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

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

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

그러면 새 항목이 추가 될 때 레이아웃이 가로로 증가 합니다.This results in a layout that grows horizontally as new items are added.

세로 레이아웃Vertical layout

ItemsLayout 속성을 LinearItemsLayout 개체로 설정 하 여 Vertical ItemsLayoutOrientation 열거형 멤버를 Orientation 속성 값으로 지정 하 여 해당 항목을 세로로 표시할 수 CarouselView .CarouselView can display its items vertically by setting the ItemsLayout property to a LinearItemsLayout object, specifying the Vertical ItemsLayoutOrientation enumeration member as the Orientation property value:

<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# 코드는 다음과 같습니다.The equivalent C# code is:

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

이로 인해 새 항목이 추가 될 때 레이아웃이 세로로 증가 합니다.This results in a layout that grows vertically as new items are added.

부분적으로 표시 되는 인접 항목Partially visible adjacent items

기본적으로 CarouselView 는 전체 항목을 한 번에 표시 합니다.By default, CarouselView displays full items at once. 그러나 PeekAreaInsets 속성을에 의해 부분적으로 표시 되는 인접 한 항목의 크기를 지정 하는 Thickness 값으로 설정 하 여이 동작을 변경할 수 있습니다.However, this behavior can be changed by setting the PeekAreaInsets property to a Thickness value that specifies how much to make adjacent items partially visible by. 이는 볼 추가 항목이 있음을 사용자에 게 표시 하는 데 유용할 수 있습니다.This can be useful to indicate to users that there are additional items to view. 다음 XAML은이 속성을 설정 하는 예를 보여 줍니다.The following XAML shows an example of setting this property:

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

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

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

결과적으로 인접 한 항목이 화면에 부분적으로 노출 됩니다.The result is that adjacent items are partially exposed on screen.

완전히 표시 되는 인접 항목Fully visible adjacent items

기본적으로 CarouselView 은 한 번에 하나의 항목을 표시 합니다.By default, CarouselView displays one item at a time. 그러나이 동작은 현재 항목에 인접 하 여 표시할 항목 수를 나타내는 정수로 NumberOfSideItems 속성을 설정 하 여 변경할 수 있습니다.However, this behavior can be changed by setting the NumberOfSideItems property to an integer that represents the number of items to display adjacent to the current item. 다음 XAML은이 속성을 설정 하는 예를 보여 줍니다.The following XAML shows an example of setting this property:

<CarouselView ItemsSource="{Binding Monkeys}"
              NumberOfSideItems="1">
    ...
</CarouselView>

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

CarouselView carouselView = new CarouselView
{
    ...
    NumberOfSideItems = 1
};

이 예에서는 한 인접 항목이 현재 항목의 양쪽에 표시 됩니다.This example results in one adjacent item being displayed on each side of the current item.

참고

@No__t_0 속성을 설정 하는 경우에도 모든 PeekAreaInsets 값이 적용 됩니다.When setting the NumberOfSideItems property, any PeekAreaInsets value is still applied.

항목 간격Item spacing

기본적으로 CarouselView 의 각 항목 주위에는 빈 공간이 없습니다.By default, each item in a CarouselView doesn't have any empty space around it. @No__t_0에서 사용 하는 항목 레이아웃에 대 한 속성을 설정 하 여이 동작을 변경할 수 있습니다.This behavior can be changed by setting properties on the items layout used by the CarouselView.

@No__t_1 ItemsLayout 속성을 LinearItemsLayout 개체로 설정 하면 LinearItemsLayout.ItemSpacing 속성을 각 항목 주위의 빈 공간을 나타내는 double 값으로 설정할 수 있습니다.When a CarouselView sets its ItemsLayout property to a LinearItemsLayout object, the LinearItemsLayout.ItemSpacing property can be set to a double value that represents the empty space around each item:

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

참고

@No__t_0 속성에는 속성 값이 항상 0 보다 크거나 같도록 확인 하는 유효성 검사 콜백 집합이 있습니다.The LinearItemsLayout.ItemSpacing property has a validation callback set, which ensures that the value of the property is always greater than or equal to 0.

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

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

이 코드는 세로 레이아웃을 생성 하며 각 항목 주위에는 20 개의 간격이 있습니다.This code results in a vertical layout, that has a spacing of 20 around each item.

항목의 동적 크기 조정Dynamic resizing of items

@No__t_3내에서 요소의 레이아웃 관련 속성을 변경 하 여 런타임에 CarouselView 항목의 크기를 동적으로 조정할 수 있습니다.Items in a CarouselView can be dynamically resized at runtime by changing layout related properties of elements within the DataTemplate. 예를 들어 다음 코드 예제에서는 Image 개체의 HeightRequestWidthRequest 속성과 부모 FrameHeightRequest 속성을 변경 합니다.For example, the following code example changes the HeightRequest and WidthRequest properties of an Image object, and the HeightRequest property of its parent 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;
}

@No__t_0 이벤트 처리기는 탭 하는 Image 개체에 대 한 응답으로 실행 되 고 이미지의 크기 (및 부모 프레임)를 변경 하 여 쉽게 볼 수 있도록 합니다.The OnImageTapped event handler is executed in response to an Image object being tapped, and changes the dimensions of the image (and its parent Frame), so that it's more easily viewed.

오른쪽에서 왼쪽 레이아웃Right-to-left layout

CarouselView FlowDirection 속성을 RightToLeft로 설정 하 여 해당 콘텐츠를 오른쪽에서 왼쪽 흐름 방향으로 레이아웃을 지정할 수 있습니다.CarouselView can layout its content in a right-to-left flow direction by setting its FlowDirection property to RightToLeft. 그러나 페이지 또는 루트 레이아웃에는 FlowDirection 속성을 설정 하는 것이 가장 좋습니다. 이렇게 하면 페이지 또는 루트 레이아웃의 모든 요소가 흐름 방향에 응답 하 게 됩니다.However, the FlowDirection property should ideally be set on a page or root layout, which causes all the elements within the page, or root layout, to respond to the flow direction:

<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>

부모가 있는 요소의 기본 FlowDirectionMatchParent입니다.The default FlowDirection for an element with a parent is MatchParent. 따라서 CarouselViewContentPage에서 FlowDirection 속성 값을 상속 합니다.Therefore, the CarouselView inherits the FlowDirection property value from the ContentPage.

흐름 방향에 대 한 자세한 내용은 오른쪽에서 왼쪽 지역화를 참조 하세요.For more information about flow direction, see Right-to-left localization.