[Android] ScrollView 画面の縦スクロール

スマホの画面はPC程大きくはありません。画面を縦方向、横方向にスクロールさせることでよりたくさんの情報を表示させるために ScrollVew があります。
まず基本の縦スクロール、ScrollViewの使い方を見てみましょう。

Android Studio
2021.2.1

ScrollView

ScrollViewの設定自体はとても簡単です。
スクロールさせたいところを ScrollView で挟み込むだけです。
　
試しにこの画像をスクロールさせてみましょう。
　

目次
1. レイアウトファイルに記述
2. コードで記述
3. one direct child

レイアウトファイルに記述

レイアウトXMLファイルでターゲットの画像をImageViewで表示し、
それをScrollViewではさみこみます。

activity_main.xml

<?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"
    tools:context=".MainActivity">

    <ImageView
        android:src="@drawable/cat"
        android:scaleType="centerCrop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@string/description"/>

</ScrollView>

<?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"

tools:context=".MainActivity">

<ImageView

android:src="@drawable/cat"

android:scaleType="centerCrop"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:contentDescription="@string/description"/>

</ScrollView>

　
drawableに画像を入れて、
ワーニング対策でandroid:contentDescriptionを設定
strings.xml

<resources>
    <string name="app_name">Your App Name</string>
    <string name="description">cat</string>
</resources>

</resources>

　
実行させてると、上下にスクロールするのが分かると思います。
尚、画面と画像サイズがぴったりだとスクロールする必要がなくなってスクロールしないこともありますから、画像は適度な縦長などのものを選びます。

コードで記述

レイアウトXMLファイルを使わずにコードで書く場合は
画像をImageViewに設定して、ScrollViewに追加して表示します。
　
MainActivity.java

//package your.package.name

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ScrollView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);

        int matchParent = ViewGroup.LayoutParams.MATCH_PARENT;
        int wrapContent = ViewGroup.LayoutParams.WRAP_CONTENT;

        ScrollView scrollView = new ScrollView(this);
        scrollView.setLayoutParams(new ScrollView.LayoutParams(
                matchParent, wrapContent));

        ImageView imageView = new ImageView(this);

        // drawableの画像を指定
        imageView.setImageResource(R.drawable.cat);

        imageView.setLayoutParams(new LinearLayout.LayoutParams(
                matchParent, wrapContent));

        // ScrollView に View を追加
        scrollView.addView(imageView);

        setContentView(scrollView);
    }
}

//package your.package.name

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.ScrollView;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// setContentView(R.layout.activity_main);

int matchParent = ViewGroup.LayoutParams.MATCH_PARENT;

int wrapContent = ViewGroup.LayoutParams.WRAP_CONTENT;

ScrollView scrollView = new ScrollView(this);

scrollView.setLayoutParams(new ScrollView.LayoutParams(

matchParent, wrapContent));

ImageView imageView = new ImageView(this);

// drawableの画像を指定

imageView.setImageResource(R.drawable.cat);

imageView.setLayoutParams(new LinearLayout.LayoutParams(

matchParent, wrapContent));

// ScrollView に View を追加

scrollView.addView(imageView);

setContentView(scrollView);

}

one direct child

通常、画面にUIが一つというのはあまりありませんので、複数のUIをScrollViewで挟むと

ScrollView can host only one direct child

というエラーになります。ScrollViewは子Viewを1つしか持てません。
　
どうするかというと、テキストやボタンなどをまとめてスクロールさせたい場合は、LinearLayout等でくくり、ScrollさせるのはLinearLayoutだけという体裁をとればいいのです。

実際に縦長画像と上下にテキスト、ボタンを置いたレイアウトをスクロールさせてみます。
先のレイアウトとは別ファイルとして記述すると
actiity_main2.xml

<?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"
    tools:context=".MainActivity">

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

        <TextView
            android:text="@string/text"
            android:textSize="24sp"
            android:layout_margin="20dp"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <ImageView
            android:src="@drawable/cat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:contentDescription="@string/description"/>

        <Button
            android:text="@string/button"
            android:layout_margin="20dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

</ScrollView>

<?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"

tools:context=".MainActivity">

<LinearLayout

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<TextView

android:text="@string/text"

android:textSize="24sp"

android:layout_margin="20dp"

android:gravity="center"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

<ImageView

android:src="@drawable/cat"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:scaleType="centerCrop"

android:contentDescription="@string/description"/>

<Button

android:text="@string/button"

android:layout_margin="20dp"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

</LinearLayout>

</ScrollView>

　
strings.xml

<resources>
    <string name="app_name">YourAppName</string>
    <string name="description">cat</string>
    <string name="text">TestScrollView</string>
    <string name="button">Button</string>
</resources>

<string name="app_name">YourAppName</string>

<string name="text">TestScrollView</string>

<string name="button">Button</string>

</resources>

　
この場合レイアウトだけの記述なので
MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);
        setContentView(R.layout.activity_main2);

    }
}

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// setContentView(R.layout.activity_main);

setContentView(R.layout.activity_main2);

}

猫の画像を上下にスクロールできるようになりました。
　