Master of NestedScroll

Harada Reo DroidKaigi 2023 UI/UX Master of NestedScroll

自己紹介 / Introduction Harada Reo CyberAgent Inc. Ameba どすこい塾 DroidKaigi
Staff RunningReo(X)

Master of NestedScrollのゴールに対する指標プロダクト開発においてネストスクロールで困らないようになる

Master of NestedScrollのゴールに対する指標 1. ネストスクロールを実装する前に気を付けるべき点が分かっている状態 2. ネストスクロールで期待しない動作が起きた時に原因究明する思考フローが身についている 3.
スクロールをカスタムする方法を知る

Master of NestedScrollのゴールに対する指標事前共有「こんな経験をした」「こんな時はどうする？」といったコメント大歓迎です！（みんなでネストスクロールで困らない世界にしましょう）

Master of NestedScrollのゴールに対する指標コンポーネントの並びを図示したものが出てきますが上から親コンポーネントの順に並んでいます。 Son Component Parent Component Child
Component

目次 / Index 実際のプロダクト開発で起こりうるネストスクロール問題について２３４ JetpackCompose時代における解決策相互運用上の注意点
AndroidView時代のコードと比較１

実際のプロダクト開発で起こりうるネストスクロール問題について１

実際のプロダクト開発で起こりうるネストスクロール問題についてそもそもネストスクロールとは？一つのスクロール動作に複数のコンポーネントが関わること例えば... 「スクロールに応じて折りたたまれるツールバー」「スクロールに応じて閉じるボトムシート」「横スワイプ内に配置された横向きリストの組み合わせ」

折りたたみツールバー AppBarLayout CoordinatorLayout CollaptingToolbar ConstraintLayout NestedScrollView TextView 実際のプロダクト開発で起こりうるネストスクロール問題について　Toolbar

実際のプロダクト開発で起こりうるネストスクロール問題についてシンプルなケースだと... AndroidXやマテリアルコンポーネントで提供されているコンポーネントを活用することで低レイヤーな部分を深く考えずに実装できる

実際のプロダクト開発で起こりうるネストスクロール問題についてしかし、期待しない動作になる場合がある子のスクロールが動作しないネストスクロールをしたくない場合

実際のプロダクト開発で起こりうるネストスクロール問題についてスクロールの仕組みがイメージしにくい Jetpack Compose / AndroidView / 相互運用 Jetpack ComposeだとAndroidViewほど
なぜ難しいのか？それぞれスクロールの仕様が異なるコンポーネントが充実していない

実際のプロダクト開発で起こりうるネストスクロール問題について Jetpack Compose / AndroidView / 相互運用 Jetpack Composeでネストスクロールをそこで・・・
それぞれのスクロールの仕組みをイメージ化カスタムする方法を学ぶ

Jetpack Compose時代における解決策２

JetpackCompose時代における解決策 Jetpack Composeのスクロール環境・Modifierで簡単にスクロールを適用可能・TopAppBarでcollapsing対応が可能・デフォルトでネストスクロールをサポート・NestedSc rollConnectionの仕組み

JetpackCompose時代における解決策 Modifierで簡単にスクロール可能にできる // ScrollViewのように振る舞う val scrollState = rememberScrollState() Column(modifier =
Modifier.verticalScroll(scrollState)) { ... } // offsetしないので注意 Column( modifier = Modifier.scrollable( orientation = Vertical, state = rememberScrollState { delta -> delta }, ) ) { ... }

JetpackCompose時代における解決策スクロール可能なコンポーネントにできる // ScrollViewのように振る舞う val scrollState = rememberScrollState() Column(modifier =
Modifier.verticalScroll(scrollState)) { ... } // offsetしないので注意 Column( modifier = Modifier.scrollable( orientation = Vertical, state = rememberScrollState { delta -> delta }, ) ) { ... }

JetpackCompose時代における解決策注意点・同一方向のスクロール可能なコンポーネントを　ネストするとRuntimeエラーが起きる LazyXXXのDSL(item/items)を用いる・scrollableはoffsetしないのでネストスクロールは　サポートされない（基本的にscrollStateで良い）

