Xamarin.Forms TabbedPageXamarin.Forms TabbedPage

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

Xamarin.Forms TabbedPage는 탭 목록과 더 큰 세부 정보 영역으로 구성되며 각 탭은 세부 정보 영역으로 콘텐츠를 로드합니다.The Xamarin.Forms TabbedPage consists of a list of tabs and a larger detail area, with each tab loading content into the detail area. 다음 스크린샷은 iOS 및 Android의 TabbedPage를 보여줍니다.The following screenshots show a TabbedPage on iOS and Android:

3개 탭이 포함된 TabbedPage의 스크린샷(iOS 및 Android)Screenshot of a TabbedPage containing three tabs, on iOS and Android

iOS에서 탭 목록은 화면 맨 아래에 나타나고 세부 내용 영역이 위에 위치합니다.On iOS, the list of tabs appears at the bottom of the screen, and the detail area is above. 각 탭은 제목과 아이콘으로 구성되며 알파 채널이 있는 PNG 파일이어야 합니다.Each tab consists of a title and an icon, which should be a PNG file with an alpha channel. 세로 방향에서는 탭 제목 위에 탭 모음 아이콘이 표시됩니다.In portrait orientation, tab bar icons appear above tab titles. 가로 방향에서는 아이콘 및 제목이 나란히 표시됩니다.In landscape orientation, icons and titles appear side by side. 또한 디바이스 및 방향에 따라 일반 또는 작은 탭 표시줄이 표시될 수도 있습니다.In addition, a regular or compact tab bar may be displayed, depending on the device and orientation. 6개 이상의 탭이 있는 경우 다른 탭에 액세스하는 데 사용할 수 있는 자세히 탭이 표시됩니다.If there are more than five tabs, a More tab will appear, which can be used to access the additional tabs. 아이콘 요구 사항에 대한 자세한 내용은 developer.apple.com의 탭 표시줄 아이콘 크기를 참조하세요.For information about icon requirements, see Tab Bar Icon Size on developer.apple.com.

iOS의 경우 TabbedRenderer에는 지정된 원본에서 탭 아이콘을 로드하는 데 사용할 수 있는 재정의 가능한 GetIcon 메서드가 포함됩니다.The TabbedRenderer for iOS has an overridable GetIcon method that can be used to load tab icons from a specified source. 이 재정의를 통해 TabbedPage에서 SVG 이미지를 아이콘으로 사용할 수 있습니다.This override makes it possible to use SVG images as icons on a TabbedPage. 또한 선택하거나 선택하지 않은 버전의 아이콘을 제공할 수 있습니다.In addition, selected and unselected versions of an icon can be provided.

Android에서는 탭 목록이 화면 맨 위에 표시되고 세부 정보 영역은 아래에 위치합니다.On Android, the list of tabs appears at the top of the screen, and the detail area is below. 각 탭은 제목과 아이콘으로 구성되며 알파 채널이 있는 PNG 파일이어야 합니다.Each tab consists of a title and an icon, which should be a PNG file with an alpha channel. 그러나 탭은 특정 플랫폼에서 화면 아래쪽으로 이동할 수 있습니다.However, the tabs can be moved to the bottom of the screen with a platform-specific. 아이콘 요구 사항에 대한 자세한 내용은 material.io의 Tabs 및 developer.android.com의 다양한 픽셀 밀도 지원을 참조하세요.For information about icon requirements, see Tabs on material.io and Support different pixel densities on developer.android.com. 화면 아래쪽으로 탭을 이동하는 방법에 대한 자세한 내용은 TabbedPage 도구 모음 배치 및 색 설정을 참조하세요.For information about moving the tabs to the bottom of the screen, see Setting TabbedPage Toolbar Placement and Color.

