防止 TabLayout 中的选项卡显示在 Xamarin 中应用程序的工具栏前面

Question

总结

我需要在 App 的工具栏正下方有 3 个选项卡，最好没有分隔选项卡和工具栏的线。但是它们显示在吧台前面，几乎完全隐藏了它。

上下文

我正在开发一个 Android 应用程序，其中有一个 DrawerLayout/NavigationView 从侧面打开，您可以在页面之间导航，其中一个页面顶部包含几个选项卡，就在工具栏下方。

我试过将 TabLayout 放入页面，但选项卡总是在工具栏的后面或前面。

将 TabLayout 放入工具栏所在的 AppBarLayout 似乎效果不佳，选项卡正确显示在工具栏下方，但该选项卡的内容也显示在工具栏内。

main.xml

中的工具栏和 FragmentContainer

<android.support.design.widget.AppBarLayout
android:id="@+id/toolbar_layout" 
android:layout_width="match_parent" 
android:layout_height="wrap_content"> 

<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

</android.support.design.widget.AppBarLayout>

<androidx.appcompat.widget.LinearLayoutCompat  
android:id="@+id/main_fragment_container"  
android:layout_height="match_parent"  
android:layout_width="match_parent"/>

page1.xml

中的示例 TabLayout

<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">  

    <com.google.android.material.tabs.TabLayout
    android:id="@+id/home_content_tab_layout"
    android:layout_gravity="top"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:showIn="@layout/app_bar_main">

        <com.google.android.material.tabs.TabItem
        android:text="News"/>

        <com.google.android.material.tabs.TabItem
        android:text="NoNews"/>

        <com.google.android.material.tabs.TabItem
        android:text="Dreams"/>

    </com.google.android.material.tabs.TabLayout>

</androidx.constraintlayout.widget.ConstraintLayout >

Answer 1

一直在四处寻找解决我的问题的方法，偶然发现了对类似问题的回答。

我移动了 Toolbar、Tablayout（其可见性设置为 "gone"）和 Fragment Container 变成它自己的 xml 称为 app_bar_main.

然后我将它包含在我的 Main Layout:

<include
    layout="@layout/app_bar_main" 
    android:layout_width="wrap_content" 
    android:layout_height="match_parent" />

应该显示选项卡的片段实现了以下覆盖：

    public override void OnViewCreated(View view, Bundle savedInstanceState)
    {
        viewPager = view.FindViewById<ViewPager>(Resource.Id.home_content_pager);
        viewPager.Adapter = new HomeAdapter(ChildFragmentManager);

        tabLayout = Activity.FindViewById<TabLayout>(Resource.Id.tablayout);
        tabLayout.Visibility = ViewStates.Visible;
        tabLayout.SetupWithViewPager(viewPager);

        base.OnViewCreated(view, savedInstanceState);
    }


    public override void OnDestroyView()
    {
        tabLayout.Visibility = ViewStates.Gone;
        base.OnDestroyView();
    }

OnDestroyView 重写将 TabLayout 的可见性设置为“消失”，因此所有其他 Fragment 都不会显示选项卡。

这样，Tablayout 存在于所有 Fragment 中，并且可以显示和填充所选的选项卡，并在不需要时隐藏。

我正在使用 com.google.android.material 和 AndroidX NuGet 包，对 Xamarin.Android 还是个新手，但我希望这对遇到类似问题的人有所帮助。

防止 TabLayout 中的选项卡显示在 Xamarin 中应用程序的工具栏前面

Preventing Tabs from TabLayout to show in front of the app's Toolbar in Xamarin

tabs

toolbar

xamarin.android

xamarin

androidx

总结

上下文

main.xml

page1.xml