ConstraintLayout中的NestedScrollView:根据内容来调整滚动视图的大小或允许其滚动。

问题描述 投票:0回答:1

我有一个布局,它有。

CoordinatorLayout (For Bottom Sheet animations)
.. MaterialCardView (Bottom Sheet)
.... ConstraintLayout
...... (header views)
...... NestedScrollView
........ ConstraintLayout
.......... (some other views which fit on some devices but are too large on smaller devices)

在一个大的设备上,整个布局是这样的 一旦底层的纸张被展开,就会变成这样large expanded

注意 "卷首 "和 "卷尾 "显示的是上、下层的 NestedScrollView

在大型设备上,它看起来正是我想要的样子。

  • 底部没有多余的空白
  • 一览无余

在一个较小的设备上,我的结果是 如图

从好的方面看,滚动视图能够正常滚动,但是似乎视图变得太大了,实际上已经无法适应屏幕,所以我无法看到滚动视图的所有内容。

我最终想要的是

  • 不显示额外的空白,如果整个滚动视图的内容 NestedScrollView 可映
  • 在较小的设备上,允许该区域滚动,使其全部可见。

当前布局XML。

<?xml version="1.0" encoding="utf-8"?>

<androidx.coordinatorlayout.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=".MainActivity">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/sheet"
        app:cardBackgroundColor="@android:color/darker_gray"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:behavior_peekHeight="200dp"
        app:cardPreventCornerOverlap="false"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
        tools:behavior_peekHeight="400dp">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/hello"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello"
                android:textSize="48sp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/world"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="World"
                android:textSize="48sp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@id/hello" />

            <androidx.core.widget.NestedScrollView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                app:layout_constraintVertical_bias="0"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/world">

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:id="@+id/top_scroll"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="top of scroll"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <View
                        android:id="@+id/one"
                        android:layout_width="200dp"
                        android:layout_height="150dp"
                        android:background="#caf"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintTop_toBottomOf="@id/top_scroll" />

                    <View
                        android:id="@+id/two"
                        android:layout_width="80dp"
                        android:layout_height="150dp"
                        android:background="#cab"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintTop_toBottomOf="@id/one" />

                    <View
                        android:id="@+id/three"
                        android:layout_width="300dp"
                        android:layout_height="200dp"
                        android:background="#ca4"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintTop_toBottomOf="@id/two" />

                    <TextView
                        android:id="@+id/bottom_scroll"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="bottom of scroll"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintTop_toBottomOf="@id/three" />


                </androidx.constraintlayout.widget.ConstraintLayout>

            </androidx.core.widget.NestedScrollView>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </com.google.android.material.card.MaterialCardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

我怀疑是 NestedScrollView 的约束,因为我必须添加一个偏向,以防止它与上面的视图重叠--好像它太大了(这反映在小设备的gif中)。

android android-constraintlayout
1个回答
0
投票

这是我想到的一个解决方案。

将头视图和 NestedScrollView 的线性布局中,并给出 NestedScrollView a权重为1。

最后的布局是这样的。

CoordinatorLayout (For Bottom Sheet animations)
.. MaterialCardView (Bottom Sheet)
.... LinearLayout
...... ConstraintLayout
........ (header views)
...... NestedScrollView
........ ConstraintLayout
.......... (some other views which fit on some devices but are too large on smaller devices)

而工作的XML:

<?xml version="1.0" encoding="utf-8"?>

<androidx.coordinatorlayout.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=".MainActivity">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:behavior_peekHeight="200dp"
        app:cardBackgroundColor="@android:color/darker_gray"
        app:cardPreventCornerOverlap="false"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
        tools:behavior_peekHeight="400dp">

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

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/hello"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Hello"
                    android:textSize="48sp"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@+id/world"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="World"
                    android:textSize="48sp"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/hello" />

            </androidx.constraintlayout.widget.ConstraintLayout>


            <androidx.core.widget.NestedScrollView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1">

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:id="@+id/top_scroll"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="top of scroll"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <View
                        android:id="@+id/one"
                        android:layout_width="200dp"
                        android:layout_height="150dp"
                        android:background="#caf"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintTop_toBottomOf="@id/top_scroll" />

                    <View
                        android:id="@+id/two"
                        android:layout_width="80dp"
                        android:layout_height="150dp"
                        android:background="#cab"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintTop_toBottomOf="@id/one" />

                    <View
                        android:id="@+id/three"
                        android:layout_width="300dp"
                        android:layout_height="200dp"
                        android:background="#ca4"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintTop_toBottomOf="@id/two" />

                    <TextView
                        android:id="@+id/bottom_scroll"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="bottom of scroll"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:layout_constraintTop_toBottomOf="@id/three" />


                </androidx.constraintlayout.widget.ConstraintLayout>

            </androidx.core.widget.NestedScrollView>
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

© www.soinside.com 2019 - 2024. All rights reserved.