Android AppCompat의 경우 TabbedPageRenderer에는 사용자 지정된 Drawable에서 탭 아이콘을 로드하는 데 사용할 수 있는 재정의 가능한 GetIconDrawable 메서드가 포함됩니다.The TabbedPageRenderer for Android AppCompat has an overridable GetIconDrawable method that can be used to load tab icons from a custom Drawable. 이 재정의를 통해 TabbedPage에서 SVG 이미지를 아이콘으로 사용할 수 있고 위아래 탭 표시줄 모두에서 작업할 수 있습니다.This override makes it possible to use SVG images as icons on a TabbedPage, and works with both top and bottom tab bars. 또는 위쪽 탭 표시줄의 경우 재정의 가능한 SetTabIcon 메서드를 사용하여 사용자 지정 Drawable에서 탭 아이콘을 로드할 수 있습니다.Alternatively, the overridable SetTabIcon method can be used to load tab icons from a custom Drawable for top tab bars.

UWP(유니버설 Windows 플랫폼)에서는 탭 목록이 화면 맨 위에 표시되고 세부 정보 영역은 아래에 표시됩니다.On the Universal Windows Platform (UWP), the list of tabs appears at the top of the screen, and the details area is below. 각 탭은 제목으로 구성됩니다.Each tab consists of a title. 그러나 플랫폼별로 각 탭에 아이콘을 추가할 수 있습니다.However, icons can be added to each tab with a platform-specific. 자세한 내용은 Windows의 TabbedPage 아이콘을 참조하세요.For more information, see TabbedPage Icons on Windows.

TabbedPage 만들기Create a TabbedPage

두 방법을 TabbedPage를 만드는 데 사용할 수 있습니다.Two approaches can be used to create a TabbedPage:

사용자가 각 탭을 선택하면 두 가지 방법으로 TabbedPage는 각 페이지를 표시합니다.With both approaches, the TabbedPage will display each page as the user selects each tab.

중요

TabbedPageNavigationPageContentPage 인스턴스만으로 채우는 것이 좋습니다.It's recommended that a TabbedPage should be populated with NavigationPage and ContentPage instances only. 이렇게 하면 모든 플랫폼에서 일관된 사용자 환경을 보장하는 데 도움이 됩니다.This will help to ensure a consistent user experience across all platforms.

또한 TabbedPage는 다음 속성을 정의합니다.In addition, TabbedPage defines the following properties:

이 모든 속성은 BindableProperty 개체에서 지원되며, 이는 속성에 스타일을 지정할 수 있으며 속성이 데이터 바인딩의 대상이 될 수 있음을 의미합니다.All of these properties are backed by BindableProperty objects, which means that they can be styled, and the properties can be the targets of data bindings.

경고

TabbedPage에서 각 Page 개체는 TabbedPage가 생성될 때 만들어집니다.In a TabbedPage, each Page object is created when the TabbedPage is constructed. 이로 인해 특히 TabbedPage가 애플리케이션의 루트 페이지인 경우 사용자 환경이 저하될 수 있습니다.This can lead to a poor user experience, particularly if the TabbedPage is the root page of the application. 그러나 Xamarin.Forms 셸l을 사용하면 탐색에 대한 응답으로 탭 표시줄을 통해 액세스되는 페이지를 요청 시 만들 수 있습니다.However, Xamarin.Forms Shell enables pages accessed through a tab bar to be created on demand, in response to navigation. 자세한 내용은 Xamarin.Forms Shell을 참조하세요.For more information, see Xamarin.Forms Shell.

페이지 컬렉션으로 TabbedPage 채우기Populate a TabbedPage with a Page collection

TabbedPage를 자식 Page 개체 컬렉션(예: ContentPage 개체의 컬렉션)으로 채울 수 있습니다.A TabbedPage can be populated with a collection of child Page objects, such as a collection of ContentPage objects. 이렇게 하려면 Page 개체를 TabbedPage.Children 컬렉션에 추가합니다.This is achieved by adding the Page objects to the TabbedPage.Children collection. 이 작업은 다음과 같이 XAML에서 수행합니다.This is accomplished in XAML as follows:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage"
            x:Class="TabbedPageWithNavigationPage.MainPage">
    <local:TodayPage />
    <NavigationPage Title="Schedule" IconImageSource="schedule.png">
        <x:Arguments>
            <local:SchedulePage />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

