如何在Android的ScrollView中添加标题栏？

我来帮你搞定这个ScrollView加标题栏的问题！先看看你代码里的小疏漏，再给你两种实用的解决方案～

先说说你现有代码的问题 #

你的XML布局存在标签未闭合的错误：嵌套的第二个<LinearLayout>还没写</LinearLayout>就直接关闭了ScrollView，这会导致Android系统无法正常解析布局。另外，ScrollView本身要求只能有一个直接子元素，你的结构思路是对的，但标签不完整直接导致了布局失效。

方案一：固定顶部的标题栏（不随内容滚动） #

这是最常用的场景，标题栏始终停留在屏幕顶部，只有下方内容滚动。我们用垂直LinearLayout把标题栏和ScrollView包裹起来：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.nazir.alrehman.FullRead">

    <!-- 固定在顶部的标题栏 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:orientation="horizontal"
        android:paddingVertical="16dp"
        android:paddingHorizontal="24dp">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="你的标题内容"
            android:textColor="@android:color/white"
            android:textSize="20sp"
            android:textStyle="bold"/>
    </LinearLayout>

    <!-- 滚动内容区域 -->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent">

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

            <!-- 这里放你的滚动内容 -->
            <TextView
                android:id="@+id/a1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingVertical="50dp"
                android:text="الرَّحۡمٰنُۙ‏ ﴿۱﴾"
                android:background="@color/colorAccent"
                android:textSize="50sp"/>

            <!-- 可以添加更多内容测试滚动效果 -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingVertical="50dp"
                android:text="更多测试内容..."
                android:textSize="30sp"/>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

方案二：随内容滚动的标题栏（在ScrollView内部） #

如果需要标题栏和内容一起滚动，只需把标题栏放在ScrollView的子LinearLayout最顶部，同时修复你原来的标签问题：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"
    tools:context="com.example.nazir.alrehman.FullRead">

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

        <!-- 随内容滚动的标题栏 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:orientation="horizontal"
            android:paddingVertical="16dp"
            android:paddingHorizontal="24dp">

            <TextView
                android:id="@+id/tv_scroll_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="滚动的标题"
                android:textColor="@android:color/white"
                android:textSize="20sp"
                android:textStyle="bold"/>
        </LinearLayout>

        <!-- 你的滚动内容 -->
        <TextView
            android:id="@+id/a1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingVertical="50dp"
            android:text="الرَّحۡمٰنُۙ‏ ﴿۱﴾"
            android:background="@color/colorAccent"
            android:textSize="50sp"/>

        <!-- 更多测试内容 -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingVertical="50dp"
            android:text="更多滚动内容..."
            android:textSize="30sp"/>
    </LinearLayout>
</ScrollView>

小提示 #

• 方案一适合绝大多数场景，标题栏固定能让用户随时看到当前页面主题；
• 不管用哪种方案，一定要确保XML标签成对闭合，这是布局解析的基础要求。

内容的提问来源于stack exchange，提问作者Nazir Hussain