[Android Studio] Common layout --- scroll view ScrollView

Problem introduction : The display space of the mobile phone screen is limited, and it is often necessary to swipe up and down or left and right to pull out the rest of the page content. Unfortunately, the general layout nodes do not support self-scrolling. At this time, the scroll view is needed. Similar to the linear layout, the scroll view is also divided into two types: vertical direction and horizontal direction. The vertical scroll view is named ScrollView, and the horizontal scroll view is named ScrollView.

HorizontalScrollView

The use of these two scroll views is not complicated,

Mainly pay attention to the following 3 points:

(1) When scrolling in the vertical direction, the layout_width attribute value is set to match_parent, and the layout_height attribute value is set to wrap_content.

(2) When scrolling in the horizontal direction, the layout_width attribute value is set to wrap_content, and the layout_height attribute value is set to match_parent.

(3) Only one child layout node must hang under the scroll view node, otherwise an error will be reported at runtime.

Caused by：java.lang.IllegalStateException：ScrollView can host only one direct child

The following is an XML example of the vertical scroll view ScrollView and the horizontal scroll view HorizontalScrollView:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

    <!-- HorizontalScrollView是水平方向的滚动视图，当前高度为200dp -->

    <HorizontalScrollView

        android:layout_width="wrap_content"

        android:layout_height="200dp">

        <!-- 水平方向的线性布局，两个子视图的颜色分别为青色和黄色 -->

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:orientation="horizontal">

            <View

                android:layout_width="300dp"

                android:layout_height="match_parent"

                android:background="#aaffff" />

            <View

                android:layout_width="300dp"

                android:layout_height="match_parent"

                android:background="#ffff00" />

        </LinearLayout>

    </HorizontalScrollView>
  <!-- ScrollView是垂直方向的滚动视图，当前高度为自适应 -->

    <ScrollView

        android:layout_width="match_parent"

        android:layout_height="wrap_content">

        <!-- 垂直方向的线性布局，两个子视图的颜色分别为绿色和橙色 -->

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:orientation="vertical">

            <View

                android:layout_width="match_parent"

                android:layout_height="400dp"

                android:background="#00ff00" />

            <View

                android:layout_width="match_parent"

                android:layout_height="400dp"

                android:background="#ffffaa" />

        </LinearLayout>

    </ScrollView>
</LinearLayout>

Running the test app, we can see that ScrollView is scrolling vertically, while HorizontalScrollView is scrolling horizontally . Sometimes the actual content of the ScrollView is not enough, and I want it to fill the screen, what should I do? If you assign the layout_height attribute to match_parent, the result will still not be full. The correct way is to add another line of attribute android:fillViewport (this attribute is true to allow the view window to be filled), and the attribute fragment is as follows:

android:layout_height="match_parent"
android:fillViewport="true"

operation result:

Note: Modify the manifest file before running

slide page

thanks for watching! ! !