ListView 셀 모양 사용자 지정Customizing ListView Cell Appearance

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

ListView 사용 하 여 사용자 지정할 수 있는 스크롤 가능한 목록이 제공 ViewCells입니다.ListView presents scrollable lists, which can be customized through the use of ViewCells. ViewCells 텍스트 및 이미지를 표시 하 고, true/false 상태를 나타내는, 사용자 입력을 받고 사용할 수 있습니다.ViewCells can be used for displaying text and images, indicating a true/false state and receiving user input.

기본 제공된 셀Built in Cells

Xamarin.Forms는 대부분의 간단한 응용 프로그램에 대해 작동 하는 기본 제공 셀으로 제공 됩니다.Xamarin.Forms comes with built-in cells that work for many simple applications:

  • TextCell – 텍스트 표시TextCell – for displaying text
  • ImageCell – 텍스트를 사용 하 여 이미지를 표시 합니다.ImageCell – for displaying an image with text.

두 개의 추가 셀 SwitchCell 하 고 EntryCell 일반적으로 사용 되지 않지만 사용할 수 있는 ListView합니다.Two additional cells, SwitchCell and EntryCell are available, however they aren't commonly used with ListView. 참조 TableView 이러한 셀에 대 한 자세한 내용은 합니다.See TableView for more information about these cells.

TextCellTextCell

TextCell 두 번째 줄을 세부 정보 텍스트를 사용 하 여 필요에 따라 텍스트를 표시 하는 것에 대 한 셀이 됩니다.TextCell is a cell for displaying text, optionally with a second line as detail text.

성능은 매우 좋은 사용자 지정 비교 하므로 TextCells 런타임에 네이티브 컨트롤로 렌더링 됩니다 ViewCell합니다.TextCells are rendered as native controls at runtime, so performance is very good compared to a custom ViewCell. TextCells은 사용자 지정 가능한, 설정할 수 있습니다.TextCells are customizable, allowing you to set:

  • Text – 큰 글꼴로 첫 번째 줄에 표시 되는 텍스트입니다.Text – the text that is shown on the first line, in large font.
  • Detail – 첫 번째 줄을 더 작은 글꼴을 아래 표시 되는 텍스트입니다.Detail – the text that is shown underneath the first line, in a smaller font.
  • TextColor – 텍스트의 색입니다.TextColor – the color of the text.
  • DetailColor – 세부 정보 텍스트의 색DetailColor – the color of the detail text

ImageCellImageCell

ImageCell같은 TextCell, 텍스트 및 보조 정보 텍스트를 표시 하기 위해 사용할 수 있으며 각 플랫폼의 네이티브 컨트롤을 사용 하 여 뛰어난 성능을 제공 합니다.ImageCell, like TextCell, can be used for displaying text and secondary detail text, and it offers great performance by using each platform's native controls. ImageCell 다른 TextCell 텍스트의 왼쪽에 이미지를 표시 합니다.ImageCell differs from TextCell in that it displays an image to the left of the text.

ImageCell 연락처의 영화 목록 등의 시각적 측면이 사용 하 여 데이터의 목록을 표시 해야 할 때 유용 합니다.ImageCell is useful when you need to display a list of data with a visual aspect, such as a list of contacts or movies. ImageCells은 사용자 지정 가능한, 설정할 수 있습니다.ImageCells are customizable, allowing you to set:

  • Text – 큰 글꼴로 첫 번째 줄에 표시 되는 텍스트Text – the text that is shown on the first line, in large font
  • Detail – 첫 번째 줄을 더 작은 글꼴을 아래 표시 되는 텍스트Detail – the text that is shown underneath the first line, in a smaller font
  • TextColor – 텍스트의 색TextColor – the color of the text
  • DetailColor – 세부 정보 텍스트의 색DetailColor – the color of the detail text
  • ImageSource – 텍스트 옆에 표시할 이미지를ImageSource – the image to display next to the text

사용자 지정 셀Custom Cells

기본 제공 셀 필요한 레이아웃을 제공 하지 않습니다, 경우 사용자 지정 셀 필요한 레이아웃을 구현 합니다.When the built-in cells don't provide the required layout, custom cells implemented the required layout. 예를 들어, 다음 동일한 가중치는 두 개의 레이블을 사용 하 여 셀을 표시 하는 것이 좋습니다.For example, you may want to present a cell with two labels that have equal weight. TextCell 충분 한 것 때문에 TextCell 작은 하나 레이블이 있습니다.A TextCell would be insufficient because the TextCell has one label that is smaller. 대부분의 셀 사용자 지정 추가 읽기 전용 데이터 (예: 추가 레이블, 이미지 또는 기타 표시 정보)를 추가합니다.Most cell customizations add additional read-only data (such as additional labels, images or other display information).

모든 사용자 지정 셀에서 파생 되어야 합니다 ViewCell 를 사용 하 여 유형의 모든 기본 제공 셀 동일한 기본 클래스입니다.All custom cells must derive from ViewCell, the same base class that all of the built-in cell types use.

