为什么最新版本的约束布局在带有 CoordinatorLayout 的nestedScrollView 中不起作用答案

【问题标题】：Why latest version constraintLayout doesn't work in nestedScrollView with CoordinatorLayout为什么最新版本的约束布局在带有 CoordinatorLayout 的nestedScrollView 中不起作用
【发布时间】：2019-11-30 05:58:19
【问题描述】：

我使用 coordinatorlayout 和 collapsingToolbar 来实现滚动时的视差效果

和内容视图（关于页面的文本）底部的 collapsingToolbar 嵌套滚动视图。

我的问题是嵌套滚动视图中的约束布局似乎不完整

如果我在nestedScrollView 内容视图中使用LinearLayout，一切都会显示。但是我在 nestedScrollView 内容视图中使用 ConstraintLayout 似乎不完整，正如您在下面的代码中看到的那样

使用约束布局制作的内容视图

<androidx.constraintlayout.widget.ConstraintLayout 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/mainLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_anchor="@+id/appBarLayout"
        app:layout_anchorGravity="bottom">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:id="@+id/coordinatorLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/appBarLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                    android:id="@+id/collapsing_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:collapsedTitleTextAppearance="@style/PrimaryTextField.NewsDetails.Expanded"
                    app:contentScrim="@color/transparentBlack"
                    app:expandedTitleGravity="bottom"
                    app:expandedTitleMarginBottom="@dimen/input_fields_margin"
                    app:expandedTitleMarginTop="@dimen/shrine_toolbar_offset_top"
                    app:expandedTitleTextAppearance="@style/PrimaryTextField.NewsDetails.Expanded"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
                    app:titleEnabled="false">

                <androidx.appcompat.widget.AppCompatImageView
                        android:id="@+id/newsPhoto"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:adjustViewBounds="true"
                        android:scaleType="fitXY"
                        app:layout_collapseMode="parallax"
                        app:layout_collapseParallaxMultiplier="0.7" />

                <androidx.appcompat.widget.Toolbar
                        android:id="@+id/news_detail_toolbar"
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        android:background="@android:color/transparent"
                        android:theme="@style/ToolBarStyle.NewsDetails"
                        app:layout_collapseMode="pin"
                        app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
                        app:popupTheme="@style/AppTheme.PopupOverlay"
                        app:title=""
                        app:titleTextColor="@android:color/white" />
            </com.google.android.material.appbar.CollapsingToolbarLayout>
        </com.google.android.material.appbar.AppBarLayout>

        <androidx.core.widget.NestedScrollView
                android:id="@+id/scrollView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:fitsSystemWindows="true"
                android:orientation="vertical"
                android:scrollbarSize="5dp"
                android:scrollbars="vertical"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/contentLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:minHeight="400dp"
                    android:orientation="vertical">

                <androidx.appcompat.widget.AppCompatTextView
                        android:id="@+id/newsTitle"
                        style="@style/PrimaryTextFieldBold"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="@dimen/small_margin"
                        android:maxLines="3"
                        android:textSize="@dimen/primary_text_large"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        />

                <androidx.appcompat.widget.AppCompatTextView
                        android:id="@+id/newsDate"
                        style="@style/PrimaryTextFieldBold"
                        android:layout_width="wrap_content"
                        android:layout_margin="@dimen/small_margin"
                        android:textSize="@dimen/primary_text_medium"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toBottomOf="@id/newsTitle"
                        tools:text="08.08.2008 18:00" />

                <androidx.appcompat.widget.AppCompatTextView
                        android:id="@+id/photoOwner"
                        style="@style/PrimaryTextFieldBold"
                        android:layout_margin="@dimen/small_margin"
                        android:layout_weight="1"
                        android:textSize="@dimen/primary_text_medium"
                        app:layout_constraintBottom_toBottomOf="@id/newsDate"
                        app:layout_constraintStart_toEndOf="@id/newsDate"
                        app:layout_constraintTop_toTopOf="@id/newsDate"
                        tools:text="Daily News" />


                <androidx.appcompat.widget.AppCompatImageView
                        android:id="@+id/showComments"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="end"
                        android:padding="@dimen/small_margin"
                        android:src="@drawable/ic_comment"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintTop_toBottomOf="@id/newsTitle" />


                <androidx.appcompat.widget.AppCompatTextView
                        android:id="@+id/newsText"
                        style="@style/PrimaryTextField"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="@dimen/small_margin"
                        android:paddingBottom="32dp"
                        android:textSize="@dimen/primary_text_medium"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toBottomOf="@id/newsDate"
                />


            </androidx.constraintlayout.widget.ConstraintLayout>
        </androidx.core.widget.NestedScrollView>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

如果我使用了 Linearlayout，那就可以了。

