탭뷰

Shell을 사용하여 탭을 가질 수 있습니다. 그러나 특정 섹션(예: 그리드) 내에 중첩된 탭을 갖고 싶다면 어떻게 됩니까?, _각 탭을 완전히 사용자 정의하려면 어떻게 해야 합니까?_. 이러한 경우 지금까지 Custom Renderer가 필요합니다...

TabView 는 탭 집합과 해당 콘텐츠를 표시하는 방법입니다. TabView는 사용자에게 대부분의 모든 것을 사용자 정의할 수 있는 기능을 제공하면서 여러 콘텐츠를 표시하는 데 유용합니다.

참고: TabView는 레이아웃을 사용한 위치 지정, 스타일 지정, 돌출된 버튼과 같은 균일하지 않은 스타일 지정과 같은 네이티브 탭이 한계에 도달했을 때 인계받는 크로스 플랫폼 보기 입니다.

API

다음으로 TabView 속성, 이벤트 및 시각적 상태가 있는 목록입니다.

속성

TabView 속성

| 재산 | 유형 | 설명 |
|------------|:-------------:|:-------------:|
| 탭 항목 소스 | IE숫자 | TabView의 탭 항목을 생성하는 데 사용되는 컬렉션입니다. |
| TabViewItemDataTemplate | 데이터 템플릿 | 탭 보기가 탭 항목의 헤더를 생성하는 데 사용하는 템플릿입니다. |
| 탭 콘텐츠 데이터 템플릿 | 데이터 템플릿 | 탭 보기가 탭 항목의 콘텐츠를 생성하는 데 사용하는 템플릿입니다. |
| IsCyclical | 부울 | 순환 탭 탐색을 활성화하거나 비활성화합니다. |
| IsLazy | 부울 | 지연 탭 로드를 ​​활성화하거나 비활성화합니다. |
| 선택 인덱스 | 인트 | 현재 선택된 탭을 가져오거나 설정합니다. 기본값은 0입니다. |
| 탭스트립배치 | 탭스트립배치 | TabStrip 배치(상단 또는 하단). |
| 탭스트립 배경 | 브러시 | TabStrip 배경입니다. |
| 탭 표시기 브러시 | 브러시 | TabIndicator 배경. |
| 탭 표시기 높이 | 더블 | TabIndicator 높이입니다. |
| 탭 표시기 너비 | 더블 | TabIndicator 너비입니다. |
| 탭 표시기 배치 | 탭 표시기 배치 | |
| 탭 표시기 보기 | 보기 | TabIndicator 콘텐츠. |
| 탭 콘텐츠 배경 | 브러시 | 탭 콘텐츠 배경입니다. |
| 탭 콘텐츠 높이 | 더블 | 탭 콘텐츠 높이입니다. |
| 탭스트립 높이 | 더블 | TabStrip 높이입니다. |
| 탭 콘텐츠 높이 | 더블 | 탭 콘텐츠 높이입니다. |
| HasTabStripShadow | 부울 | TabStrip 그림자 효과를 표시하거나 숨깁니다. |
| IsTabTransitionEnabled | 부울 | 탭 간 전환을 활성화하거나 비활성화합니다. |
| IsSwipe활성화 | 부울 | 스와이프 제스처를 활성화하거나 비활성화합니다. |

TabViewItem 속성

| 재산 | 유형 | 설명 |
|------------|:-------------:|:-------------:|
| 텍스트 | 문자열 | 탭의 텍스트입니다. |
| 텍스트 색상 | 색상 | 탭의 텍스트 색상입니다. |
| 텍스트 색상 선택 | 색상 | 선택한 탭의 텍스트 색상입니다. |
| 글꼴 크기 | 글꼴 크기 | 탭 텍스트에 사용된 글꼴 크기입니다. |
| 글꼴 크기 선택 | 글꼴 크기 | 선택한 탭에 사용된 글꼴 크기입니다. |
| 폰트패밀리 | 문자열 | 탭에 사용된 글꼴 모음입니다. |
| FontFamilySelected | 문자열 | 선택한 탭에 사용된 글꼴 모음입니다. |
| 글꼴 속성 | 글꼴 속성 | 탭에 사용된 글꼴 속성입니다. |
| FontAttributes선택됨 | 글꼴 속성 | 선택한 탭에 사용된 글꼴 속성입니다. |
| 아이콘 | 이미지 소스 | 탭의 아이콘입니다. |
| 아이콘선택 | 이미지 소스 | 선택한 탭에서 아이콘으로 사용되는 ImageSource입니다. |
| 내용 | 보기 | 탭의 내용입니다. View는 무엇이든 콘텐츠로 사용할 수 있습니다. |
| 배지 텍스트 | 부울 | 탭에 사용된 배지 텍스트입니다. |
| 배지 텍스트 색상 | 색상 | 탭에 사용된 배지 텍스트 색상입니다. |
| 배지텍스트색상선택 | 색상 | 선택한 탭에 사용된 배지 텍스트 색상입니다. |
| 배지 배경색 | 색상 | 탭에 사용된 배지 색상입니다. |
| 배지 배경색 선택 | 색상 | 선택한 탭에 사용된 배지 색상입니다. |
| 선택됨 | 부울 | 탭이 선택되었는지 여부를 나타내는 bool. |
| 탭커맨드 | 아이커맨드 | 사용자가 탭을 탭할 때 실행되는 명령입니다. |
| TapCommand매개변수 | 개체 | 탭 명령 매개변수. |

이벤트

TabView 이벤트

