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

Posted 2023-03-25

【中文标题】如何在 Xamarin.Forms 的 TabbedPage 的选项卡中放置一个按钮？

【英文标题】：How can I place a button in the the tabs of a TabbedPage in Xamarin.Forms?

【发布时间】：2017-11-14 09:09:32

【问题描述】：

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

编辑：我添加了image。基本上，我只想在选项卡栏中每个项目的右侧添加一个“X”按钮，以便我关闭该选项卡。就像你在 Chrome 或其他东西中一样。

【问题讨论】：

你能把图片展示一下你想要做什么吗？

@YuriS 我刚刚添加了图片，

你展示了你所拥有的，但没有展示你想要的，对吗？

正确。我只想将 X 添加到我已有的右侧。你看不到它，但是有一个主详细信息页面可以从屏幕左侧扫出我所有的菜单选项。

在 android 选项卡上，您甚至无法将图像添加到选项卡，所以我可能是错的，但我认为这不可能是您想要做的。

【参考方案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_
    android:layout_>

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

  <ImageButton
    android:id="@+id/closebtn"
    android:layout_
    android:layout_
    android:scaleType="fitCenter"
    android:layout_alignParentRight="true"
    android:gravity="center" />
</RelativeLayout>

【讨论】：

对不起，你把 mytablayout 文件放在哪里了？它是 .axml 吗？

@user5661402，在android平台的layout文件夹中，没错，就是axml。

好的，所以我在 Android 平台的 Resources/layout/mytablayout.axml 中有该文件，但它一直说“资源不包含布局定义，并且没有扩展方法布局接受第一个可以找到资源类型的参数'如果我要求太多，真的很抱歉。

@user5661402，你有没有保存.axml文件，看起来资源没有生成，尝试清理并重建你的项目。

我修好了。有一条 using 语句导致提取了错误的资源。