JetpackCompose時代における解決策 Scrollableはoffsetされない ※ もっと良い活用事例があれば教えてくださいスクロールに応じて背景色を変更する

JetpackCompose時代における解決策 TopAppBarでCollapsing対応が可能 @ExperimentalMaterial3Api @Composable fun TopAppBar( title: @Composable () ->
Unit, modifier: Modifier = Modifier, navigationIcon: @Composable () -> Unit = {}, actions: @Composable RowScope.() -> Unit = {}, windowInsets: WindowInsets = TopAppBarDefaults.windowInsets, colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(), scrollBehavior: TopAppBarScrollBehavior? = null )

JetpackCompose時代における解決策親のModifier#nestedScrollとTopAppBarに適用する @Composable fun EnterAlwaysTopAppBar() { val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
Scaffold( modifier = Modifier.nestedScroll(behavior.nestedScrollConnection), topAppBar = { TopAppBar( ... scrollBehavior = scrollBehavior, ) }, ...

各Behaviorの挙動 JetpackCompose時代における解決策 enterAlways existUntilCollapsed pinned ※state更新あり

Material3のTopAppBarでCollapsing対応はできるがレイアウトを自由に変えることが難しい例えば・・・実際に高さを変えようとするが TopAppBar自体の高さは固定なのでレイアウトの変更が難しい JetpackCompose時代における解決策

Parant Compose Child Compose JetpackCompose時代における解決策デフォルトでネストスクロールをサポート ※ AndroidViewはサポートしていない消費されなかったスクロール量を親に渡す

JetpackCompose時代における解決策例）HorizontalPager + LazyRow LazyRowのスクロールと HorizontalPagerのスワイプが地続きになっている

スクロール動作をカスタムできる JetpackCompose時代における解決策 // 子のネストスクロールに参加できるようになる fun Modifier.nestedScroll( connection: NestedScrollConnection, dispatcher: NestedScrollDispatcher?
= null ): Modifier // スクロール消費量などの伝播を制御することが可能 interface NestedScrollConnection // ネストスクロールシステムに消費量などを送る class NestedScrollDispatcher

子のスクロールに参加する JetpackCompose時代における解決策 // 子のネストスクロールに参加できるようになる fun Modifier.nestedScroll( connection: NestedScrollConnection, dispatcher: NestedScrollDispatcher?
= null ): Modifier // スクロール消費量などの伝播を制御することが可能 interface NestedScrollConnection // 親のスクロールシステムに消費量などを通知 class NestedScrollDispatcher

スクロールの消費量を取得する JetpackCompose時代における解決策 // 子のネストスクロールに参加できるようになる fun Modifier.nestedScroll( connection: NestedScrollConnection, dispatcher: NestedScrollDispatcher?

子のスクロール消費量などを親に送る JetpackCompose時代における解決策 // 子のネストスクロールに参加できるようになる fun Modifier.nestedScroll( connection: NestedScrollConnection, dispatcher: NestedScrollDispatcher?

JetpackCompose時代における解決策例）HorizontalPager + LazyRow LazyRowのスクロールと HorizontalPagerのスワイプが地続きになっている

JetpackCompose時代における解決策 NestedScrollConnectionの実装を渡してあげると解消 // 余ったx軸方向のスクロールをLazyRowで吸収する val nestedScrollConnection = object : NestedScrollConnection
{ override fun onPostScroll(...) = Offset(available.x, 0F) } HorizontalPager { ... LazyRow(Modifier.nestedScroll(nestedScrollConnection)) { ... } }

Child Composable Parent Composable (Modifier.nestedScroll(...)) JetpackCompose時代における解決策 NestedScrollConnectionの仕組み Modifier #nestedScrollを適用したComposeは子のスクロールに参加してスクロールイベントをインターセプトできる
join dispatch

JetpackCompose時代における解決策例）HorizontalPager + LazyRow 子のスクロール量を全て消費し切ることで HorizontalPagerが連動してスワイプされることがなくなる