Xamarin.Forms 2에 새로 도입 캐싱 동작ListView 일부 유형의 사용자 지정 셀의 스크롤 성능 향상을 위해 설정할 수 있는 컨트롤입니다.Xamarin.Forms 2 introduced a new caching behavior on the ListView control which can be set to improve scrolling performance for some types of custom cells.

사용자 지정 셀의 예로 다음과 같습니다.This is an example of a custom cell:

XAMLXAML

위의 레이아웃을 만들려면 XAML은 다음과 같습니다.The XAML to create the above layout is below:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="demoListView.ImageCellPage">
    <ContentPage.Content>
        <ListView  x:Name="listView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout BackgroundColor="#eee"
                        Orientation="Vertical">
                            <StackLayout Orientation="Horizontal">
                                <Image Source="{Binding image}" />
                                <Label Text="{Binding title}"
                                TextColor="#f35e20" />
                                <Label Text="{Binding subtitle}"
                                HorizontalOptions="EndAndExpand"
                                TextColor="#503026" />
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

위의 XAML 많이 수행 하는 합니다.The XAML above is doing a lot. 알아봅시다.Let's break it down:

  • 사용자 지정 셀 내에 중첩 되어는 DataTemplate, 내부는 ListView.ItemTemplate합니다.The custom cell is nested inside a DataTemplate, which is inside ListView.ItemTemplate. 이 다른 셀을 사용 하 여 프로세스와 동일 합니다.This is the same process as using any other cell.
  • ViewCell 사용자 지정 셀의 유형이입니다.ViewCell is the type of the custom cell. 자식 합니다 DataTemplate 요소 이어야 하거나 형식에서 파생 해야 ViewCell합니다.The child of the DataTemplate element must be of or derive from type ViewCell.
  • 내부를 확인 합니다 ViewCell, 레이아웃에서 관리 하는 StackLayout합니다.Notice that inside the ViewCell, layout is managed by a StackLayout. 이 레이아웃을 사용 하면 배경 색을 사용자 지정할 수 있습니다.This layout allows us to customize the background color. 모든 속성 StackLayout 바인딩할 수 있습니다 즉 여기 표시 되지 않습니다 하지만 사용자 지정 셀 내에서 바인딩할 수 있습니다.Note that any property of StackLayout that is bindable can be bound inside a custom cell, although that is not shown here.
  • 내부는 ViewCell, 모든 Xamarin.Forms 레이아웃에서 레이아웃을 관리할 수 있습니다.Inside the ViewCell, layout can be managed by any Xamarin.Forms layout.

C#C#

C#에서 사용자 지정 셀을 지정 하는 것은 XAML에 해당 하는 보다 조금 더 자세한 정보입니다.Specifying a custom cell in C# is a bit more verbose than the XAML equivalent. 이 형식에 대해 살펴보겠습니다.Let's take a look:

먼저 사용자 지정 셀 클래스를 사용 하 여 정의 ViewCell 기본 클래스:First, define a custom cell class, with ViewCell as the base class:

public class CustomCell : ViewCell
    {
        public CustomCell()
        {
            //instantiate each of our views
            var image = new Image ();
            StackLayout cellWrapper = new StackLayout ();
            StackLayout horizontalLayout = new StackLayout ();
            Label left = new Label ();
            Label right = new Label ();

            //set bindings
            left.SetBinding (Label.TextProperty, "title");
            right.SetBinding (Label.TextProperty, "subtitle");
            image.SetBinding (Image.SourceProperty, "image");

            //Set properties for desired design
            cellWrapper.BackgroundColor = Color.FromHex ("#eee");
            horizontalLayout.Orientation = StackOrientation.Horizontal;
            right.HorizontalOptions = LayoutOptions.EndAndExpand;
            left.TextColor = Color.FromHex ("#f35e20");
            right.TextColor = Color.FromHex ("503026");

            //add views to the view hierarchy
            horizontalLayout.Children.Add (image);
            horizontalLayout.Children.Add (left);
            horizontalLayout.Children.Add (right);
            cellWrapper.Children.Add (horizontalLayout);
            View = cellWrapper;
        }
    }

페이지에 대 한 생성자에는 ListView, ListView의 설정 ItemTemplate 속성을 새 DataTemplate:In your constructor for the page with the ListView, set the ListView's ItemTemplate property to a new DataTemplate:

public partial class ImageCellPage : ContentPage
    {
        public ImageCellPage ()
        {
            InitializeComponent ();
            listView.ItemTemplate = new DataTemplate (typeof(CustomCell));
        }
    }

생성자 DataTemplate 형식을 사용 합니다.Note that the constructor for DataTemplate takes a type. Typeof 연산자에 대 한 CLR 형식을 가져옵니다 CustomCell합니다.The typeof operator gets the CLR type for CustomCell.

바인딩 컨텍스트 변경Binding Context Changes

사용자 지정 셀 형식의 바인딩할 때 BindableProperty 인스턴스를 표시 하는 UI 컨트롤을 BindableProperty 값을 사용할지는 OnBindingContextChanged 에 표시할 데이터를 설정 하려면 재정의 각 셀에 다음 코드 예제에 설명 된 대로 셀 생성자 보다는:When binding to a custom cell type's BindableProperty instances, the UI controls displaying the BindableProperty values should use the OnBindingContextChanged override to set the data to be displayed in each cell, rather than the cell constructor, as demonstrated in the following code example:

