折叠工具栏和嵌套滚动视图不能平滑滚动

时间:2015-09-17 13:06:41

标签: android android-support-library android-appbarlayout nestedscrollview android-collapsingtoolbarlayout

嵌套滚动视图在向下滚动时滚动顺畅,但向上滚动则显得迟钝。向上滚动时,工具栏(带有图像视图和framelayout)不会渲染其内容(保持空白)。我在折叠工具栏中尝试了每个标志。

<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:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">


<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    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="wrap_content"
        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="wrap_content"
            android:minHeight="100dp"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/pic"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.5"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/>

        <include
            android:id="@+id/framelayout"
            layout="@layout/header_layout"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            android:minHeight="100dp"/>


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


<!-- Your Scrollable View -->
<android.support.v4.widget.NestedScrollView
    android:id="@+id/nested"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="fill_vertical"

    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingTop="24dp">



      </LinearLayout>



</android.support.v4.widget.NestedScrollView>


<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="#da1b75"
    android:orientation="horizontal"
    android:textColor="#ffffff"
    android:theme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_anchor="@id/appbar"
    app:layout_collapseMode="pin"
    app:title="">



</android.support.v7.widget.Toolbar>

7 个答案:

答案 0 :(得分:7)

使嵌套滚动视图的直接子项可单击(如果您没有一个子元素,添加布局并将所有UI元素放入其中并使布局可单击)
android:clickable =“true”
我面临着类似的问题,这对我有用!

这是我一直在研究的代码 -

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="test.testrecycler.MaterialActivity"
>

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:theme="@style/AppTheme.AppBarOverlay"
    android:fitsSystemWindows="true"
    >
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:expandedTitleTextAppearance="@style/expandedappbar"
        app:collapsedTitleTextAppearance="@style/collapsedappbar"
        app:statusBarScrim="@color/colorPrimaryDark"
        >
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/sample"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin" />

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

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

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

以下是具有NestedScrollView的文件 content_material.xml 。它有一个可以点击的子元素(TextView)。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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:id="@+id/content_material"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="test.testrecycler.MaterialActivity"
tools:showIn="@layout/activity_material">

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:text="This is an association football club formed in 1983, based in the town of Dover, Kent, England. In the 1989–90 season Dover
    Athletic won the Southern League championship, but failed to gain promotion to the Football Conference as the club's ground did not meet
    the required standard. Three seasons later the team won the title again and this time gained promotion to the Conference, where they spent
    nine seasons before being relegated. The club was transferred to the Isthmian League Premier Division in 2004, but another poor season led
    the club to a further relegation. After three seasons in the Isthmian League Division One South, the club won the championship and promotion
    back to the Premier Division, and the following season won another championship and promotion to Conference South. In the 2013–14 season,
    Dover defeated Ebbsfleet United to return to the Conference Premier after a twelve-year absence. Nicknamed the Whites for their white shirts,
    they have played at the Crabble Athletic Ground since the club's formation. Their best performance in the FA Cup was reaching the third
    round proper in both the 2010–11 and 2014–15 seasons. (Full article...)
    Recently featured: Kalki Koechlin Rogue River (Oregon) Operation Ironside
    Archive By email More featured articles...
    his time gained promotion to the Conference, where they spent
    nine seasons before being relegated. The club was transferred to the Isthmian League Premier Division in 2004, but another poor season led
    the club to a further relegation. After three seasons in the Isthmian League Division One South, the club won the championship and promotion
    back to the Premier Division, and the following season won another championship and promotion to Conference South. In the 2013–14 season,
    Dover defeated Ebbsfleet United to return to the Conference Premier after a twelve-year absence. Nicknamed the Whites for their white shirts,
    they have played at the Crabble Athletic Ground since the club's formation. Their best performance in the FA Cup was reaching the third
    round proper in both the 2010–11 and 2014–15 seasons. (Full article...)" />
</android.support.v4.widget.NestedScrollView>

答案 1 :(得分:3)

更新:您只需右键单击ANDROID STUDIO中的图像并将图像转换为webp即可缩小图像大小。这将大大减少图像尺寸

非常简单。我挣扎了很多,最后我知道了我在ImageView的 src 中放置的高分辨率图像的问题。 解: 只需降低图像保持尺寸的分辨率即可。 (可能使用Photoshop)。

为我工作

答案 2 :(得分:0)

我想你忘记了关闭CoordinatorLayout的标签。此外,将工具栏放在CollapsingToolbarLayout

<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:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        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="wrap_content"
            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="wrap_content"
                android:minHeight="100dp"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/pic"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"
                app:layout_scrollFlags="scroll|exitUntilCollapsed" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#da1b75"
                android:orientation="horizontal"
                android:textColor="#ffffff"
                android:theme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_anchor="@id/appbar"
                app:layout_collapseMode="pin"
                app:title="Your title">

            </android.support.v7.widget.Toolbar>


<!-- What is this for?

            <include
                android:id="@+id/framelayout"
                layout="@layout/header_layout"
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
                android:minHeight="100dp"/>
-->

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


    <!-- Your Scrollable View -->
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nested"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="fill_vertical"

        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">



          </LinearLayout>



    </android.support.v4.widget.NestedScrollView>

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

答案 3 :(得分:0)

我遇到了包含coordinator layout的布局和包含RecyclerView的片段的类似问题。我在CollapsingToolbarLayout中添加了以下代码,以便滚动顺畅。

app:layout_scrollFlags="scroll|enterAlways"

答案 4 :(得分:0)

CoordinatorLayout和CollapsingToolbarLayout平滑滚动是一个错误,Google仍未修复。 :|

删除NestedScrollView。带有app:layout_behavior =“ @ string / appbar_scrolling_view_behavior”的RecyclerView”就足够了,并且可以解决。

您可以使用第三方库:https://github.com/henrytao-me/smooth-app-bar-layout

答案 5 :(得分:0)

如果清单文件中包含android:hardwareAccelerated =“ false”行,则将其删除。

答案 6 :(得分:0)

经过几次尝试,我找到了正确的解决方案,而不是一次,但是它可以解决您的问题,

只需尝试将CollapsingToolbarLayout layout_scrollInterpolator从decelerate_interpolator更改为线性控件,例如:linear_interpolator。

<com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingtoolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expandedTitleMargin="0dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:layout_scrollInterpolator="@android:anim/linear_interpolator">

希望对您有所帮助。

相关问题