Android学习-滚动视图ScrollView和HorizontalScrollView

Posted 2021-01-23 ycmqaq

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

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

以上是关于Android学习-滚动视图ScrollView和HorizontalScrollView的主要内容，如果未能解决你的问题，请参考以下文章

Android零基础入门第61节：滚动视图ScrollView

ScrollView 内的 Android WebView 仅滚动滚动视图

具有自定义视图的 ScrollView 不会滚动 - android？

android-基础编程-ScrollView

Android ScrollView 自动滚动到视图底部

Android学习笔记技巧之垂直和水平滚动视图