xamarin - 如何使用TabbedPage.ToolbarPlacement ="Bottom"-Xamarin Forms实现TabLayout.IOnTabSelectedListener.OnTabUnselected？

Question

我最近刚刚使用android:TabbedPage.ToolbarPlacement="Bottom"。我曾经有以下代码:

void TabLayout.IOnTabSelectedListener.OnTabUnselected(TabLayout.Tab tab)
{
   var playPage = Element.CurrentPage as NavigationPage;
   if (!(playPage.RootPage is PhrasesFrame))
      return;

   var tabLayout = (TabLayout)ViewGroup.GetChildAt(1);
   var playTab = tabLayout.GetTabAt(4);
   tab.SetText("Play");
   tab.SetIcon(Resource.Drawable.ionicons_2_0_1_play_outline_25);
   App.pauseCard = true;
}

有人知道如何使用 ToolbarPlacement="Bottom" 实现此功能吗？我已经实现了 BottomNavigationView.IOnNavigationItemSelectedListener、BottomNavigationView.IOnNavigationItemReselectedListener，但找不到 UnselectedTab 的任何引用(如果有的话)。

编辑:

以前的自定义渲染器使用默认选项卡位置并实现 TabLayout:

namespace Japanese.Droid
{
    public class MyTabbedPageRenderer: TabbedPageRenderer, TabLayout.IOnTabSelectedListener
    {
        ViewPager viewPager;
        TabLayout tabLayout;
        bool setup;

        public MyTabbedPageRenderer(Context context): base(context){ }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            // More codes here
        }

        void TabLayout.IOnTabSelectedListener.OnTabReselected(TabLayout.Tab tab)
        {
            UpdateTab(tab);
        }

        void TabLayout.IOnTabSelectedListener.OnTabSelected(TabLayout.Tab tab)
        {
            UpdateTab(tab);
        }

        void TabLayout.IOnTabSelectedListener.OnTabUnselected(TabLayout.Tab tab)
        {
            var playPage = Element.CurrentPage as NavigationPage;
            if (!(playPage.RootPage is PhrasesFrame))
                return;

            var tabLayout = (TabLayout)ViewGroup.GetChildAt(1);
            var playTab = tabLayout.GetTabAt(4);
            tab.SetText("Play");
            tab.SetIcon(Resource.Drawable.ionicons_2_0_1_play_outline_25);
            App.pauseCard = true;
        }

        void UpdateTab(TabLayout.Tab tab) 
        {
            // To have the logic only on he tab on position 1
            if (tab == null || tab.Position != 4)
            {
                return;
            }

            if (tab.Text == "Play")
            {
                tab.SetText("Pause");
                tab.SetIcon(Resource.Drawable.ionicons_2_0_1_pause_outline_22);
                App.pauseCard = false;
            }
            else
            {
                tab.SetText("Play");
                tab.SetIcon(Resource.Drawable.ionicons_2_0_1_play_outline_25);
                App.pauseCard = true;
            }
        }
    }
}

当前使用ToolbarPlacement="Bottom"的自定义渲染器:

namespace Japanese.Droid
{
    public class BottomTabPageRenderer : TabbedPageRenderer, BottomNavigationView.IOnNavigationItemSelectedListener, BottomNavigationView.IOnNavigationItemReselectedListener
    {
        public BottomTabPageRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);

            // More codes here
        }

        bool BottomNavigationView.IOnNavigationItemSelectedListener.OnNavigationItemSelected(IMenuItem item)
        {
            base.OnNavigationItemSelected(item);

            UpdateTab(item)
        }

        void BottomNavigationView.IOnNavigationItemReselectedListener.OnNavigationItemReselected(IMenuItem item)
        {
            UpdateTab(item);
        }

        void UpdateTab(IMenuItem item)
        {
            var playTabId = 4;

            var title = item.TitleFormatted.ToString();
            if (item == null || item.ItemId != playTabId)
            {
                return;
            }

            if (item.ItemId == playTabId)
            {
                if (title == "Play")
                {
                    item.SetTitle("Pause");
                    item.SetIcon(Resource.Drawable.ionicons_2_0_1_pause_outline_22);
                    App.pauseCard = false;
                }
                else
                {
                    item.SetTitle("Play");
                    item.SetIcon(Resource.Drawable.ionicons_2_0_1_play_outline_25);
                    App.pauseCard = true;
                }
            }

        }

    }
}

所以现在我的问题是我不知道如何在新的自定义渲染器中实现 TabLayout.IOnTabSelectedListener.OnTabUnselected。

Answer 1

OnTabReselected 没有官方内容事件TabbedPage的底部导航或 BottomNavigationView因为它不使用 TabLayout.Tab作为一个开始。 TabbedPageRenderer 的许多重写方法不被称为 SetTabIcon 。如果您使用IOnTabSelectedListener接口(interface)(作为代码的第一部分)您可以使用三种方法。

void OnTabReselected(Tab tab);
void OnTabSelected(Tab tab);          
void OnTabUnselected(Tab tab);

但是说到BottomNavigationView接口(interface)只有两个方法

void OnNavigationItemReselected
bool OnNavigationItemSelected

所以我们没有内置 OnTabUnselected方法。这里您需要编写自定义代码来制作取消选择的事件。

我已经尝试过这段代码，没有使用自定义渲染器，使用 4 个选项卡页面和 MailPage.xaml 文件中编写的选项卡式 xaml。首先声明List<string>在App.xaml.cs要存储的文件 Title所有标签页

public static List<string> Titles {get;set;}

在上面的列表中添加标签页标题 MainPage.xaml.cs文件的 OnAppearing方法

protected override void OnAppearing()
{
    for (int i = 0; i < this.Children.Count; i++)
    {
        App.Titles.Add(this.Children[i].Title);
    }
}

现在转到您的MyTabbedPage共享项目中可用的类。

public class MyTabbedPage : Xamarin.Forms.TabbedPage
{
    string selectedTab = string.Empty;
    string unSelectedTab = string.Empty;
    bool isValid;

    public MyTabbedPage()
    {
        On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

        this.CurrentPageChanged += delegate
        {
            unSelectedTab = selectedTab;
            selectedTab = CurrentPage.Title;
            if (App.Titles != null)
                isValid = true;
            else
                App.Titles = new List<string>();
            if (isValid)
            {
                MoveTitles(selectedTab);
               //Pass 0 index for tab selected & 1 for tab unselected
                var unSelecteTabTitle = App.Titles[1];
               //TabEvents(1); here you know which tab unseleted call any method
            }
        };
    }

    //This method is for to moving selected title on top of App.Titles list & unseleted tab title automatic shifts at index 1
    void MoveTitles(string selected)
    {
        var holdTitles = App.Titles;
        if (holdTitles.Count > 0)
        {
            int indexSel = holdTitles.FindIndex(x => x.StartsWith(selected));
            holdTitles.RemoveAt(indexSel);
            holdTitles.Insert(0, selected);
        }
        App.Titles = holdTitles;
    }    

}

或者你可以像这样制作 swith case

void TabEvents(int index)
{
  switch (index)
  {
    case 0:
        //Tab selected
        break;
    case 1:
         //Tab unselected
        break;
  }
}

我应该提到的几件事MainPage.xaml.cs文件继承MyTabbedPage

public partial class MainPage : MyTabbedPage

MainPage.xaml 文件的结构

<?xml version="1.0" encoding="utf-8" ?>
<local:MyTabbedPage   

    <TabbedPage.Children>

        <NavigationPage Title="Browse">     
        </NavigationPage>   

    </TabbedPage.Children>
</local:MyTabbedPage>

答案似乎很长，但希望对你有帮助。