大工具栏导致奇怪的滚动行为

Posted

技术标签:

【中文标题】大工具栏导致奇怪的滚动行为【英文标题】:Large Toolbar causes odd scrolling behavior 【发布时间】:2015-12-10 19:28:12 【问题描述】:

我有一个Toolbar,其中包含比典型工具栏(通常只有标题)更多的内容。我的工具栏有一张图片和一些文字,工具栏的整个高度最终在 250dp 左右。

但是,由于工具栏标题太大,它在屏幕上留下的滚动空间很小。在工具栏下方,我有一个RecyclerView,我在其中显示主要内容。只有屏幕的RecyclerView 部分似乎是可滚动的。

当我向上或向下滚动时(当工具栏在屏幕上或即将在屏幕上时),由于工具栏的大小,它会导致一些奇怪的滚动行为。滚动有时会停止,需要我以较小的增量滚动(或在整个屏幕上滑动)。

如何避免这种奇怪的滚动行为?有没有更好的方法来实现像我 (250dp) 这样的大型工具栏?

这是我目前的Activity

<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_
    android:layout_>

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_
        android:layout_
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:elevation="0dp">

        <include
            layout="@layout/toolbar"
            />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_
            android:layout_
            app:tabTextAppearance="@style/TabLayout"
            app:tabSelectedTextColor="@color/white"
            />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

</android.support.design.widget.CoordinatorLayout>

这里是toolbar.xml(工具栏本身):

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_
    android:layout_>

    <LinearLayout
        android:id="@+id/header"
        android:layout_
        android:layout_
        android:orientation="vertical"
        android:layout_gravity="center_horizontal"
        android:background="@color/green">

            <LinearLayout
                android:orientation="horizontal"
                android:layout_
                android:layout_ >

                <ImageView
                    android:layout_
                    android:layout_
                    android:background="@drawable/ic_image"
                    android:adjustViewBounds="true"
                    android:scaleType="centerCrop"
                    android:layout_gravity="center_vertical" />

                <TextView
                    android:layout_
                    android:layout_
                    android:text="Hey!"
                    android:textColor="@color/white"
                    android:textSize="24sp"
                    android:layout_gravity="center_vertical" />

            </LinearLayout>

    </LinearLayout>

</LinearLayout>

【问题讨论】:

【参考方案1】:

我敢打赌,滚动不起作用,因为您实际上没有 工具栏。你的CoordinatorLayout真的没有什么可协调的。

您的toolbar.xml 应该有一个android.support.design.widget.CollapsingToolbarLayout 包装一个android.support.v7.widget.Toolbar

看看chrisbanes cheesesquare Material Design demo on Github中的布局

【讨论】:

以上是关于大工具栏导致奇怪的滚动行为的主要内容,如果未能解决你的问题,请参考以下文章

最新包含 Blink 的浏览器(如 Chrome、Opera)中的奇怪滚动行为

奇怪的缩放和尺寸行为与设备工具栏和 chrome 和边缘的响应式布局

具有图像叠加中心和滚动行为的工具栏

具有水平滚动的嵌套 RecyclerView 中的滚动行为

React 中的 SVG 平移会导致奇怪的行为

UITableViewCell 内的 UICollectionView 滚动行为