Kann man System-Icons auf Tabs in Xamarin Forms verwenden?

Question

Gibt es eine Möglichkeit, ein "System" -Symbol anzugeben, das bei Verwendung von Xamarin Forms auf einer Registerkarte angezeigt wird? Ich würde gerne Symbole wie Favoriten, Lesezeichen, Verlauf usw. verwenden, aber ich möchte nicht alle meine eigenen Bilder für die verschiedenen Plattformen liefern.

Mit Xamarin.iOS man diese Syntax verwenden:

tab1.TabBarItem = new UITabBarItem (UITabBarSystemItem.Favorites, 0); 

Ich kann jedoch nicht gefunden, wie dieses Projekt in dem Cross-Plattform-Xamarin.Forms zu tun.

Dies ist mein aktueller Code:

var profilePage = new ContentPage { 
    Title = "Profile", 
    //This requires my own images to be added to the project whereas 
    //I wish to use built-in images which are platform specific for 
    //Favourites, Bookmark, More, etc... 
    //Icon = "Profile.png", 
    Content = new StackLayout { 
     Spacing = 20, Padding = 50, 
     VerticalOptions = LayoutOptions.Center, 
     Children = { 
     new Entry { Placeholder = "Username" }, 
     new Entry { Placeholder = "Password", IsPassword = true }, 
     new Button { 
      Text = "Login", 
      TextColor = Color.White, 
      BackgroundColor = Color.FromHex("77D065") }}}}; 

var settingsPage = new ContentPage { 
    Title = "Settings", 
    Content = new StackLayout { 
     Spacing = 20, Padding = 50, 
     VerticalOptions = LayoutOptions.Center, 
     Children = { 
      new Entry { Placeholder = "Username" }, 
      new Entry { Placeholder = "Password", IsPassword = true }}} 
     }; 


MainPage = new TabbedPage { Children = {profilePage, settingsPage} }; 

Answer 1

Für iOS

Sie benötigen einen benutzerdefinierten Renderer für Ihre Seite. In meinem Beispiel ist dies die CustomTabsPage-Klasse. Sie können nicht einfach System-Icons verwenden, um ein UIImage zu erstellen. Wir müssen UITabBarItem verwenden. Das Problem besteht darin, dass UITabBarItem keine Änderungen an Titel oder Bild/Symbol zulässt. Aber wir können ein Bild davon kopieren.

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 

using UIKit; 
using ButtonRendererDemo; 
using ButtonRendererDemo.iOS; 
using Xamarin.Forms; 
using Xamarin.Forms.Platform.iOS; 

[assembly: ExportRenderer(typeof(CustomTabsPage), typeof(CustomTabsPageRenderer))] 
namespace ButtonRendererDemo.iOS 
{ 
    public class CustomTabsPageRenderer : TabbedRenderer 
    { 

     #region Sytem Image with custom title 

     public override void ViewWillAppear(bool animated) 
     { 
      base.ViewWillAppear(animated); 

      foreach (var item in TabBar.Items) 
      { 
       item.Image = GetTabIcon(item.Title); 
      } 
     } 

     private UIImage GetTabIcon(string title) 
     { 
      UITabBarItem item = null; 

      switch (title) 
      { 
       case "Profile": 
        item = new UITabBarItem(UITabBarSystemItem.Search, 0); 
        break; 
       case "Settings": 
        item = new UITabBarItem(UITabBarSystemItem.Bookmarks, 0); 
        break; 
      } 

      var img = (item != null) ? UIImage.FromImage(item.SelectedImage.CGImage, item.SelectedImage.CurrentScale, item.SelectedImage.Orientation) : new UIImage(); 
      return img; 
     } 

     #endregion 
    } 
} 

Für Android

Dinge sind leichter

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 

using ButtonRendererDemo; 
using ButtonRendererDemo.Droid; 
using Xamarin.Forms; 
using Xamarin.Forms.Platform.Android; 
using Xamarin.Forms.Platform.Android.AppCompat; 
using Android.Support.Design.Widget; 

[assembly: ExportRenderer(typeof(CustomTabsPage), typeof(CustomTabsPageRenderer))] 
namespace ButtonRendererDemo.Droid 
{ 
    public class CustomTabsPageRenderer : TabbedPageRenderer 
    { 
     protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e) 
     { 
      base.OnElementChanged(e); 

      //var layout = (TabLayout)ViewGroup.GetChildAt(1); //should be enough but just for robustness we use loop below 

      TabLayout layout = null; 
      for (int i = 0; i < ChildCount; i++) 
      { 
       layout = GetChildAt(i) as TabLayout; 
       if (layout != null) 
        break; 
      } 
      if (layout != null) 
      { 
       for (int tabIndex = 0; tabIndex < layout.TabCount; tabIndex++) 
        SetTabIcon(layout, tabIndex); 
      } 
     } 

     private void SetTabIcon(TabLayout layout, int tabIndex) 
     { 
      var tab = layout.GetTabAt(tabIndex); 

      switch (tabIndex) 
      { 
       case 0: 
        tab.SetIcon(Resource.Drawable.icon2);//from local resource 
        break; 
       case 1: 
        tab.SetIcon(Resource.Drawable.ic_media_play_dark);//from Android system, depends on version ! 
        break; 
      } 
     } 
    } 

} 

Answer 2

Sie sollten benutzerdefinierten TabbedPage Renderer für iOS-Projekt schreiben:

public class YourTabbedRenderer : TabbedRenderer { 
     public override void ViewWillAppear(bool animated) 
     { 
      base.ViewWillAppear(animated); 
      var items = TabBar.Items; 

      for (var i = 0; i < items.Length; i++) { 
       // set your icons here, you could do some string comparison (check tab title or tab icon resource name) 
       // items[i].Image = 
       // items[i].SelectedImage = 
      } 
     } 
    } 

http://developer.xamarin.com/guides/cross-platform/xamarin-forms/custom-renderer/

Answer 3

Um Symbole zu verwenden, benötigen Sie eine plattform- spezifische Struktur. In Xamarin.Forms dafür zu arbeiten:

Icon = "youricon.png"; 

Sie benötigen:

• iOS: setzen Sie das Bild in /Resources/youricon.png
• Android: setzen Sie das Bild in/Ressourcen/Drawable/youricon.png
• Win Phone: Legen Sie das Bild in den Windows Phone-Anwendungsprojektstamm.