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

问题描述

我正在使用标签页和主详细信息页在我的 Xamarin.Forms 应用程序中进行导航.当前，当从主详细信息页面中选择菜单选项时，会添加一个带有页面内容的新标签页.我想在选项卡的标题字段中放置一个按钮来关闭选项卡.这可能吗?目前，我在选项卡的内容页面中只有一个按钮，但这不太理想.我希望它非常像网络浏览器.提前致谢！

我添加了

请注意这里，如果你仔细看我的代码，你会发现我使用了每个标签的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"机器人:layout_centerInParent =真"android:gravity="center_horizo​​ntal"/><图像按钮android:id="@+id/closebtn"android:layout_height="30dp"android:layout_width="30dp"android:scaleType="fitCenter"android:layout_alignParentRight="true"机器人:重力=中心"/></RelativeLayout>

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!

Edit: 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.

解决方案

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.

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.

In PCL, create a MyTabbedPage:

public class MyTabbedPage : TabbedPage
{
}

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

Use it like this:

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

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

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

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.

Update:

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