JetpackCompose時代における解決策 NestedScrollConnectionの内部実装 // 引数など簡略化してます // returnした値は親のcomposable関数が吸収する interface NestedScrollConnection { fun
onPreScroll(...): Offset = Offset.Zero fun onPostScroll(...):Offset = Offset.Zero suspend fun onPreFling(...): Velocity = Velocity.Zero suspend fun onPostFling(...): Velocity = Velocity.Zero }

JetpackCompose時代における解決策 ① NestedScrollConnection #onPreScroll // スクロール前に消費量を制御することが可能 // availableは消費量, NestedScrollSourceはスクロール操作の種別 //
活用事例: 縦スクロールの端に到達するまで伝播させたくない場合 fun onPreScroll(available:Offset,source:NestedScrollSource): Offset = Offset.Zero // スクロールの端に達している時にFABを表示させるケース isVisible = (available.y == 0 && source == NestedScrollSource.Drag)

JetpackCompose時代における解決策 NestedScrollSourceの主な種別 Drag Fling

JetpackCompose時代における解決策 ② NestedScrollConnection #onPostScroll // スクロール後に消費されなかったスクロール量をどうするか決められる // consumedは消費量, availableは消費されなかったスクロール量
fun onPostScroll( consumed: Offset, available:Offset, source:NestedScrollSource, ): Offset = Offset.Zero // 伝播させず自身でスクロール量を吸収する ... return available

JetpackCompose時代における解決策 ② NestedScrollConnection #onPostScroll // スクロール後に消費されなかったスクロール量をどうするか決められる // consumedは消費量, availableは消費されなかったスクロール量 fun
onPostScroll( consumed: Offset, available:Offset, source:NestedScrollSource, ): Offset = Offset.Zero // 伝播させず自身でスクロール量を吸収する ... return available

JetpackCompose時代における解決策 ② NestedScrollConnection #onPostScroll // スクロール後に消費されなかったスクロール量をどうするか決められる // consumedは消費量, availableは消費されなかったスクロール量
fun onPostScroll( consumed: Offset, available:Offset, source:NestedScrollSource, ): Offset = Offset.Zero // 伝播させず自身でスクロール量を吸収する ... return available

JetpackCompose時代における解決策 ③ NestedScrollConnection #onPreFling // スクロールで指を離した時の慣性速度 // availableは発生した慣性速度 fun onPreFling(consumed:
Velocity): Velocity = Velocity.Zero // 縦にFlingさせないようにする（慎重に閲覧できる状態） fun onPreFling(consumed: Velocity): Velocity = Velocity(0F, consumed.y)

JetpackCompose時代における解決策 ③ NestedScrollConnection #onPreFling // スクロールで指を離した時の慣性速度 // availableは発生した慣性速度 fun onPreFling(available:
Velocity): Velocity = Velocity.Zero // 縦にFlingさせないようにする（慎重に閲覧できる状態） fun onPreFling(consumed: Velocity): Velocity = Velocity(0F, consumed.y)

JetpackCompose時代における解決策 ④ NestedScrollConnection #onPostFling // スクロール完了後の慣性速度 // consumedは消費された慣性速度, availableは消費されなかった速度 fun
onPostFling(consumed: Velocity, available: Velocity): Velocity = Offset.Zero

JetpackCompose時代における解決策 ④ NestedScrollConnection #onPostFling // スクロール完了後の慣性速度 // con sumedは消費された慣性速度, availableは消費されなかった速度
fun onPostFling(consumed: Velocity, available: Velocity): Velocity = Offset.Zero

JetpackCompose時代における解決策 ④ NestedScrollConnection #onPostFling // スクロール完了後の慣性速度 // consumedは消費された慣性速度, availableは消費されなかった速度 fun
onPostFling(consumed: Velocity, available: Velocity): Velocity = Offset.Zero

JetpackCompose時代における解決策 NestedScrollConnectionを活用して以下のような実装が可能 FABの表示切り替え stickyレイアウトアニメーション

JetpackCompose時代における解決策可変にしたい部分をStateにする // 初期値を定義する val paddingState by remember { mutableStateOf(16.dp)
} // 描画時に初期値を取得する modifier = Modifier.onGloballyPositioned { heightState = it.size.height } ... modifier = Modifier.onSizeChanged { widthState = it.width }