참고

TabbedPage가 파생되는 MultiPage<T> 클래스의 Children 속성은 MultiPage<T>ContentProperty입니다.The Children property of the MultiPage<T> class, from which TabbedPage derives, is the ContentProperty of MultiPage<T>. 따라서 XAML에서 Children 속성에 Page 개체를 명시적으로 할당할 필요가 없습니다.Therefore, in XAML it's not necessary to explicitly assign the Page objects to the Children property.

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

public class MainPageCS : TabbedPage
{
  public MainPageCS ()
  {
    NavigationPage navigationPage = new NavigationPage (new SchedulePageCS ());
    navigationPage.IconImageSource = "schedule.png";
    navigationPage.Title = "Schedule";

    Children.Add (new TodayPageCS ());
    Children.Add (navigationPage);
  }
}

이 예제에서 TabbedPage는 두 개의 Page 개체로 채워집니다.In this example, the TabbedPage is populated with two Page objects. 첫 번째 자식은 ContentPage 개체이고 두 번째 자식은 ContentPage 개체를 포함하는 NavigationPage입니다.The first child is a ContentPage object, and the second child is a NavigationPage containing a ContentPage object.

다음 스크린샷에서는 TabbedPageContentPage 개체를 보여줍니다.The following screenshots show a ContentPage object in a TabbedPage:

3개 탭이 포함된 TabbedPage의 스크린샷(iOS 및 Android)Screenshot of a TabbedPage containing three tabs, on iOS and Android

다른 탭을 선택하면 해당 탭을 나타내는 ContentPage 개체가 표시됩니다.Selecting another tab displays the ContentPage object that represents the tab:

탭이 포함된 TabbedPage의 스크린샷(iOS 및 Android)Screenshot of a TabbedPage containing tabs, on iOS and Android

일정 탭에서 ContentPage 개체가 NavigationPage 개체에 래핑됩니다.On the Schedule tab, the ContentPage object is wrapped in a NavigationPage object.

경고

NavigationPageTabbedPage에 배치할 수 있지만 TabbedPageNavigationPage에 배치하지 않는 것이 좋습니다.While a NavigationPage can be placed in a TabbedPage, it's not recommended to place a TabbedPage into a NavigationPage. iOS의 경우 UITabBarController가 항상 UINavigationController에 대한 래퍼의 역할을 하기 때문입니다.This is because, on iOS, a UITabBarController always acts as a wrapper for the UINavigationController. 자세한 내용은 iOS 개발자 라이브러리에서 결합된 보기 컨트롤러 인터페이스를 참조하세요.For more information, see Combined View Controller Interfaces in the iOS Developer Library.

ContentPage 개체가 NavigationPage 개체에 래핑된 경우 탭 내 탐색을 수행할 수 있습니다.Navigation can be performed within a tab, provided that the ContentPage object is wrapped in a NavigationPage object. 이렇게 하려면 ContentPage 개체의 Navigation 속성에서 PushAsync 메서드를 호출합니다.This is accomplished by invoking the PushAsync method on the Navigation property of the ContentPage object:

await Navigation.PushAsync (new UpcomingAppointmentsPage ());

탐색하는 페이지는 PushAsync 메서드에 대한 인수로 지정됩니다.The page being navigated to is specified as the argument to the PushAsync method. 이 예제에서는 UpcomingAppointmentsPage 페이지가 탐색 스택으로 푸시되어 활성 페이지가 됩니다.In this example, the UpcomingAppointmentsPage page is pushed onto the navigation stack, where it becomes the active page:

iOS 및 Android에서 탭 내 탐색을 보여 주는 스크린샷Screenshot of navigation within a tab, on iOS and Android

NavigationPage 클래스를 사용하는 검색을 수행하는 방법에 대한 자세한 내용은 계층적 검색을 참조하세요.For more information about performing navigation using the NavigationPage class, see Hierarchical Navigation.

