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

Question

我在我的Xamarin.Forms應用程序中使用了選項卡式頁面和主詳細信息頁面相結合的導航。 當前，當從“母版詳細信息頁面”中選擇菜單選項時，將添加一個新的選項卡式頁面，其中包含頁面的內容。 我想放置一個按鈕以關閉選項卡的標題字段中的選項卡。 這可能嗎？ 目前，我僅在內容頁面的選項卡中有一個按鈕，但這並不理想。 我希望它非常像網絡瀏覽器。 提前致謝！

編輯：我已經添加了圖像 。 基本上，我只想在選項卡欄中每個項目的右側添加一個“ X”按鈕，即可關閉該選項卡。 就像您在Chrome瀏覽器中一樣。

Answer 1

您可以使用自定義渲染器在android平台中創建自定義TabbedPage 。 與Yuri不同，在android上我們可以向tab添加圖像，實際上我們可以自定義tab的布局。

由於在您的圖像中，我看到您沒有為每個選項卡使用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>