如何在Xamarin.Forms中的TabbedPage的選項卡中放置按鈕？

Question

我在Xamarin.Forms應用程序中使用了選項卡式頁面與主詳細信息頁面進行導航。目前，當從主詳細信息頁面中選擇菜單選項時，會在頁面內容中添加一個新的標籤頁面。我想放置一個按鈕關閉選項卡標題字段中的選項卡。這可能嗎？目前，我只在該標籤的內容頁面中有一個按鈕，但這不太理想。我希望它是非常web瀏覽器。提前致謝！編號：我已添加image。基本上，我只想在標籤欄中的每個項目的右側添加一個「X」按鈕，以允許我關閉該選項卡。就像你會在Chrome或其他東西。

Answer 1

您可以使用自定義渲染器在android平臺上創建自定義TabbedPage。不同意Yuri，在android上我們可以添加一個圖像到標籤，實際上我們可以自定義標籤的佈局。

既然在你的圖片中，我看到你沒有使用每個標籤的Icon屬性，我使用這個圖標作爲關閉按鈕。 但是當然你也可以不用這個，它是自定義的。

在PCL，創建一個MyTabbedPage：

public class MyTabbedPage : TabbedPage 
{ 
} 

在Android平臺爲它創建一個渲染：

[assembly: ExportRenderer(typeof(MyTabbedPage), typeof(MyTabbedPageRenderer))] 

namespace YOURNAMESPACE.Droid 
{ 
    public class MyTabbedPageRenderer : TabbedPageRenderer 
    { 
     private ObservableCollection<Xamarin.Forms.Element> children; 
     private IPageController controller; 

     protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon) 
     { 
      base.SetTabIcon(tab, icon); 

      tab.SetCustomView(Resource.Layout.mytablayout); 

      var imagebtn = tab.CustomView.FindViewById<ImageButton>(Resource.Id.closebtn); 
      imagebtn.SetBackgroundDrawable(tab.Icon); 

      var title = tab.CustomView.FindViewById<TextView>(Resource.Id.tabtitle); 
      title.Text = tab.Text; 

      imagebtn.Click += (sender, e) => 
      { 
       var closebtn = sender as ImageButton; 
       var parent = closebtn.Parent as Android.Widget.RelativeLayout; 
       var closingtitle = parent.FindViewById<TextView>(Resource.Id.tabtitle); 
       foreach (var child in children) 
       { 
        var page = child as ContentPage; 
        if (page.Title == closingtitle.Text) 
        { 
         children.Remove(child); 
         break; 
        } 
       } 
      }; 
     } 

     protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e) 
     { 
      base.OnElementChanged(e); 
      if (e.NewElement != null) 
      { 
       controller = Element as IPageController; 
       children = controller.InternalChildren; 
      } 
     } 
    } 
} 

使用方法如下：

<local:MyTabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:local="clr-namespace:TabbedPageForms" 
      x:Class="TabbedPageForms.MainPage"> 

    <local:TodayPage Title="Today" Icon="hamburger.jpg" /> 

    <local:SchedulePage Title="Schedule" Icon="hamburger.jpg" /> 
</local:MyTabbedPage> 

後面的代碼，不要忘記更換MainPage繼承MyTabbedPage ：

public partial class MainPage : MyTabbedPage 
{ 
    public MainPage() 
    { 
     InitializeComponent(); 
    } 
} 

請注意這裏，如果你仔細看我的代碼，你會發現，我所使用的每個標籤的Title的比較和刪除匹配的項目，它會找到第一個匹配的標題並刪除該標題的頁面。如果您有多個標題相同的標籤，這可能會導致問題。這是這個演示的潛在錯誤，你可以試着解決它。

更新：

忘了張貼mytablayout代碼，這裏是：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <TextView android:id="@+id/tabtitle" 
      android:layout_height="wrap_content" 
      android:layout_width="wrap_content" 
      android:layout_centerInParent="true" 
      android:gravity="center_horizontal" /> 

    <ImageButton 
    android:id="@+id/closebtn" 
    android:layout_height="30dp" 
    android:layout_width="30dp" 
    android:scaleType="fitCenter" 
    android:layout_alignParentRight="true" 
    android:gravity="center" /> 
</RelativeLayout>