[Android & Kotlin] ScrollView 画面を縦にスクロールさせてみた

Androidは画面をスクロールさせることでたくさんの情報を表示させることができます。Kotlinでも ScrollVew を使うと簡単に縦方向にスクロールさせることができます。
　

Android Studio
2021.1.1

ScrollView

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

650 x 860

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

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

レイアウトXMLファイルでターゲットの画像をImageViewで表示し、それをScrollViewではさみます。もっともこれはレイアウトで記述するだけなので、JavaもKotlinもないのですが…

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

android:layout_height="wrap_content"

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

</ScrollView>

　
strings.xml

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

</resources>

このままで実行させてると、上下にスクロールするのが分かると思います。

コードで記述

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

//package your.package.name

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

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //setContentView(R.layout.activity_main)

        val mParent = ViewGroup.LayoutParams.MATCH_PARENT
        val wContent = ViewGroup.LayoutParams.WRAP_CONTENT

        val scrollView = ScrollView(this)
        scrollView.layoutParams = LinearLayout.LayoutParams(wContent, mParent)

        val imageView = ImageView(this)

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

        imageView.layoutParams = LinearLayout.LayoutParams(wContent, mParent)
        
        // ScrollView に View を追加
        scrollView.addView(imageView)

        setContentView(scrollView)
    }
}

//package your.package.name

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import android.widget.LinearLayout

import android.widget.ScrollView

import android.view.ViewGroup

import android.widget.ImageView

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

//setContentView(R.layout.activity_main)

val mParent = ViewGroup.LayoutParams.MATCH_PARENT

val wContent = ViewGroup.LayoutParams.WRAP_CONTENT

val scrollView = ScrollView(this)

scrollView.layoutParams = LinearLayout.LayoutParams(wContent, mParent)

val imageView = ImageView(this)

// drawableの画像を指定

imageView.setImageResource(R.drawable.cat)

imageView.layoutParams = LinearLayout.LayoutParams(wContent, mParent)

// 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_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">

    <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">Test ScrollView</string>
    <string name="button">button</string>
</resources>

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

<string name="text">Test ScrollView</string>

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

</resources>

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

Ref:
ScrollView | Android Developers