<androidx.constraintlayout.widget.ConstraintLayout 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/mainLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:layout_anchor="@+id/appBarLayout"
            app:layout_anchorGravity="bottom">

        <androidx.coordinatorlayout.widget.CoordinatorLayout
                android:id="@+id/coordinatorLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

            <com.google.android.material.appbar.AppBarLayout
                    android:id="@+id/appBarLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent">

                <com.google.android.material.appbar.CollapsingToolbarLayout
                        android:id="@+id/collapsing_toolbar"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        app:collapsedTitleTextAppearance="@style/PrimaryTextField.NewsDetails.Expanded"
                        app:contentScrim="@color/transparentBlack"
                        app:expandedTitleGravity="bottom"
                        app:expandedTitleMarginBottom="@dimen/input_fields_margin"
                        app:expandedTitleMarginTop="@dimen/shrine_toolbar_offset_top"
                        app:expandedTitleTextAppearance="@style/PrimaryTextField.NewsDetails.Expanded"
                        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
                        app:titleEnabled="false">

                    <androidx.appcompat.widget.AppCompatImageView
                            android:id="@+id/newsPhoto"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:adjustViewBounds="true"
                            android:scaleType="fitXY"
                            app:layout_collapseMode="parallax"
                            app:layout_collapseParallaxMultiplier="0.7" />

                    <androidx.appcompat.widget.Toolbar
                            android:id="@+id/news_detail_toolbar"
                            android:layout_width="match_parent"
                            android:layout_height="?attr/actionBarSize"
                            android:background="@android:color/transparent"
                            android:theme="@style/ToolBarStyle.NewsDetails"
                            app:layout_collapseMode="pin"
                            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
                            app:popupTheme="@style/AppTheme.PopupOverlay"
                            app:title=""
                            app:titleTextColor="@android:color/white" />
                </com.google.android.material.appbar.CollapsingToolbarLayout>
            </com.google.android.material.appbar.AppBarLayout>

            <androidx.core.widget.NestedScrollView
                    android:id="@+id/scrollView"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:fitsSystemWindows="true"
                    android:orientation="vertical"
                    android:scrollbarSize="5dp"
                    android:scrollbars="vertical"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior">

                <LinearLayout
                        android:id="@+id/contentLayout"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:minHeight="400dp"
                        android:orientation="vertical">

                    <androidx.appcompat.widget.AppCompatTextView
                            android:id="@+id/newsTitle"
                            style="@style/PrimaryTextFieldBold"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_margin="@dimen/small_margin"
                            android:maxLines="3"
                            android:textSize="@dimen/primary_text_large"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toTopOf="parent" />

                    <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:orientation="horizontal">

                        <androidx.appcompat.widget.AppCompatTextView
                                android:id="@+id/newsDate"
                                style="@style/PrimaryTextFieldBold"
                                android:layout_width="wrap_content"
                                android:layout_margin="@dimen/small_margin"
                                android:textSize="@dimen/primary_text_medium"
                                tools:text="08.08.2008 18:00" />

                        <androidx.appcompat.widget.AppCompatTextView
                                android:id="@+id/photoOwner"
                                style="@style/PrimaryTextFieldBold"
                                android:layout_margin="@dimen/small_margin"
                                android:layout_weight="1"
                                android:textSize="@dimen/primary_text_medium"
                                tools:text="Daily News" />


                        <androidx.appcompat.widget.AppCompatImageView
                                android:id="@+id/showComments"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="end"
                                android:padding="@dimen/small_margin"
                                android:src="@drawable/ic_comment" />

                    </LinearLayout>


                    <androidx.appcompat.widget.AppCompatTextView
                            android:id="@+id/newsText"
                            style="@style/PrimaryTextField"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_margin="@dimen/small_margin"
                            android:paddingBottom="32dp"
                            android:textSize="@dimen/primary_text_medium"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/newsDate"/>

                </LinearLayout>
            </androidx.core.widget.NestedScrollView>
        </androidx.coordinatorlayout.widget.CoordinatorLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

约束布局版本“2.0.0-beta2”

【问题讨论】：

标签： android android-layout scrollview android-constraintlayout android-collapsingtoolbarlayout

【解决方案1】：

添加这个

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

【讨论】：

我想知道为什么它不起作用。我已经修复了线性布局。
尝试为nestedScrollView的高度设置match_parent

【解决方案2】：

如果您使用的是 Constraint"2.0.0-beta 2"，那么我建议您在示例中尝试 Motion Layout。 Motion Layout 是一个从 Constraint Layout 扩展而来的布局类。 Motion Layout 具有 Constraint Layout 的所有功能。

你可以参考这个链接来了解运动布局 https://blog.stylingandroid.com/motionlayout-collapsing-toolbar-part-1/

【讨论】：