public class CustomCell : ViewCell
{
    Label nameLabel, ageLabel, locationLabel;

    public static readonly BindableProperty NameProperty =
        BindableProperty.Create ("Name", typeof(string), typeof(CustomCell), "Name");
    public static readonly BindableProperty AgeProperty =
        BindableProperty.Create ("Age", typeof(int), typeof(CustomCell), 0);
    public static readonly BindableProperty LocationProperty =
        BindableProperty.Create ("Location", typeof(string), typeof(CustomCell), "Location");

    public string Name {
        get { return(string)GetValue (NameProperty); }
        set { SetValue (NameProperty, value); }
    }

    public int Age {
        get { return(int)GetValue (AgeProperty); }
        set { SetValue (AgeProperty, value); }
    }

    public string Location {
        get { return(string)GetValue (LocationProperty); }
        set { SetValue (LocationProperty, value); }
    }
    ...

    protected override void OnBindingContextChanged ()
    {
        base.OnBindingContextChanged ();

        if (BindingContext != null) {
            nameLabel.Text = Name;
            ageLabel.Text = Age.ToString ();
            locationLabel.Text = Location;
        }
    }
}

OnBindingContextChanged 재정의 될 때 호출할를 BindingContextChanged 의 값에 대 한 응답에서 이벤트가 발생 합니다 BindingContext 속성이 변경 합니다.The OnBindingContextChanged override will be called when the BindingContextChanged event fires, in response to the value of the BindingContext property changing. 따라서 경우는 BindingContext 표시 하는 UI 컨트롤을 변경 합니다 BindableProperty 값 데이터를 설정 해야 합니다.Therefore, when the BindingContext changes, the UI controls displaying the BindableProperty values should set their data. 합니다 BindingContext 확인할를 null 값을 다시 하면 가비지 컬렉션에 대 한 Xamarin.Forms에서 설정할 수 있습니다는 OnBindingContextChanged 호출할 재정의 합니다.Note that the BindingContext should be checked for a null value, as this can be set by Xamarin.Forms for garbage collection, which in turn will result in the OnBindingContextChanged override being called.

또는 UI 컨트롤에 바인딩할 수는 BindableProperty 인스턴스를 재정의할 필요를 제거 하는 해당 값을 표시 하는 OnBindingContextChanged 메서드.Alternatively, UI controls can bind to the BindableProperty instances to display their values, which removes the need to override the OnBindingContextChanged method.

참고

재정의 하는 경우 OnBindingContextChanged, 기본 클래스의 했는지 OnBindingContextChanged 받도록 등록 된 대리자 메서드는 BindingContextChanged 이벤트입니다.When overriding OnBindingContextChanged, ensure that the base class's OnBindingContextChanged method is called so that registered delegates receive the BindingContextChanged event.

XAML에 데이터 바인딩 사용자 지정 셀 유형을 수행할 수 있습니다 다음 코드 예제 에서처럼:In XAML, binding the custom cell type to data can be achieved as shown in the following code example:

<ListView x:Name="listView">
    <ListView.ItemTemplate>
        <DataTemplate>
            <local:CustomCell Name="{Binding Name}" Age="{Binding Age}" Location="{Binding Location}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

바인딩합니다이 Name, Age, 및 Location 에 바인딩 가능한 속성을 CustomCell 인스턴스를 Name, Age, 및 Location 기본 컬렉션의 각 개체의 속성.This binds the Name, Age, and Location bindable properties in the CustomCell instance, to the Name, Age, and Location properties of each object in the underlying collection.

C#에서 해당 바인딩에 다음 코드 예제에 표시 됩니다.The equivalent binding in C# is shown in the following code example:

var customCell = new DataTemplate (typeof(CustomCell));
customCell.SetBinding (CustomCell.NameProperty, "Name");
customCell.SetBinding (CustomCell.AgeProperty, "Age");
customCell.SetBinding (CustomCell.LocationProperty, "Location");

var listView = new ListView {
    ItemsSource = people,
    ItemTemplate = customCell
};

IOS 및 Android의 경우는 ListView 요소 재활용 되 및 사용자 지정 셀 사용자 지정 렌더러를 사용 하 여, 사용자 지정 렌더러 속성 변경 알림을 올바르게 구현 해야 합니다.On iOS and Android, if the ListView is recycling elements and the custom cell uses a custom renderer, the custom renderer must correctly implement property change notification. 셀 재사용 되는 바인딩 컨텍스트를 사용할 수 있는 셀의 업데이트 된 경우 해당 속성 값 변경 됩니다 PropertyChanged 이벤트 발생 합니다.When cells are reused their property values will change when the binding context is updated to that of an available cell, with PropertyChanged events being raised. 자세한 내용은 Viewcell합니다.For more information, see Customizing a ViewCell. 참조 셀을 재활용 하는 방법에 대 한 자세한 내용은 캐싱 전략합니다.For more information about cell recycling, see Caching Strategy.