JetpackCompose時代における解決策まとめ NestedScrollConnectionを用いることでスクロールに応じてコンポーネントの状態を更新できる現時点でalpha版やExperimentalAPIの sticky headerやMotion Layoutといった複雑なネストスクロールも実装可能ただし、実装が複雑になりがちなので注意したい

AndroidView時代のコードと比較３

AndroidView時代のコードと比較 AndroidViewのスクロール環境・デフォルトでネストスクロールをサポートしていない・onInterceptTouchEvent/NestedScrollViewで子のタッチイベントをインターセプトできる・MotionLayoutとCoordinatorLayoutで複雑なネストスクロールを実装できる・NestedScrollingParent3/NestedScrollingChild3 を実装するとネストスクロールをカスタムできる

ネストしないスクロールは動作する AndroidView時代のコードと比較 ConstraintLayout ScrollView ScrollView ScrollView TextView TextView TextView

スクロール可能なViewを重ねると子のスクロールが動作しなくなる AndroidView時代のコードと比較 ScrollView ScrollView ScrollView ScrollView TextView TextView TextView

NestedScrollViewを用いると子のスクロールをインターセプトできる AndroidView時代のコードと比較 ScrollView NestedScrollView NestedScrollView NestedScrollView TextView TextView TextView

AndroidView時代のコードと比較タッチイベントの流れ TextView ScrollView ネストスクロールできるか確認する（※後述） NestedScrollView ACTION_DOWNは伝播させる / ACTION_MOVEは奪う

ViewPager2 + 横並びRecyclerView ViewPager2のスワイプと横並びのRecyclerViewのスクロールが競合してしまうネストスクロールをサポートしていないので ViewPager2のタッチイベントが優先される AndroidView時代のコードと比較

Github: android/platform-samples androidx.viewpager2.integration.testapp.NestedScrollableHost.kt　の実装をベースに見ていく Appach License 2.0 https://www.apache.org/licenses/LICENSE-2.0 AndroidView時代のコードと比較

AndroidView時代のコードと比較 ViewPager2とRecyclerViewのスクロール競合を解消 <ConstraintLayout> <TabLayout/> <ViewPager2> <NestedScrollableHost> <RecyclerView/> <NestedScrollableHost/> <ViewPager2/> <ConstraintLayout/>

AndroidView時代のコードと比較 onInterceptTouchEventでスクロールの競合を解消 <ConstraintLayout> <TabLayout/> <ViewPager2> <NestedScrollableHost> <RecyclerView/> <NestedScrollableHost/> <ViewPager2/> <ConstraintLayout/>

AndroidView時代のコードと比較 onInterceptTouchEventでスクロールの競合を解消 class NestedScrollableHost : FrameLayout { ... override fun
onInterceptTouchEvent(e: MotionEvent): Boolean { handleInterceptTouchEvent(e) return super.onInterceptTouchEvent(e) } private fun handleInterceptTouchEvent(e: MotionEvent) { ... } }

AndroidView時代のコードと比較 onInterceptTouchEventをオーバーライド class NestedScrollableHost : FrameLayout { ... override fun
onInterceptTouchEvent(e: MotionEvent): Boolean { handleInterceptTouchEvent(e) return super.onInterceptTouchEvent(e) } private fun handleInterceptTouchEvent(e: MotionEvent) { ... } }

AndroidView時代のコードと比較親ビューがタッチイベントを受け取らないようにする class NestedScrollableHost : FrameLayout { ... private fun
handleInterceptTouchEvent(e: MotionEvent) { if (e.action == MotionEvent.ACTION_DOWN) { ... parent.requestDisallowInterceptTouchEvent(true) } ... } }

AndroidView時代のコードと比較親ビューがタッチイベントを受け取らないようにする RecyclerView上を操作しても ViewPager2が動作しなくなる

