CollapsingToolbarLayout和TabLayout [英] CollapsingToolbarLayout and TabLayout
问题描述
我试图创建一个具有CollapsingToolbarLayout与在cheesesquare例如的图像和工具栏(如在CheeseDetailActivity这里活动一>),还具有下面的选项卡的布局。
I'm trying to create an activity that has a CollapsingToolbarLayout with an image and toolbar (like in the CheeseDetailActivity in the cheesesquare example here), that also has a tab layout below.
任何想法如何实现它?
当试图将其添加到CollapsingToolbarLayout或AppBarLayout,其结果是,该标签布局是在屏幕的顶部
When trying to add it to the CollapsingToolbarLayout or the AppBarLayout, the result is that the tab layout is in the top of the screen
推荐答案
试试这个结构:
<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
的TabLayout的是底
The important attribute is the layout_gravity
of the TabLayout to be bottom.
有关API 21和下我遇到的TabLayout消失的问题。如果你面临同样的问题,为TabLayout(原料药超过21下)使用:
For API 21 and lower I encountered the issue of the TabLayout disappearing. If you face the same problem, for the TabLayout (for APIs lower than 21) use this:
<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
属性取决于你给你的应用程序栏的大小。您将在dps的输入值,并在几分钟内,你会打钉。
You have to experiment with the translationY
attribute depending on the size you gave your app bar. You will enter a value in dps and in a few minutes you will nail it.
希望它能对你的作品,因为它为我工作!
Hope it works for you as it worked for me!
这篇关于CollapsingToolbarLayout和TabLayout的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!