I. Overview
ScrollView is also a container, it is a subclass of FrameLayout , its main function is to display the content beyond the physical screen, ( that is, the scroll bar effect ) ScrollView provides vertical scrolling, and then the content beyond the physical screen can be displayed.
In general, a LinearLayout that uses vertical layout components can be used as a child component of a ScrollLayout container, and at the same time, content that exceeds the physical height of the screen can be displayed in the LinearLayout container.
2. Practice
This is a bit abstract, and then we now implement a debug board color display, the effect is as follows: ( you can scroll down )
Code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#07C2FB" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#07C2FB" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#C60426FD" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#C60426FD" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#032898" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#032898" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#021173" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#021173" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#504DAE" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#504DAE" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#3C60A6" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#3C60A6" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#282EA8" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#282EA8" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#273523" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="##5E7559" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#0E1E73" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#0E1E73" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#305BC8" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#305BC8" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#282EA8" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#282EA8" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#0B685E" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#0B685E" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#263B7E" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#263B7E" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#0A7AC5" />
<TextView
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#0A7AC5" />
</LinearLayout>
</LinearLayout>
</ScrollView>
Of course, ScrollView only provides vertical scroll bars. If you want to use the horizontal scrolling function, Android provides the HorizontalScrollView container. The HorizontalScrollView container can provide horizontal scrolling. Its use method is similar to that of ScrollView.
HorizontalScrollView：
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#2479CE" />
<TextView
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#2479CE" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#C97A06" />
<TextView
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#C97A06" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#68060E" />
<TextView
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#68060E" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#271904" />
<TextView
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#271904" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#673AB7" />
<TextView
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#673AB7" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#1B5834" />
<TextView
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#1B5834" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#680379" />
<TextView
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#680379" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#043485" />
<TextView
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#043485" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#798506" />
<TextView
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#798506" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#B12E04" />
<TextView
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#B12E04" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#A09006" />
<TextView
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#A09006" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="2"
android:background="#920C02" />
<TextView
android:layout_width="200px"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:text="#920C02" />
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
Realize the effect:
