Xamarin.Forms TabbedPage

Stáhnout ukázku Stažení ukázky

Sestává ze seznamu karet a větší oblasti podrobností, z nichž každá karta Xamarin.FormsTabbedPage načítá obsah do oblasti podrobností. Následující snímky obrazovky ukazují v TabbedPage iOSu a Androidu:

Snímek obrazovky sTabbedPage obsahující třikarty v iOSu a

V iOSu se v dolní části obrazovky zobrazí seznam karet a oblast podrobností je nad. Každá karta se skládá z názvu a ikony, což by měl být soubor PNG s kanálem alfa. V orientaci na výšku se nad názvy karet zobrazují ikony na panelu karet. V orientaci na šířku se ikony a názvy zobrazují vedle sebe. Kromě toho se může v závislosti na zařízení a orientaci zobrazit běžný nebo kompaktní panel karet. Pokud existuje více než pět karet, zobrazí se karta Více, kterou můžete použít pro přístup k dalším kartách. Informace o požadavcích na ikonu najdete v tématu Velikost ikony panelu karet na developer.apple.com.

V Androidu se v horní části obrazovky zobrazí seznam karet a oblast podrobností je pod ní. Každá karta se skládá z názvu a ikony, což by měl být soubor PNG s kanálem alfa. Karty je ale možné přesunout do dolní části obrazovky s konkrétní platformou. Pokud je karet více než pět a seznam karet je v dolní části obrazovky, zobrazí se karta Další, kterou můžete použít pro přístup k dalším kartách. Informace o požadavcích na ikonu najdete v tématu Karty material.io a Podpora různých hustot pixelů na developer.android.com. Informace o přesunutí karet do dolní části obrazovky najdete v tématu Nastavení umístění panelu nástrojů TabbedPage a barvy.

Na univerzální platformě Windows platformě (UPW) se v horní části obrazovky zobrazí seznam karet a oblast podrobností je níže. Každá karta se skládá z názvu. Na každou kartu je však možné přidat ikony specifické pro konkrétní platformu. Další informace najdete v tématu Ikony TabbedPage na Windows.

Tip

Soubory SVG (Scalable Vector Graphic) je možné zobrazit jako ikony karet v TabbedPage objektu :

  • Třída iOS TabbedRenderer má přepisitelnou metodu, kterou je možné použít k GetIcon načtení ikon karet ze zadaného zdroje. V případě potřeby je také možné poskytnuta vybraná a nevybraná verze ikony.
  • Třída Android AppCompat má přepisitelnou metodu, kterou je možné použít k TabbedPageRenderer načtení ikon karet z SetTabIconImageSource vlastního Drawable . Alternativně lze soubory SVG převést na prostředky s možností vektorového kreslení, které lze automaticky zobrazit pomocí Xamarin.Forms . Další informace o převodu souborů SVG na prostředky s možností kreslení vektorů najdete v tématu Přidání vektorové grafiky s více hustotou na developer.android.com.

Další informace naleznete v tématu Xamarin.Forms TabbedPage with SVG tab icons.

Vytvoření stránky TabbedPage

K vytvoření lze použít dva TabbedPage přístupy:

U obou přístupů TabbedPage se každá stránka zobrazí tak, jak uživatel vybere jednotlivé karty.

Důležité

Doporučuje se naplnit pouze instancemi a TabbedPageNavigationPageContentPage . To vám pomůže zajistit konzistentní uživatelské prostředí na všech platformách.

Kromě toho TabbedPage definuje následující vlastnosti:

Všechny tyto vlastnosti jsou zálohovány objekty, což znamená, že mohou být stylovány, a vlastnosti mohou být cíle BindableProperty datových vazeb.

Upozornění

V TabbedPage objektu se Page každý objekt vytvoří při vytvoření objektu TabbedPage . To může vést ke špatnému uživatelskému prostředí, zejména pokud je kořenovou TabbedPage stránkou aplikace. Shell ale umožňuje, aby se stránky, ke kterým se přistupuje prostřednictvím panelu karet, vytvořily na vyžádání Xamarin.Forms v reakci na navigaci. Další informace naleznete v tématu Xamarin.Forms Shell.

Naplnění tabbedPage kolekcí Page

Objekt TabbedPage může být naplněn kolekcí podřízených Page objektů, jako je například kolekce ContentPage objektů. Toho lze dosáhnout přidáním Page objektů do TabbedPage.Children kolekce. V jazyce XAML se toho dosahuje takto:

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

Poznámka

Vlastnost ChildrenMultiPage<T> třídy, ze které TabbedPage je odvozena, je ContentProperty vlastnost třídy MultiPage<T> . V jazyce XAML proto není nutné explicitně přiřazovat Page objekty k Children vlastnosti .

Ekvivalentní kód jazyka C# je:

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);
  }
}

V tomto příkladu TabbedPage je objekt naplněn dvěma Page objekty. První podřízený objekt je objekt a ContentPage druhý podřízený objekt obsahuje objekt NavigationPageContentPage .

Následující snímky obrazovky ukazují ContentPage objekt v TabbedPage objektu :

Snímek obrazovky sTabbedPage obsahující třikarty v iOSu a

Výběrem jiné karty se ContentPage zobrazí objekt, který představuje kartu:

kartami Snímek obrazovky s tabulátoremStránkaobsahující karty v iOSu a

Na kartě Plán je objekt zabalen do objektu NavigationPage .

Upozornění

I když může být umístěn v , nedoporučuje NavigationPage se umístit do TabbedPageTabbedPageNavigationPage . Je to proto, že v iOSu vždy funguje jako UITabBarController obálka pro UINavigationController . Další informace najdete v tématu Kombinovaná rozhraní kontroleru zobrazení v knihovně pro vývojáře pro iOS.

Navigaci lze provést na kartě za předpokladu, že ContentPage je objekt zabalen do NavigationPage objektu. Toho se dosahuje vyvoláním metody na PushAsyncPushAsync Xamarin_Forms _NavigableElement_Navigation" data-linktype="absolute-path">vlastnosti objektu NavigationContentPage :

await Navigation.PushAsync (new UpcomingAppointmentsPage ());

Stránka, na které přejdete, se zadá jako argument PushAsync metody . V tomto příkladu se UpcomingAppointmentsPage stránka předá do navigačního zásobníku, kde se stane aktivní stránkou:

obrazovky s navigací na kartě v navigaci viOSu a Androidu

Další informace o provádění navigace pomocí NavigationPage třídy najdete v tématu NavigationPage.

Naplnění stránky TabbedPage šablonou

Objekt lze naplnit stránkami přiřazením kolekce dat k vlastnosti TabbedPageTabbedPage Xamarin_Forms _MultiPage_1_ItemsSource" data-linktype="absolute-path">a přiřazením vlastnosti ItemsSource Xamarin_Forms DataTemplate _MultiPage_1_ItemTemplate" data-linktype="absolute-path">, ItemTemplatePage která data šablonuje jako objekty. V jazyce XAML se toho dosahuje takto:

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

Ekvivalentní kód jazyka C# je:

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

V tomto příkladu se každá karta skládá z objektu, který používá objekty a k ContentPageImage zobrazení dat pro Label kartu:

s šablonoutabbedPage v iOSu a Androidu podle šablony

Výběrem jiné karty se ContentPage zobrazí objekt, který představuje kartu.