工具栏的重力(或定位)在 CollapsingToolbarLayout 中无法正常工作
Toolbar's gravity (or positioning) not working properly in CollapsingToolbarLayout
我有一个带有 Toolbar 和 TablLayout 的布局,在 的帮助下可以看到下面的一些不错的折叠效果CollapsingToolbarLayout:
第一张图还行。这就是我想要的行为。
但是折叠状态下工具栏的位置不对:
如您所见,工具栏位于其默认位置下方,无论我将其重力设置为顶部。
这是完整的布局:
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_layout"
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="215dp"
app:expandedTitleMarginBottom="56dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/big_header"
android:fitsSystemWindows="true"
android:scaleType="centerInside"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="13dp"
/>
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
style="@style/CustomTabLayout"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
我想将工具栏放在它的位置,在非折叠状态下 "back" 按钮旁边。如果可以,请帮忙。
这是一个我也遇到过的已知问题。你需要 "hack it" 一点。
如果您不需要标题从大到小的动画效果,只需输入 collapsingToolbar.titleEnabled = false
,然后使用您的工具栏标题。
如果你想让你的标题在折叠工具栏中从大到小动画,你可以这样破解:
添加一个 appBarLayout OffsetChanged 侦听器并将此代码放入其中:
if (Math.Abs(e.verticalOffset) >= appBarLayout.totalScrollRange - 35) //Play with the number, and you should probably use dp instead of a hardcoded pixel number.
{
collapsingToolbar.titleEnabled = false;
SupportActionBar.title = "YourTitle";
}
else
{
collapsingToolbar.titleEnabled = true;
SupportActionBar.title = "";
}
它在两个标题之间翻转...
我找到了一个更简单的解决方案,没有任何黑客攻击,而且是纯粹的 xml:
- 在
CollapsingToolbarLayout
中使用 expandedTitleMarginBottom
以避免展开的标题重叠 TabLayout
- 将
layout_height
设置为TabLayout
作为常数值
- 将
layout_marginBottom
添加到 Toolbar
,其值与 TabLayout
layout_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="215dp"
app:expandedTitleMarginBottom="78dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/big_header"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?attr/actionBarSize"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
我有一个带有 Toolbar 和 TablLayout 的布局,在 的帮助下可以看到下面的一些不错的折叠效果CollapsingToolbarLayout:
第一张图还行。这就是我想要的行为。
但是折叠状态下工具栏的位置不对:
如您所见,工具栏位于其默认位置下方,无论我将其重力设置为顶部。
这是完整的布局:
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_layout"
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="215dp"
app:expandedTitleMarginBottom="56dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/big_header"
android:fitsSystemWindows="true"
android:scaleType="centerInside"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="13dp"
/>
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
style="@style/CustomTabLayout"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
我想将工具栏放在它的位置,在非折叠状态下 "back" 按钮旁边。如果可以,请帮忙。
这是一个我也遇到过的已知问题。你需要 "hack it" 一点。
如果您不需要标题从大到小的动画效果,只需输入 collapsingToolbar.titleEnabled = false
,然后使用您的工具栏标题。
如果你想让你的标题在折叠工具栏中从大到小动画,你可以这样破解:
添加一个 appBarLayout OffsetChanged 侦听器并将此代码放入其中:
if (Math.Abs(e.verticalOffset) >= appBarLayout.totalScrollRange - 35) //Play with the number, and you should probably use dp instead of a hardcoded pixel number.
{
collapsingToolbar.titleEnabled = false;
SupportActionBar.title = "YourTitle";
}
else
{
collapsingToolbar.titleEnabled = true;
SupportActionBar.title = "";
}
它在两个标题之间翻转...
我找到了一个更简单的解决方案,没有任何黑客攻击,而且是纯粹的 xml:
- 在
CollapsingToolbarLayout
中使用expandedTitleMarginBottom
以避免展开的标题重叠TabLayout
- 将
layout_height
设置为TabLayout
作为常数值 - 将
layout_marginBottom
添加到Toolbar
,其值与TabLayout
layout_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="215dp"
app:expandedTitleMarginBottom="78dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/big_header"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?attr/actionBarSize"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>