Tampilan Tab

Kita dapat memiliki tab menggunakan Shell. Namun, apa yang terjadi jika kita ingin memiliki tab bersarang dalam bagian tertentu (Contoh: Grid)?, _bagaimana jika kita ingin menyesuaikan setiap tab secara penuh?_. Dalam kasus ini, sejauh ini kita membutuhkan Renderer Kustom...

TabView adalah cara untuk menampilkan sekumpulan tab dan kontennya masing-masing. TabView berguna untuk menampilkan beberapa konten sambil memberi pengguna kemampuan untuk menyesuaikan sebagian besar semuanya.

CATATAN: TabView adalah tampilan lintas platform yang mengambil alih ketika tab asli mencapai batasnya, seperti pemosisian dengan tata letak, gaya, dan gaya yang tidak seragam seperti tombol yang dinaikkan.

API

Selanjutnya, daftar dengan properti TabView, peristiwa, dan status visual.

Properti

Properti Tampilan Tab

| Properti | Ketik | Deskripsi |
|----------|:-------------:|:-------------:|
| TabItemsSumber | IE dapat dihitung | Koleksi yang digunakan untuk menghasilkan item tab TabView. |
| TabViewItemDataTemplate | DataTemplat | template yang digunakan Tampilan Tab untuk menghasilkan tajuk item tab. |
| TabContentDataTemplate | DataTemplat | Kerangka yang digunakan Tampilan Tab untuk menghasilkan konten item tab. |
| IsCyclical | Bool | Mengaktifkan atau menonaktifkan navigasi tab siklus. |
| Malas | Bool | Mengaktifkan atau menonaktifkan pemuatan tab malas. |
| Indeks Terpilih | Int | Mendapatkan atau menyetel tab yang saat ini dipilih. Standarnya adalah 0. |
| TabStripPenempatan | TabStripPenempatan | Penempatan TabStrip (atas atau bawah). |
| TabStripLatar Belakang | Kuas | Latar belakang TabStrip. |
| TabIndikatorKuas | Kuas | Latar belakang TabIndikator. |
| TabIndikatorTinggi | ganda | Tinggi TabIndikator. |
| TabIndikatorLebar | ganda | Lebar TabIndikator. |
| TabIndikatorPenempatan | TabIndikatorPenempatan | |
| TabIndikatorTampilan | Lihat | Konten TabIndikator. |
| TabKontenLatar Belakang | Kuas | Latar belakang konten tab. |
| TabContentHeight | Ganda | Tinggi konten tab. |
| TabStripHeight | Ganda | Tinggi TabStrip. |
| TabContentHeight | Ganda | Tinggi konten tab. |
| HasTabStripShadow | Bool | Menampilkan atau menyembunyikan efek bayangan TabStrip. |
| IsTabTransitionEnabled | Bool | Mengaktifkan atau menonaktifkan transisi antar tab. |
| IsSwipeEnabled | Bool | Mengaktifkan atau menonaktifkan gerakan menggesek. |

Properti TabViewItem

| Properti | Ketik | Deskripsi |
|----------|:-------------:|:-------------:|
| Teks | String | Teks tab. |
| Warna Teks | Warna | Warna teks tab. |
| WarnaTeksDipilih | Warna | Warna teks dari tab yang dipilih. |
| Ukuran Font | Ukuran Font | Ukuran font yang digunakan dalam teks tab. |
| Ukuran Font Dipilih | Ukuran Font | Ukuran font yang digunakan di tab yang dipilih. |
| Keluarga Font | String | Keluarga font yang digunakan di tab. |
| FontFamilyDipilih | String | Keluarga font yang digunakan di tab yang dipilih. |
| FontAttributes | FontAttributes | Atribut font yang digunakan di tab. |
| FontAttributesDipilih | FontAttributes | Atribut font yang digunakan di tab yang dipilih. |
| Ikon | Sumber Gambar | Ikon tab. |
| IkonDipilih | Sumber Gambar | ImageSource digunakan sebagai ikon di tab yang dipilih. |
| Konten | Lihat | Isi tabnya. Adalah View, dapat menggunakan apa saja sebagai konten. |
| Teks Lencana | Bool | Teks lencana yang digunakan di tab. |
| LencanaTeksWarna | Warna | Warna teks lencana yang digunakan di tab. |
| BadgeTextColorSelected | Warna | Warna teks lencana yang digunakan di tab yang dipilih. |
| LencanaLatar BelakangWarna | Warna | Warna lencana yang digunakan di tab. |
| BadgeBackgroundColorSelected | Warna | Warna lencana yang digunakan di tab yang dipilih. |
| Dipilih | Bool | sebuah bool yang menunjukkan jika tab dipilih atau tidak. |
| Ketuk Perintah | ICommand | Perintah yang dijalankan saat pengguna mengetuk tab. |
| KetukCommandParameter | objek | Parameter perintah ketuk. |

Acara

TabView Acara

| Acara | Deskripsi |
|----------|:-------------:|
| PilihanDiubah | Event yang dimunculkan ketika tab yang dipilih berubah. |
| Digulir | Acara yang dimunculkan saat menggesek antar tab. |

Acara TabViewItem

| Acara | Deskripsi |
|----------|:-------------:|
| TabKetuk | Event yang dimunculkan saat pengguna tap tab. |

keadaan visual

Visual State Manager (VSM) menyediakan cara terstruktur untuk membuat perubahan visual pada antarmuka pengguna dari kode.
VSM memperkenalkan konsep status visual. TabView dapat memiliki beberapa tampilan visual yang berbeda tergantung pada keadaan dasarnya.

TabView memiliki empat VisualStates tertentu:

• StatusTabVisual Saat Ini
• BerikutnyaTabVisualState
• SebelumnyaTabVisualState
• DefaultTabVisualState

Skenario

Mari kita lihat beberapa contoh yang mencakup skenario umum.

Tab Dasar

Mari kita lihat contoh dasarnya:

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

TabItemSumber

Menggunakan TabItemsSource (tab dinamis):

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

Tab Khusus

Tampilan setiap tab dapat disesuaikan:

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

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

Tab Siklus

Apakah Anda ingin bernavigasi di antara tab secara siklis?

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

Pemuatan Malas

Pemuatan tab malas:

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

Transisi Tab dan animasi TabViewItem

Dapat menggunakan animasi Xamarin.Forms untuk menyesuaikan transisi antar setiap tab, menganimasikan tab saat muncul atau menghilang, atau bahkan menganimasikan lencana saat muncul atau menghilang.

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

Menggunakan VisualStates

Dapat menggunakan status visual yang berbeda untuk menyesuaikan tab saat ini, tab berikutnya, dll.

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

Buat Tab menggunakan C

Anda dapat menggunakan XAML atau C# untuk membuat UI di Xamarin.Forms. Mari kita lihat bagaimana kita akan membuat tab menggunakan 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);

Menggunakan Gaya

Dapat menyesuaikan tampilan konten tab, strip tab, item tab, dll. menggunakan gaya XAML atau CSS .

Menggunakan XAML:

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

Menggunakan CSS:

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

Kesulitan: Sedang

Informasi lebih lanjut

Berdasarkan https://github.com/xamarin/Xamarin.Forms/issues/10773