【问题标题】:Toolbar's gravity (or positioning) not working properly in CollapsingToolbarLayout工具栏的重力(或定位)在 CollapsingToolbarLayout 中无法正常工作
【发布时间】:2016-09-04 18:16:02
【问题描述】:

我有一个带有 ToolbarTablLayout 的布局,在 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>

我想把工具栏放在它的位置,在非折叠状态的“后退”按钮旁边。如果可以的话,请帮忙。

【问题讨论】:

    标签: android android-layout android-toolbar android-collapsingtoolbarlayout


    【解决方案1】:

    这是一个我也遇到过的已知问题。您需要稍微“破解”它。
    如果您不需要标题从大到小的动画,只需输入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 = "";
    }
    

    它在两个标题之间翻转...

    【讨论】:

    • 你能告诉我具体哪一部分是解决方案吗?你的版面太大了。
    • @AdamVarhegyi 对不起,我犯了一个错误。答案不在那个帖子里。我用我的解决方案编辑了上面的答案。随时提问。
    • 没有原生解决方案?从xml或类似的东西?顺便说一句,它正在处理这个问题,但快速的标题变化有点奇怪。
    • @AdamVarhegyi 我不知道。这是一个错误。玩弄数字,也许它看起来不那么奇怪。如果它有效,请点赞并接受,以帮助他人。谢谢!
    【解决方案2】:

    我找到了一个更简单的解决方案,没有任何黑客攻击,并且使用纯 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>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-12-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多