AndroidView時代のコードと比較スクロールの端に到達した場合、親に伝播させる class NestedScrollableHost : FrameLayout { ... if (scaledDx
> touchSlop || scaledDy > touchSlop) { if (isVpHorizontal == (scaledDy > scaledDx)) { ... } else { if (canChildScroll(orientation, if (isVpHorizontal) dx else dy)) { ... } else { parent.requestDisallowInterceptTouchEvent(false) ...

AndroidView時代のコードと比較 RecyclerViewのタッチイベントを邪魔しない class NestedScrollableHost : FrameLayout { ... if (scaledDx

> touchSlop || scaledDy > touchSlop) { if (isVpHorizontal == (scaledDy > scaledDx)) { ... } else { if (canChildScroll(orientation, if (isVpHorizontal) dx else dy)) { ... } else { parent.requestDisallowInterceptTouchEvent(false) ... ページを切り替えているとみなすスクロール量

> touchSlop || scaledDy > touchSlop) { if (isVpHorizontal == (scaledDy > scaledDx)) { ... } else { if (canChildScroll(orientation, if (isVpHorizontal) dx else dy)) { ... } else { parent.requestDisallowInterceptTouchEvent(false) ... Viewシステムがスクロールとみなす距離 ViewConfigurationで取得できる

AndroidView時代のコードと比較縦スクロールか横スクロールかの判定 class NestedScrollableHost : FrameLayout { ... if (scaledDx
> touchSlop || scaledDy > touchSlop) { if (isVpHorizontal == (scaledDy > scaledDx)) { ... } else { if (canChildScroll(orientation, if (isVpHorizontal) dx else dy)) { ... } else { parent.requestDisallowInterceptTouchEvent(false) ... ViewPagerが横スワイプ可能 RecyclerViewがどちらにスクロールされたか

AndroidView時代のコードと比較縦スクロールか横スクロールかの判定 class NestedScrollableHost : FrameLayout { ... if (scaledDx
> touchSlop || scaledDy > touchSlop) { if (isVpHorizontal == (scaledDy > scaledDx)) { ... } else { if (canChildScroll(orientation, if (isVpHorizontal) dx else dy)) { ... } else { parent.requestDisallowInterceptTouchEvent(false) ... これ以上スクロールできるか

AndroidView時代のコードと比較子がスクロールできるかどうか確認する class NestedScrollableHost : FrameLayout { ... private fun
canChildScroll(orientation: Int, delta: Float): Boolean { val direction = -delta.sign.toInt() return when (orientation) { 0 -> child?.canScrollHorizontally(direction) ?: false 1 -> child?.canScrollVertically(direction) ?: false else -> throw IllegalArgumentException() } } ...

AndroidView時代のコードと比較子がスクロールできるかどうか確認する class NestedScrollableHost : FrameLayout { ... private fun
canChildScroll(orientation: Int, delta: Float): Boolean { val direction = -delta.sign.toInt() return when (orientation) { 0 -> child?.canScrollHorizontally(direction) ?: false 1 -> child?.canScrollVertically(direction) ?: false else -> throw IllegalArgumentException() } ...

AndroidView時代のコードと比較子がスクロールできない場合、親がインターセプトする class NestedScrollableHost : FrameLayout { ... if (scaledDx

AndroidView時代のコードと比較タッチイベントの流れ RecyclerView ViewPager ACTION_DOWNの時は伝播させない / 子がスクロールできない時は伝播させる NestedScrollableHost スクロールできるか確認

AndroidView時代のコードと比較 AndroidViewはスクロールのカスタムが難しい・ネストスクロールをサポートしていないのでタッチイベントの競合を解消する必要がある・親にスクロールを伝播するときに子がスクロール可能かどうかも確認する必要がある

CoordinatorLayout + CollapsingToolbarでシンプルな折りたたみツールバーをサポートできる AndroidView時代のコードと比較 enterAlways enterAlwaysCollapsed exitUntilCollapsed

MotionLayoutでより高度なアニメーションをつける ※ Jetpack Composeでも提供されている AndroidView時代のコードと比較

NestedScrollingParentとは？子と連携してネストスクロールを制御するためのinterface CoordinatorLayout / MotionLayoutなどで使われている AndroidView時代のコードと比較

NestedScrollingChildとは？ネストスクロールを親に適切に通知するためのinterface NestedScrollViewやRecyclerViewなどで実装されている AndroidView時代のコードと比較

AndroidView時代のコードと比較 NestedScrollingParent/Childの大まかな流れ NestedScrollingParent3 NestedScrollingChild3 #startNestedScroll #onStartNestedScroll #onNestedScrollAccepted #dispatchNestedPreScroll #onNestedPreScroll #dispatchNestedScroll
#onNestedScroll #stopNestedScroll #onStopNestedScroll

AndroidView時代のコードと比較 ACTION_DOWNを受け取るとネストスクロールを開始する NestedScrollingParent3 NestedScrollingChild3 #startNestedScroll #onStartNestedScroll #onNestedScrollAccepted #dispatchNestedPreScroll #onNestedPreScroll #dispatchNestedScroll
#stopNestedScroll #onNestedScroll #onStopNestedScroll

AndroidView時代のコードと比較ネストスクロールをサポートするかどうか決める NestedScrollingParent3 NestedScrollingChild3 #startNestedScroll #onStartNestedScroll #onNestedScrollAccepted #dispatchNestedPreScroll #onNestedPreScroll #dispatchNestedScroll

AndroidView時代のコードと比較ネストスクロールが有効であることを確認する NestedScrollingParent3 NestedScrollingChild3 #startNestedScroll #onStartNestedScroll #onNestedScrollAccepted #dispatchNestedPreScroll #onNestedPreScroll #dispatchNestedScroll

AndroidView時代のコードと比較 ACTION_MOVE：子Viewが親にスクロール量を送る NestedScrollingParent3 NestedScrollingChild3 #startNestedScroll #onStartNestedScroll #onNestedScrollAccepted #dispatchNestedPreScroll #onNestedPreScroll #dispatchNestedScroll

AndroidView時代のコードと比較子が消費する前に親に伝播させるスクロール量を決める NestedScrollingParent3 NestedScrollingChild3 #startNestedScroll #onStartNestedScroll #onNestedScrollAccepted #dispatchNestedPreScroll #onNestedPreScroll #dispatchNestedScroll

AndroidView時代のコードと比較子でスクロールした消費量を渡す NestedScrollingParent3 NestedScrollingChild3 #startNestedScroll #onStartNestedScroll #onNestedScrollAccepted #dispatchNestedPreScroll #onNestedPreScroll #dispatchNestedScroll

AndroidView時代のコードと比較 ACTION_UP：タッチイベントの終了 NestedScrollingParent3 NestedScrollingChild3 #startNestedScroll #onStartNestedScroll #onNestedScrollAccepted #dispatchNestedPreScroll #onNestedPreScroll #dispatchNestedScroll

AndroidView時代のコードと比較 NestedScrollingChildの実装例 Github: takahirom/webview-in-coordinatorlayout NestedWebView.javaの実装をベースに見ていく Appach License 2.0 https://www.apache.org/licenses/LICENSE-2.0

NestedWebView AppBarLayout CoordinatorLayout CollaptingToolbar NestedWebView Toolbar AndroidView時代のコードと比較

AndroidView時代のコードと比較 NestedWebViewの実装(簡略化する) class NestedWebView (...) : WebView, NestedScrollingChild { private
val mChildHelper = NestedScrollingChildHelper(this) override fun onTouchEvent(...): Boolean {...} override fun dispatch override fun setNestedScrollingEnabled(...) {...} override fun isNestedScrollingEnabled(...): Boolean {...} override fun startNestedScroll(...): Boolean {...} override fun stopNestedScroll(...) {...} override fun hasNestedScrollingParent(...): Boolean {...} override fun dispatchNestedScroll(...): Boolean {...} override fun dispatchNestedPreScroll(...): Boolean {...} override fun dispatchNestedFling(...): Boolean {... override fun dispatchNestedPreFling(...): Boolean {...} }

AndroidView時代のコードと比較 NestedScrollingChildを実装する class NestedWebView (...) : WebView, NestedScrollingChild { private
val mChildHelper = NestedScrollingChildHelper(this) override fun onTouchEvent(...): Boolean {...} override fun setNestedScrollingEnabled(...) {...} override fun isNestedScrollingEnabled(...): Boolean {...} override fun startNestedScroll(...): Boolean {...} override fun stopNestedScroll(...) {...} override fun hasNestedScrollingParent(...): Boolean {...} override fun dispatchNestedScroll(...): Boolean {...} override fun dispatchNestedPreScroll(...): Boolean {...} override fun dispatchNestedFling(...): Boolean {... override fun dispatchNestedPreFling(...): Boolean {...} }

AndroidView時代のコードと比較 NestedScrollingChildHelperを介してイベントを送る class NestedWebView (...) : WebView, NestedScrollingChild { private

AndroidView時代のコードと比較 ACTION_DOWNでネストスクロールを開始する class NestedWebView (...) : WebView, NestedScrollingChild { private

AndroidView時代のコードと比較ネストスクロールを有効化 / 確認 class NestedWebView (...) : WebView, NestedScrollingChild
{ private val mChildHelper = NestedScrollingChildHelper(this) override fun onTouchEvent(...): Boolean {...} override fun setNestedScrollingEnabled(...) {...} override fun isNestedScrollingEnabled(...): Boolean {...} override fun startNestedScroll(...): Boolean {...} override fun stopNestedScroll(...) {...} override fun hasNestedScrollingParent(...): Boolean {...} override fun dispatchNestedScroll(...): Boolean {...} override fun dispatchNestedPreScroll(...): Boolean {...} override fun dispatchNestedFling(...): Boolean {... override fun dispatchNestedPreFling(...): Boolean {...} }

AndroidView時代のコードと比較 NestedScrollConnectionと同様にスクロール量を送る class NestedWebView (...) : WebView, NestedScrollingChild { private

AndroidView時代のコードと比較 ACTION_UP / ACTION_CANCELでスクロールを終了する class NestedWebView (...) : WebView, NestedScrollingChild
{ private val mChildHelper = NestedScrollingChildHelper(this) override fun onTouchEvent(...): Boolean {...} override fun setNestedScrollingEnabled(...) {...} override fun isNestedScrollingEnabled(...): Boolean {...} override fun startNestedScroll(...): Boolean {...} override fun stopNestedScroll(...) {...} override fun hasNestedScrollingParent(...): Boolean {...} override fun dispatchNestedScroll(...): Boolean {...} override fun dispatchNestedPreScroll(...): Boolean {...} override fun dispatchNestedFling(...): Boolean {... override fun dispatchNestedPreFling(...): Boolean {...} }

AndroidView時代のコードと比較 AndroidViewの場合デフォルトでネストスクロールをサポートしていないので考慮すべきことが多い・オーバーライドするメソッドが多い・ネストスクロールが有効になっているかの確認・タッチイベントが終了した時・MotionEventという汎用的なデータを受け取るので内部で値の操作が多く発生する

AndroidView時代のコードと比較まとめ Jetpack Composeと比較してコンポーネントが豊富カスタムしないといけないケースは少ないスクロールをカスタムする時は Jetpack Composeの方がやりやすい印象特にデフォルトでネストスクロールをサポートしていない分考慮しないといけない部分が多い

相互運用上の注意点４

Android View Child Compose 相互運用上の注意点相互運用する時のネストスクロール〜子のViewからCompose化していく時〜？？？？？？

CoordinatorLayout LazyColumn 相互運用上の注意点相互運用する時のネストスクロールネストスクロールが機能しない

Android View : NestedScrollingParent3 Child Compose #Modifier.nestedScroll(rememberNestedScrollInteropConnection) 相互運用上の注意点親のAndroidViewが協力的な場合 NestedScrollInteropConnectionを渡してあげる
ネストスクロールが機能する

相互運用上の注意点協力的な親Viewとは？ NestedScrollingParent3を実装しているView ・NestedScrollView ・CoordinatorLayout ・MotionLayout ・SwipeRefreshLayout

相互運用上の注意点 NestedScrollInteropConnectionは何をしているのか？ internal class NestedScrollInteropConnection(...) : NestedScrollConnection() { private val
nestedScrollChildHelper = NestedScrollingChildHelper(...) ... override fun onPreScroll(...): Offset { if(nestedScrollChildHelper.startNestedScroll(...)) { ... nestedScrollChildHelper.dispatchNestedScroll(...) return toOffset(consumedScrollCache, available) } }

相互運用上の注意点 NestedScrollConnectionを実装 internal class NestedScrollInteropConnection(...) : NestedScrollConnection() { private val

相互運用上の注意点 AndroidView同様にHelperクラスを介する internal class NestedScrollInteropConnection(...) : NestedScrollConnection() { private val

相互運用上の注意点スクロールする前の制御 internal class NestedScrollInteropConnection(...) : NestedScrollConnection() { private val

相互運用上の注意点ネストスクロールができるか確認 internal class NestedScrollInteropConnection(...) : NestedScrollConnection() { private val

相互運用上の注意点親にスクロール消費量を送る internal class NestedScrollInteropConnection(...) : NestedScrollConnection() { private val

相互運用上の注意点スクロール消費量と消費されなかった量を送る internal class NestedScrollInteropConnection(...) : NestedScrollConnection() { private val
nestedScrollChildHelper = NestedScrollingChildHelper(...) ... override fun onPreScroll(...): Offset { if(nestedScrollChildHelper.startNestedScroll(...)) { ... nestedScrollChildHelper.dispatchNestedScroll( composeToViewOffset(consumed.x), composeToViewOffset(consumed.y), composeToViewOffset(available.x), composeToViewOffset(available.y), ... )

CoordinatorLayout Child Compose 相互運用上の注意点 NestedScrollInteropConnectionによりうまく動作するスクロールを伝播

Parent Compose Child Android View 相互運用上の注意点相互運用する時のネストスクロール〜親のViewをCompose化する時〜？？？？？？

相互運用上の注意点 Composable関数のAndroidViewを用いる Box(Modifier.nestedScroll(nestedScrollConnection)) { AndroidViewBinding( factory = InteropNestedScrollBinding::inflate, update =
{ recyclerview.layoutManager = LinearLayoutManager(root.context) recyclerview.adapter = AndroidViewViewPagerAdapter(...) }, ... ) TopAppBar(...) }

相互運用上の注意点 Composable関数のAndroidViewの全体像 Child AndroidView Parent Compose NestedScrollDispatcherでスクロール量を送る @composable Android View
NestedScrollingParent3によりコンテナとして機能

RecyclerView Parent Compose @composable Android View 相互運用上の注意点 AndroidViewによりネストスクロールが機能

相互運用上の注意点まとめ Jetpack ComposeとAndroidViewを接続する実装を用いることでネストスクロール問題を解決できる Jetpack Composeがネストスクロールのカスタムをしやすいので移行を考えるのも一つ

ゴールの振り返り

ゴールの振り返りプロダクト開発においてネストスクロールで困らないようになる

ゴールの振り返り 1. ネストスクロールを実装する前に気を付けるべき点が分かっている状態 2. ネストスクロールで期待しない動作が起きた時に原因究明する思考フローが身についている 3. スクロールをカスタムする方法を知る

ゴールの振り返り Jetpack Composeのまとめ・デフォルトでネストスクロールをサポートいる・NestedScrollConnectionを活用したUiStateの更新で複雑なネストスクロールの挙動も実現できる

ゴールの振り返り AndroidViewのまとめ・ネストスクロールはサポートしていない・NestedScrollView/onInterceptTouchEventを用いることでタッチイベントのカスタムが可能・とはいえコンポーネントが充実している・カスタムはJetpack Composeよりも考慮すべきことが　　多い

ゴールの振り返り相互運用の場合・NestedScrollingParent3を実装している親View であればNestedScrollConnectionを繋げることは可能・AndroidView(Composable関数)を用いることでネストスクロールを接続させることが可能

ゴールの振り返り最後に「こんな経験をした」「こんな時はどうする？」といったコメントオフィスアワーやXにて大歓迎です！（みんなでネストスクロールで困らない世界にしましょう）

Thank you

Master of NestedScroll

Master of NestedScroll

More Decks by Swimmy

Featured

Transcript