.NET MAUI Shell을 사용하여 탭 탐색 구현
- 10분
탭 탐색은 탭 스트립(터치할 수 있는 컨트롤 행)이 화면의 맨 위나 아래에 영구적으로 표시되는 탐색 패턴입니다. 탭 탐색은 사용자가 여러 페이지 앱의 페이지 중에서 선택할 수 있는 메커니즘을 제공합니다.
이 단원에서는 탭 탐색을 구현하는 앱을 만드는 방법을 알아봅니다.
탭 탐색이란?
탭 탐색을 사용하는 앱에서 각 탭은 앱의 특정 섹션 또는 페이지를 나타냅니다. 사용자는 애플리케이션에서 콘텐츠 간에 이동하려면 탭 스트립 내에서 탭을 선택합니다. 예를 들어 다음 그림은 iOS 시계 앱에서 탭 탐색을 사용하는 방법을 보여줍니다. 페이지 아래쪽에 강조 표시된 아이콘을 사용하면 다른 보기 간에 전환할 수 있습니다. 이러한 아이콘은 탭에 해당하며 보기는 탭 페이지입니다.
탭 스트립은 항상 표시되기 때문에 사용자가 탭 탐색을 통해 애플리케이션의 콘텐츠를 신속하게 전환할 수 있습니다. 애플리케이션에 사용자가 자주 사용할 만한 섹션이 여러 개 있는 경우 이상적입니다. 시계 애플리케이션이 좋은 예입니다. 시계, 알람 및 스톱워치는 자주 사용할 만한 섹션입니다.
모바일 디바이스에서는 일반적으로 탭 스트립 공간이 제한적이기 때문에 디바이스 크기와 방향에 따라 고정된 수의 탭만 표시할 수 있습니다. 3~4개의 탭만 사용하는 것이 좋습니다. 탭을 더 많이 포함하면, 모든 디바이스에서 모든 탭을 표시하기에 충분한 공간을 보장할 수 없습니다. .NET MAUI에서 지원하는 운영 체제는 오버플로 영역을 허용합니다. 이 영역은 화면에 맞지 않는 탭에 액세스할 수 있는 더 많은 영역을 제공합니다. 그러나 이러한 오버플로 탭으로 이동하려면 사용자의 추가 단계가 필요합니다. 이런 섹션은 쉽게 발견할 수 없습니다.
필요한 탭이 4개를 초과하면 플라이아웃 항목 탐색과 같은 다른 탐색 패턴을 사용하는 것이 좋습니다. 또한 데이터가 자연스러운 마스터-세부 계층 구조를 형성하는 경우에는 탭 탐색이 최상의 옵션이 아닙니다. 이런 경우 스택 탐색을 고려해야 합니다.
.NET MAUI 앱의 탭 탐색
.NET MAUI 셸 앱에서 탭 탐색을 구현하려면 TabBar 개체를 사용합니다.
TabBar 개체는 탭 세트를 표시하고 사용자가 탭을 선택하면 표시된 콘텐츠를 자동으로 전환합니다. 다음 그림에서는 UI 영역을 보여줍니다.
.NET MAUI Shell 애플리케이션에서 탭을 사용하려면 TabBar 클래스의 인스턴스를 Shell 클래스의 자식으로 만듭니다. 그런 다음, Tab 개체를 TabBar에 추가합니다.
Tab 개체 내에서 ShellContent 개체는 ContentPage 개체로 설정해야 합니다.
TabbedPage 만들기
TabBar 인스턴스를 Shell 클래스의 자식으로 생성할 수 있습니다. 필요에 따라 Tab 개체를 TabBar에 자식으로 추가합니다.
Tab 개체 내에서 ShellContent 개체는 ContentPage 개체로 설정해야 합니다.
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:Xaminals.Views"
x:Class="Xaminals.AppShell">
<TabBar>
<Tab Title="Moon Phase"
Icon="moon.png">
<ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
</Tab>
<Tab Title="Sunrise"
Icon="sun.png">
<ShellContent ContentTemplate="{DataTemplate local:SunrisePage}" />
</Tab>
</TabBar>
</Shell>
플라이아웃 메뉴 내의 탭
플라이아웃 항목은 하나 이상의 탭을 표시하는 탭 표시줄이 있는 페이지를 열 수 있습니다.
이 디자인을 구현하려면 표시하려는 각 탭의 <ShellContent> 내에 <FlyoutItem> 항목을 추가합니다.
Title에서 Icon 및 <ShellContent>를 설정하여 탭의 제목과 아이콘을 제어합니다.
<FlyoutItem Title="Astronomy" Icon="moon.png">
<ShellContent Title="Moon Phase" Icon="moon.png"
ContentTemplate="{DataTemplate local:MoonPhasePage}"/>
<ShellContent Title="Sunrise" Icon="sun.png"
ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>
<FlyoutItem Title="About" Icon="question.png">
<ShellContent
ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>