템플릿으로 TabbedPage 채우기Populate a TabbedPage with a template

ItemsSource 속성에 데이터 컬렉션을 할당하고 데이터를 Page 개체로 템플릿화하는 ItemTemplate 속성에 DataTemplate을 할당하여 TabbedPage를 페이지로 채울 수 있습니다.A TabbedPage can be populated with pages by assigning a collection of data to the ItemsSource property, and by assigning a DataTemplate to the ItemTemplate property that templates the data as Page objects. 이 작업은 다음과 같이 XAML에서 수행합니다.This is accomplished in XAML as follows:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:local="clr-namespace:TabbedPageDemo;assembly=TabbedPageDemo"
            x:Class="TabbedPageDemo.TabbedPageDemoPage"
            ItemsSource="{x:Static local:MonkeyDataModel.All}">            
  <TabbedPage.Resources>
    <ResourceDictionary>
      <local:NonNullToBooleanConverter x:Key="booleanConverter" />
    </ResourceDictionary>
  </TabbedPage.Resources>
  <TabbedPage.ItemTemplate>
    <DataTemplate>
      <ContentPage Title="{Binding Name}" IconImageSource="monkeyicon.png">
        <StackLayout Padding="5, 25">
          <Label Text="{Binding Name}" Font="Bold,Large" HorizontalOptions="Center" />
          <Image Source="{Binding PhotoUrl}" WidthRequest="200" HeightRequest="200" />
          <StackLayout Padding="50, 10">
            <StackLayout Orientation="Horizontal">
              <Label Text="Family:" HorizontalOptions="FillAndExpand" />
              <Label Text="{Binding Family}" Font="Bold,Medium" />
            </StackLayout>
            ...
          </StackLayout>
        </StackLayout>
      </ContentPage>
    </DataTemplate>
  </TabbedPage.ItemTemplate>
</TabbedPage>

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

public class TabbedPageDemoPageCS : TabbedPage
{
  public TabbedPageDemoPageCS ()
  {
    var booleanConverter = new NonNullToBooleanConverter ();

    ItemTemplate = new DataTemplate (() =>
    {
      var nameLabel = new Label
      {
        FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)),
        FontAttributes = FontAttributes.Bold,
        HorizontalOptions = LayoutOptions.Center
      };
      nameLabel.SetBinding (Label.TextProperty, "Name");

      var image = new Image { WidthRequest = 200, HeightRequest = 200 };
      image.SetBinding (Image.SourceProperty, "PhotoUrl");

      var familyLabel = new Label
      {
        FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
        FontAttributes = FontAttributes.Bold
      };
      familyLabel.SetBinding (Label.TextProperty, "Family");
      ...

      var contentPage = new ContentPage
      {
        IconImageSource = "monkeyicon.png",
        Content = new StackLayout {
          Padding = new Thickness (5, 25),
          Children =
          {
            nameLabel,
            image,
            new StackLayout
            {
              Padding = new Thickness (50, 10),
              Children =
              {
                new StackLayout
                {
                  Orientation = StackOrientation.Horizontal,
                  Children =
                  {
                    new Label { Text = "Family:", HorizontalOptions = LayoutOptions.FillAndExpand },
                    familyLabel
                  }
                },
                // ...
              }
            }
          }
        }
      };
      contentPage.SetBinding (TitleProperty, "Name");
      return contentPage;
    });
    ItemsSource = MonkeyDataModel.All;
  }
}

이 예제에서 각 탭은 ImageLabel 개체를 사용하여 탭의 데이터를 표시하는 ContentPage 개체로 구성됩니다.In this example, each tab consists of a ContentPage object that uses Image and Label objects to display data for the tab:

템플릿 기반 TabbedPage의 스크린샷(iOS 및 Android)Screenshot of a templated TabbedPage, on iOS and Android

다른 탭을 선택하면 해당 탭을 나타내는 ContentPage 개체가 표시됩니다.Selecting another tab displays the ContentPage object that represents the tab.