CollapsingToolbarLayout和TabLayout

我试图创build一个带有图像和工具栏的CollapsingToolbarLayout的活动(就像在这里的cheesesquare示例中的CheeseDetailActivity一样),下面也有一个选项卡布局。

任何想法如何实施?

尝试将其添加到CollapsingToolbarLayout或AppBarLayout时,结果是选项卡布局位于屏幕的顶部

Solutions Collecting From Web of "CollapsingToolbarLayout和TabLayout"

试试这个结构:

<android.support.design.widget.CoordinatorLayout 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.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="SPECIFIC HEIGHT HERE!" android:fitsSystemWindows="true" android:theme="ADD A STYLE HERE IF YOU WANT"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" > <ImageView android:id="@+id/backdrop" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:scaleType="centerCrop" android:src="YOUR SOURCE" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="YOUR MULTIPLIER" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="YOUR POPUP THEME"> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:tabGravity="YOUR TAB GRAVITY" app:tabIndicatorColor="YOUR TAB INDICATOR COLOR" app:tabMode="YOUR TAB MODE"> </android.support.design.widget.TabLayout> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout> 

重要的属性是layout_gravity的layout_gravity为底部

对于API 21和更低版本,我遇到了TabLayout消失的问题。 如果你面对同样的问题,对于TabLayout(对于低于21的API)使用这个:

 <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:translationY="YOU HAVE TO EXPERIMENT WITH THIS ATTRIBUTE - (in dps)" app:tabGravity="YOUR TAB GRAVITY" app:tabIndicatorColor="YOUR TAB INDICATOR COLOR" app:tabMode="YOUR TAB MODE" > 

您必须根据您的应用程序栏的大小尝试translationY属性。 您将以dpsinput一个值,几分钟后您将会input一个值。

希望它适合你,因为它为我工作!

另请参阅本示例解决相同的问题。

testingAPI 14-23。 工作没有任何问题。

 <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:id="@+id/drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".MainActivity"> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="230dp" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/header" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/header" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/anim_toolbar" android:layout_width="match_parent" android:layout_height="100dp" android:gravity="top" android:minHeight="?attr/actionBarSize" app:layout_collapseMode="pin" app:titleMarginTop="15dp" /> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_gravity="bottom" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:headerLayout="@layout/header" /> 

尝试这个…