| 이벤트 | 설명 |
|------------|:-------------:|
| 선택 변경됨 | 선택한 탭이 변경될 때 발생하는 이벤트입니다. |
| 스크롤 | 탭 사이를 스와이프할 때 발생하는 이벤트입니다. |

TabViewItem 이벤트

| 이벤트 | 설명 |
|------------|:-------------:|
| 탭탭 | 사용자가 탭을 탭할 때 발생하는 이벤트입니다. |

비주얼 스테이트

VSM(Visual State Manager)은 코드에서 사용자 인터페이스를 시각적으로 변경할 수 있는 구조화된 방법을 제공합니다.
VSM은 시각적 상태의 개념을 소개합니다. TabView는 기본 상태에 따라 여러 가지 다른 시각적 모양을 가질 수 있습니다.

TabView에는 4가지 특정 VisualState 가 있습니다.

• CurrentTabVisualState
• NextTabVisualState
• PreviousTabVisualState
• DefaultTabVisualState

시나리오

일반적인 시나리오를 다루는 몇 가지 샘플을 살펴보겠습니다.

기본 탭

기본 예를 살펴보겠습니다.

<TabView 
    TabStripPlacement="Bottom"
    TabStripBackgroundColor="Blue">
    <TabViewItem
        Icon="triangle.png"
        Text="Tab 1">
        <Grid 
            BackgroundColor="Gray">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    <TabViewItem
        Icon="circle.png"
        Text="Tab 2">
        <Grid>
            <Label    
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent2" />
        </Grid>
    </TabViewItem>
</TabView>

탭 항목 소스

TabItemsSource(동적 탭) 사용:

<TabView
    TabItemsSource="{Binding Monkeys}"
    TabViewItemDataTemplate="{StaticResource TabViewItemTemplate}"
    TabContentDataTemplate="{StaticResource TabContentTemplate}" />

사용자 정의 탭

각 탭의 모양은 다음과 같이 사용자 정의할 수 있습니다.

<ControlTemplate
    x:Key="TabItemTemplate">
    <Grid>
    ...
    </Grid>
</ControlTemplate>

<TabView>
    <TabViewItem
        Text="Tab 1"
        ControlTemplate="{StaticResource TabItemTemplate}">
    </TabViewItem>
</TabView>

순환 탭

탭 사이를 주기적으로 탐색하시겠습니까?

<TabView
    IsCyclical="True">
    ...
</TabView>

지연 로딩

지연 탭 로딩:

<TabView
    IsLazy="True">
    ...
</TabView>

탭 전환 및 TabViewItem 애니메이션

Xamarin.Forms 애니메이션을 사용하여 각 탭 간의 전환을 사용자 지정하고, 나타나거나 사라질 때 탭에 애니메이션을 적용하거나, 나타나거나 사라질 때 배지에 애니메이션을 적용할 수도 있습니다.

<TabView>
    <TabView.TabTransition>
        <local:CustomTabTransition />
    </TabView.TabTransition>
    <TabViewItem
        Text="Tab 1">      
            <TabViewItem.TabAnimation>
                <local:CustomTabViewItemAnimation />
            </TabViewItem.TabAnimation>
        <Grid 
            BackgroundColor="LawnGreen">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    ...
</TabView>

VisualStates 사용

다른 시각적 상태를 사용하여 현재 탭, 다음 탭 등을 사용자 지정할 수 있습니다.

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="TabViewStates">
            <VisualState x:Name="CurrentTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="1" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="PreviousTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.7" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="NextTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.7" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="DefaultTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.9" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Label Text="{Binding Index}" HorizontalOptions="Center" VerticalOptions="End" />
</Grid>

C를 사용하여 탭 만들기

XAML 또는 C#을 사용하여 Xamarin.Forms에서 UI를 만들 수 있습니다. C#을 사용하여 탭을 만드는 방법을 살펴보겠습니다.

var tabView = new Tabs
{
    TabStripPlacement = TabStripPlacement.Bottom,
    TabStripBackgroundColor = Color.Blue,
    TabStripHeight = 60,
    TabIndicatorColor = Color.Yellow,
    TabContentBackgroundColor = Color.Yellow
};

var tabViewItem1 = new TabViewItem
{
    Icon = "triangle.png",
    Text = "Tab 1",
    TextColor = Color.White,
    TextColorSelected = Color.Yellow,
};

var tabViewItem1Content = new Grid
{
    BackgroundColor = Color.Gray
};

var label1 = new Label
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Text = "TabContent1"
};

tabViewItem1Content.Children.Add(label1);

tabViewItem1.Content = tabViewItem1Content;

tabView.TabItems.Add(tabViewItem1);

var tabViewItem2 = new TabViewItem
{
    Icon = "circle.png",
    Text = "Tab 2",
    TextColor = Color.White,
    TextColorSelected = Color.Yellow
};

var tabViewItem2Content = new Grid
{
    BackgroundColor = Color.OrangeRed
};

var label2 = new Label
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Text = "TabContent2"
};

tabViewItem2Content.Children.Add(label2);

tabViewItem2.Content = tabViewItem2Content;

tabView.TabItems.Add(tabViewItem2);

스타일 사용

XAML 스타일 또는 CSS 를 사용하여 탭 콘텐츠, 탭 스트립, 탭 항목 등의 모양을 사용자 지정할 수 있습니다.

XAML 사용:

<Style
    x:Key="TabItemStyle"
    TargetType="TabViewItem">
    <Setter
        Property="FontSize"
        Value="12" />
    <Setter
        Property="TextColor"
        Value="#979797" />
</Style>

CSS 사용:

.customTabItem {
    font-size: medium;
    text-color: red;
}

난이도 : 중