如何在Xamarin.Forms的TabbedPage的选项卡中放置按钮? [英] How can I place a button in the the tabs of a TabbedPage in Xamarin.Forms?

问题描述

我正在使用选项卡式页面和主详细信息页面在Xamarin.Forms应用中进行导航.当前，当从母版详细信息页面"中选择菜单选项时，将添加一个新的选项卡式页面，其中包含页面的内容.我想放置一个按钮以关闭选项卡的标题字段中的选项卡.这可能吗?目前，我仅在内容页面的选项卡中有一个按钮，但这并不理想.我希望它非常像网络浏览器.预先感谢！

I am using a Tabbed Page combined with a Master Detail Page for navigation in my Xamarin.Forms app. Currently when a menu option is selected from the Master Detail Page a new tabbed page is added with the page's content. I want to place a button to close the tab in the title field of the tab. Is this possible? Currently I just have a button within the content page for the tab, but this is less than ideal. I want it to be very web browser like. Thanks in advance!

我添加了图像.基本上，我只想在选项卡栏中每个项目的右侧添加一个"X"按钮，即可关闭该选项卡.就像在Chrome之类的东西中一样.

I have added the image. Basically, I just want to add an "X" button to the right of each item in the tab bar that would allow me to close that tab. Just like you would in Chrome or something.

推荐答案

您可以使用自定义渲染器在android平台中创建自定义TabbedPage.与Yuri不同，在android上我们可以向tab添加图像，实际上我们可以自定义tab的布局.

You can use custom renderer to create your custom TabbedPage in android platform. Disagree with Yuri, on android we can add an image to tab, in fact we can customize the layout of tab.

由于在您的图像中，我看到您没有为每个选项卡使用Icon属性，因此我将此图标用作关闭按钮. 但是请确保您也不能使用此功能，因为它是自定义的.

Since in your image, I saw you didn't use the Icon property for each tab, I use this icon as a close button. But sure you can also not use this, it is self customized.

在PCL中，创建一个MyTabbedPage:

In PCL, create a MyTabbedPage:

public class MyTabbedPage : TabbedPage
{
}

在Android平台中为其创建渲染器:

In Android platform create a renderer for it:

[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继承:

Code behind, don't forget to change MainPage to inherit from MyTabbedPage:

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

请注意此处，如果您更靠近我的代码，会发现我使用每个选项卡的Title来比较和删除匹配项，它将找到第一个匹配项标题并删除该标题的页面.如果您有多个标题相同的选项卡，则可能会导致问题.这是此演示的潜在错误，您可以尝试解决.

Please pay attention here, if you look closer to my code, you will find that I used Title of each tab for the comparing and removing the matching item, it will find the first matched title and remove the page of that title. This may cause a problem if you have several tabs with the same title. This is a potential bug of this demo, you may try to solve it.

更新:

忘记发布mytablayout的代码了，就是这样:

Forgot to post the code of mytablayout, here is it:

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

这篇关于如何在Xamarin.Forms的TabbedPage的选项卡中放置按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！