带有折叠工具栏的片段中的Android选项卡 [英] Android tabs in fragment with collapsing toolbar
问题描述
我的应用程序中有一个折叠的Toolbar.
我使用NavigationDrawer并在具有不同片段的项目之间进行切换，同时替换FrameLayout并将工具栏保留在整个应用程序中.
I have a Collapsing Toolbar in my app.
I use a NavigationDrawer and switch between the items with different fragments, while replacing a FrameLayout, and leaving the Toolbar across the app.
其中一个片段具有选项卡布局.
当我显示该片段时，该片段显示在Toolbar下方，并且工具栏阴影将其重叠.
我希望它与工具栏处于同一级别，并且外观和行为类似于在同一AppBarLayout中.
另外，当工具栏展开时，我想使选项卡透明.
One of the fragments has a tab layout.
When I show that fragment it is shown underneath the Toolbar, with the Toolbar shadow overlapping it.
I want it to be on the same level with the Toolbar, and to look and act like it is in the same AppBarLayout.
Also, I want to make the tabs transparent when the Toolbar is expanded.
如何重新组织我的布局，这样才能正常工作?
How do I reorganize my layouts so that this will work?
这是我的Xml:
主要Xml:
<android.support.v4.widget.DrawerLayout 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"
android:layout_gravity="right"
android:clickable="true"
android:layoutDirection="rtl"
android:fitsSystemWindows="true"
android:id="@+id/drawer_layout">
<android.support.design.widget.CoordinatorLayout
android:id="@+id/mainCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="rtl"
android:background="#EEEEEE"
android:clickable="true">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="@+id/toolbar_layout">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
app:collapsedTitleGravity="right"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance"
app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp">
<ImageView
android:id="@+id/headerImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:src="@drawable/soldier" />
<View
android:layout_width="match_parent"
android:layout_height="88dp"
android:background="@drawable/scrim_top"
app:layout_collapseMode="pin" />
<View
android:layout_width="match_parent"
android:layout_height="88dp"
android:layout_gravity="bottom"
android:layout_alignBottom="@+id/headerImage"
android:background="@drawable/scrim_bottom" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/WhiteTitle"
app:layout_scrollFlags="scroll|enterAlways"
app:titleTextColor="@color/White"
android:fitsSystemWindows="true"
android:layout_gravity="right"
android:layoutDirection="rtl"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/content_frame"
android:animateLayoutChanges="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:fillViewport="true" />
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/mainFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_gravity="bottom|end"
android:layout_marginLeft="16dp"
android:layout_marginBottom="16dp"
android:layout_marginTop="5dp"
android:elevation="8dp"
app:pressedTranslationZ="12dp"
app:backgroundTint="?android:colorAccent"
android:src="@drawable/ic_perm_phone_msg_white_24px" />
<LinearLayout
android:id="@+id/miniFabFrame"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:layout_alignParentLeft="true"
android:layout_gravity="bottom|end"
android:layout_marginLeft="20dp"
android:layout_marginBottom="80dp"
android:padding="0dp">
<android.support.design.widget.FloatingActionButton
android:id="@+id/messageFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:elevation="8dp"
android:layout_marginTop="5dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
app:pressedTranslationZ="12dp"
app:backgroundTint="?android:colorPrimary"
app:fabSize="mini"
android:src="@drawable/ic_textSMS_white_24px" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/callFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginTop="5dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:elevation="8dp"
app:pressedTranslationZ="12dp"
app:backgroundTint="?android:colorPrimary"
app:fabSize="mini"
android:src="@drawable/ic_call_white_24px" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:id="@+id/nav_view"
android:layoutDirection="rtl"
app:headerLayout="@layout/header"
app:menu="@menu/nav_menu" />
带有标签布局的片段:
<LinearLayout 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:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="true"
android:id="@+id/halachot_layout"
android:layoutDirection="ltr"
android:animateLayoutChanges="true">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:elevation="0dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.refractored.PagerSlidingTabStrip
android:id="@+id/halachotTabs"
android:layout_below="@id/halachot_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@android:color/transparent"
android:fitsSystemWindows="true"
pstsPaddingMiddle="false"
app:pstsShouldExpand="true" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/halachotPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
任何指导将不胜感激.
Any guidance will be appreciated.
谢谢.
推荐答案
谢谢大家的所有投入.
我最终要做的是这样:
Thank you everyone for all the input.
What I ended up doing, is this:
主要Xml:
<android.support.v4.widget.DrawerLayout 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"
android:layout_gravity="right"
android:clickable="true"
android:layoutDirection="rtl"
android:fitsSystemWindows="true"
android:id="@+id/drawer_layout">
<android.support.design.widget.CoordinatorLayout
android:id="@+id/mainCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="rtl"
android:background="#EEEEEE"
android:clickable="true">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="@+id/toolbar_layout">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:collapsedTitleGravity="right"
app:expandedTitleGravity="bottom|right"
app:expandedTitleMarginBottom="50dp"
app:collapsedTitleTextAppearance="@style/CollapsedTitleTextAppearance"
app:expandedTitleTextAppearance="@style/ExpandedTitleTextAppearance"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp">
<ImageView
android:id="@+id/headerImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:background="@drawable/soldier" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="top"
app:titleTextColor="@color/White"
android:fitsSystemWindows="true"
android:layout_gravity="right"
android:layoutDirection="rtl"
app:layout_collapseMode="pin"
android:minHeight="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabIndicatorHeight="3dp"
android:layoutDirection="ltr"
app:tabIndicatorColor="@android:color/white"
app:tabSelectedTextColor="@color/White"
app:tabTextColor="@color/Black"
app:tabMode="fixed"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/content_frame"
android:animateLayoutChanges="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:fillViewport="true" />
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:id="@+id/nav_view"
android:layoutDirection="rtl"
app:headerLayout="@layout/header"
app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>
然后，当我切换片段时，仅在我想要它们的片段上显示选项卡，并在不希望它们显示时隐藏它们:
Then, when I switch the fragments, I show the tabs only on the fragment that I want them in, and hide them when I don't want them to show:
toolbar_layout.SetExpanded(true);
tabs.Visibility = ViewStates.Gone;
当我想向他们展示时:
toolbar_layout.SetExpanded(false,false);
tabs.Visibility = ViewStates.Visible;
尽管我没有使它们透明，但是我决定在显示它们时只折叠工具栏，并禁止使用选项卡在片段上展开它.
也许不是最好的解决方案，但对我来说效果很好.
Although I don't get them transparent, but I decided to just collapse the toolbar when I show them, and disable expanding it on the fragment with the tabs.
Maybe not the best solution, but it works pretty well for me.
这些链接确实对我有帮助:
- http://blog.iamsuleiman.com/parallax-scrolling- tabs-design-support-library/
- http://blog.iamsuleiman.com/Material-design-tabs-with-android-design-support-library/
-如何在CollapsingToolbarLayout内部使用带有工具栏的TabLayout?
- http://manishkpr.webheavens.com/android-material- design-tabs-collapsible-example/
-在子Recyclerview android中禁用滚动-如何在带有标签的片段(还包含一个recyclerview).
These links really helped me:
- http://blog.iamsuleiman.com/parallax-scrolling-tabs-design-support-library/
- http://blog.iamsuleiman.com/material-design-tabs-with-android-design-support-library/
- How to use a TabLayout with Toolbar inside CollapsingToolbarLayout?
- http://manishkpr.webheavens.com/android-material-design-tabs-collapsible-example/
- Disable Scrolling in child Recyclerview android - How to disable expanding the toolbar on the fragment with the tabs (that also contains a recyclerview).
在此处查看其外观: https://youtu.be/y2xLVSQ_NGM
See what it looks like here: https://youtu.be/y2xLVSQ_NGM
这可能不是最佳解决方案，但我想要一种看起来更干净的方法.
谢谢大家的帮助！
It may not be the best solution, but I wanted a cleaner way that looks good.
Thank you all for your help!
这篇关于带有折叠工具栏的片段中的Android选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
