Question

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

编辑：我添加了image。基本上，我只想在选项卡栏中的每个项目的右侧添加一个“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>

如何在Xamarin.Forms中的TabbedPage的选项卡中放置一个按钮？

1 个答案: