我正在使用CollapsingToolbarLayout,我试图让活动的标题很好地落入其工具栏,同时不与TabLayout重叠。
我已经搜索了几个小时,大部分答案都提示了工具栏的自定义高度,但这会导致标题进入工具栏的下半部分(android:gravity =&#34 ;底部&#34)。试图改变它的引力而没有运气。
有没有办法做到这一点?
这就是我现在所得到的:
我的XML布局如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="@bool/isFitSystemWindows">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/awesomeviewpager_appbar"
android:fitsSystemWindows="@bool/isFitSystemWindows"
app:layout_behavior="com.iac.awesomeviewpager.FlingBehavior"
app:theme="@style/ThemeOverlay.AppCompat.Light" >
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="@dimen/header_height"
android:fitsSystemWindows="@bool/isFitSystemWindows"
app:expandedTitleGravity="center"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<com.flaviofaria.kenburnsview.KenBurnsView
android:id="@+id/cover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/raton"
android:fitsSystemWindows="@bool/isFitSystemWindows"
android:scaleType="centerCrop"
android:src="@drawable/raton"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabMode="scrollable"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:tabBackground="@android:color/transparent"
app:tabIndicatorColor="@android:color/white"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
谢谢!
答案 0 :(得分:3)
我最近发现自己和你的情况类似。不幸的是,我找不到一个漂亮而干净的解决方案。但是,我确实找到了一个脏的XML,混合解决方案。
一个关键时刻是意识到CollapsingToolbarLayout
将从内部的第一个Toolbar
或app:toolbarId
属性定义的那个继承它的终端折叠高度。
一旦遇到这个障碍,对于如何使用边距和填充来调整最终结果,只是时间和耐心的问题。
以下解决方案中的关键组件是:
@dimen/height
维度@dimen/height_double
维度app:collapsedTitleGravity="top"
属性 @dimen/height
和@dimen/height_double
的实际值并不像它们之间的关系那么有趣;一个是另一个的两倍大。我想我在测试中分别使用了56dp
和112dp
。
我还为Toolbar
和TabLayout
添加了半透明背景颜色属性,这些属性将突出显示(在运行时)发生了什么。
希望您觉得这很有帮助。
<强> my_layout.xml 强>
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--
This one is interesting, especially the
"collapsedTitleGravity" and "expandedTitleMarginBottom"
attributes
-->
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleGravity="top"
app:expandedTitleMarginBottom="@dimen/height"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@drawable/pancake"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<!--
This one is extra interesting, given the relation
between its own height and the TabLayout height.
The layout margins and paddings are dependant on
text size etc.
-->
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="@dimen/height_double"
android:layout_gravity="top"
android:layout_marginBottom="14dp"
android:layout_marginTop="-14dp"
android:background="#33ff0000"
android:paddingTop="12dp"
app:layout_collapseMode="pin" />
<!--
And this one too, given how its "layout_height"
attribute relates to the Toolbar.
-->
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="@dimen/height"
android:layout_gravity="bottom"
android:background="#3300ff00"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
答案 1 :(得分:2)
如果您希望透明TabLayout
上面始终有visibe标题,请执行以下操作:
expandedTitleMarginBottom
添加到CollapsingToolbarLayout
layout_height
设置为TabLayout
作为常量值layout_marginBottom
添加到Toolbar
,其值与TabLayout
height <android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:expandedTitleMarginBottom="56dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<YourMagicViewWithBackgroundImageTextAndOtherStuff
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
答案 2 :(得分:1)
一个非常简单的工作解决方案,只需在ToolBar中添加它即可。如果您需要,我可以发布完整的xml代码
android:layout_marginBottom="43dp"
答案 3 :(得分:0)
我在布局上遇到了同样的问题。 我终于从下面得到了答案。
https://gist.github.com/iPaulPro/1468510f046cb10c51ea
参考评论:
&#34; sachins于2015年8月18日发表评论&#34;
The changes I made above are:
Move TabLayout out of CollapsingToolbarLayout and put it directly under CoordinatorLayout
Set these attributes inside TabLayout:
android:layout_gravity="bottom" - To make sure AppBarLayout doesn't overlap on TabLayout
app:layout_anchor="@+id/appbar" and app:layout_anchorGravity="bottom" - To make sure tabs appear below AppBarLayout
Also set android:layout_marginTop="?attr/actionBarSize" inside ViewPager to make sure TabLayout doesn't overlap any items in the list
添加评论,
不要忘记删除android:fitsSystemWindows =&#34; true&#34;来自TabLayout