2024/3/28

【Kotlin/Android】ScrollViewをネスト(入れ子)して実装する方法！NestedScrollView

この記事からわかること

Android Studio/Kotlinでネスト(入れ子)されたScrollViewの実装方法
NestedScrollViewの使い方

index

[open]

ScrollViewをネストするとスクロールできなくなる
ネストされたScrollViewをスクロールできるようにする方法
子にNestedScrollViewを指定する
親にカスタムで拡張したScrollViewを指定する

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Flamingo
Kotlin：1.8.20

ScrollViewをネストするとスクロールできなくなる

AndroidでScrollViewの中にScrollViewを配置すると親のScrollViewはスクロールできまずが、子のScrollViewはスクロールできなくなってしまいます。

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="200dp">

        </ScrollView>

</ScrollView>

ネストされたScrollViewをスクロールできるようにする方法

ネストされたScrollViewを動作するようにするためには以下の2つの方法があります。

子にNestedScrollViewを指定する
親にカスタムで拡張したScrollViewを指定する

子にNestedScrollViewを指定する

公式リファレンス：NestedScrollView

NestedScrollViewを使用することでネストされたScrollViewをスクロールできるようにすることが可能です。使用方法は簡単で子供側にあるScrollViewをNestedScrollViewに置き換えるだけです。

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="200dp">

        </androidx.core.widget.NestedScrollView>

</ScrollView>

【Kotlin/Android】ScrollViewをネスト(入れ子)して実装する方法！

親にカスタムで拡張したScrollViewを指定する

NestedScrollViewを使用せずに親側のViewを変更することでネストされたScrollViewをスクロールできるようにするには親ScrollViewが子ScrollViewの縦方向のスクロールだけを許可するカスタムViewを実装します。

import android.content.Context
import android.util.AttributeSet
import android.view.MotionEvent
import android.widget.ScrollView

class CustomScrollView @JvmOverloads  constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : ScrollView(context, attrs, defStyleAttr) {

    private var xDistance: Float = 0f  // X軸方向の移動距離を追跡するための変数
    private var yDistance: Float = 0f  // Y軸方向の移動距離を追跡するための変数
    private var lastX: Float = 0f  // 最後のX座標を記録するための変数
    private var lastY: Float = 0f  // 最後のY座標を記録するための変数

    override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
        when (ev.action) {
            MotionEvent.ACTION_DOWN -> {
                // タッチが開始された場合は、移動距離と座標をリセット
                xDistance = 0f
                yDistance = 0f
                lastX = ev.x
                lastY = ev.y
            }
            MotionEvent.ACTION_MOVE -> {
                // タッチが移動した場合は、移動距離を更新
                val curX: Float = ev.x
                val curY: Float = ev.y
                xDistance += Math.abs(curX - lastX)
                yDistance += Math.abs(curY - lastY)
                lastX = curX
                lastY = curY
                // Y方向の移動距離がX方向よりも大きい場合、親ScrollViewのスクロールを停止する
                if (yDistance > xDistance) {
                    return false
                }
            }
        }
        // それ以外の場合は、親ScrollViewに処理を委譲
        return super.onInterceptTouchEvent(ev)
    }
}

あとは以下のようにXML側でカスタムViewを親に設定するだけです。

<com.sample.scrolltest.CustomScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <View
            android:layout_width="match_parent"
            android:layout_height="400dp"
            android:background="#23527c" />

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

                <View
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:background="#dd6b24" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:background="#000000" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:background="#FFF000" />

            </LinearLayout>

        </ScrollView>

        <View
            android:layout_width="match_parent"
            android:layout_height="400dp"
            android:background="#bd9907" />

    </LinearLayout>

</com.sample.scrolltest.CustomScrollView>