ScrollView 超出了 LinearLayout 的界限答案

【问题标题】：ScrollView exceeding bounds of LinearLayoutScrollView 超出了 LinearLayout 的界限
【发布时间】：2022-12-12 06:22:20
【问题描述】：

Udacity 的课程 Developing Android Apps with Kotlin，布局部分，大致为 activity_main.xml 提供：

<?xml version="1.0" encoding="utf-8"?>
<android.widget.LinearLayout 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="wrap_content"
    android:orientation="vertical"
    android:paddingStart="@dimen/padding"
    android:paddingEnd="@dimen/padding">

    <TextView
        android:id="@+id/textView"
        style="@style/NameStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/name_text" />

    <ImageView
        android:id="@+id/star_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@string/star_description"
        app:srcCompat="@android:drawable/btn_star_big_on"
        tools:ignore="ImageContrastCheck" />

    <ScrollView
        android:id="@+id/bio_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/bio_text"
            style="@style/NameStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:lineSpacingMultiplier="1.2"
            android:text="@string/bio" />
    </ScrollView>
</android.widget.LinearLayout>

目标是显示名称、名称下方的星号以及下方的可滚动描述。当文本足够短以适合无需滚动时，这就是外观：

但是当文本足够长需要滚动时，可滚动区域似乎将其他组件移出了视图：

这门课程有点老了，所以也许有些东西已经改变了，或者我应用的东西不正确。需要更改什么才能使 ScrollView 保持在其范围内？

【问题讨论】：

如果我没有弄错的话，你是说名称和图像也会随着可滚动内容一起滚动，对吗？
@Bhavnik 它似乎没有滚动-上下滚动文本时根本不显示名称。星不动。

标签： android android-layout

【解决方案1】：

尝试使用此布局，您可能会根据需要找到它。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="@dimen/_20sdp"
        android:text="Your name here" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/star_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="@id/textView"
        app:layout_constraintEnd_toEndOf="@id/textView"
        app:layout_constraintTop_toBottomOf="@id/textView"
        app:srcCompat="@android:drawable/btn_star_big_on" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/star_image"
        android:layout_marginTop="@dimen/_20sdp">

        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.appcompat.widget.AppCompatTextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:lineSpacingMultiplier="2"
                android:text="set your text here" />
        </androidx.appcompat.widget.LinearLayoutCompat>

    </ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

@Don，试试上面实现的代码，希望这是你要找的。

【解决方案2】：

Copy and paste this
   <?xml version="1.0" encoding="utf-8"?>
        <android.widget.LinearLayout 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="wrap_content"
            android:orientation="vertical"
            android:paddingStart="@dimen/padding"
            android:paddingEnd="@dimen/padding">
        
           
        
            <ScrollView
                android:id="@+id/bio_scroll"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
       < RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         <TextView
                android:id="@+id/textView"
                style="@style/NameStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/name_text" />
        
            <ImageView
                android:id="@+id/star_image"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:contentDescription="@string/star_description"
                app:srcCompat="@android:drawable/btn_star_big_on"
                tools:ignore="ImageContrastCheck" />
                <TextView
                    android:id="@+id/bio_text"
                    style="@style/NameStyle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:lineSpacingMultiplier="1.2"
                    android:text="@string/bio" />
    </RelativeLayout>
            </ScrollView>
        </android.widget.LinearLayout>

【讨论】：

添加 RelativeLayout 并没有改变任何东西。
我先做了，修正了错别字，但没有用。

【解决方案3】：

如 LinearLayout 文档中所述，属性 layout_weight 的任何值大于用于其他组件的值都可用于使元素使用所有剩余空间。 git diff 显示了正确显示 ScrollView 所需的更改：

         style="@style/NameStyle"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:layout_weight="0"
         android:text="@string/name_text" />
 
     <ImageView
         android:id="@+id/star_image"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:layout_weight="0"
         android:contentDescription="@string/star_description"
         app:srcCompat="@android:drawable/btn_star_big_on"
         tools:ignore="ImageContrastCheck" />
@@ -26,7 +28,8 @@
     <ScrollView
         android:id="@+id/bio_scroll"
         android:layout_width="match_parent"
-        android:layout_height="match_parent">
+        android:layout_height="match_parent"
+        android:layout_weight="1">

【讨论】：