Android学习-滚动视图ScrollView和HorizontalScrollView

一、简介：

ScrollView，通过官方文档的继承关系可以看出，它继承自FrameLayout，所以它是一种特殊类型的FrameLayout，因为它可以使用用户滚动显示一个占据的空间大于物理显示的视图列表。值得注意的是，ScrollView只能包含一个子视图或视图组，在实际项目中，通常包含的是一个垂直的LinearLayout。

二、ScrollView代码块：

• 在activity_main.xml中添加一个超出页面范围的按钮：

<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="wrap_content"
    android:orientation="vertical"
    >

    <Button
        android:id="@+id/btn_textview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TextView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON"
        android:textAllCaps="false"/>
    
    <Button
        android:id="@+id/btn_edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="EditText"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_radiobutton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="RadioButton"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_checkbox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="CheckBox"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_imageview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ImageView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ListView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_gridview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="GridView"
        android:textAllCaps="false"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="test"
        android:textAllCaps="false"
        android:layout_marginTop="300dp"/>

</LinearLayout>

• 更改为ScrollView布局(ScrollView下子元素只能有一个):

<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="wrap_content"
    >

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

    <Button
        android:id="@+id/btn_textview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TextView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="EditText"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_radiobutton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="RadioButton"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_checkbox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="CheckBox"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_imageview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ImageView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ListView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_gridview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="GridView"
        android:textAllCaps="false"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="test"
        android:textAllCaps="false"
        android:layout_marginTop="300dp"/>

    </LinearLayout>
</ScrollView>

• 运行截图：
  

三、HorizontalScrollView代码块：

• 在原有ScrollView基础上写入HorizontalScrollView(HorizontalScrollView下子元素只能有一个):

<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="wrap_content"
    >

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

    <Button
        android:id="@+id/btn_textview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TextView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="BUTTON"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="EditText"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_radiobutton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="RadioButton"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_checkbox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="CheckBox"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_imageview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ImageView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="ListView"
        android:textAllCaps="false"/>

    <Button
        android:id="@+id/btn_gridview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="GridView"
        android:textAllCaps="false"/>

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

            <Button
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:text="Test"
                android:textAllCaps="false"/>
            <Button
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:text="Test"
                android:textAllCaps="false"/>
            <Button
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:text="Test"
                android:textAllCaps="false"/>
            <Button
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:text="Test"
                android:textAllCaps="false"/>
        </LinearLayout>
    </HorizontalScrollView>

    </LinearLayout>
</ScrollView>

• 运行截图(既能上下滚动也能左右滚动)：