サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<h2 id="はじめに">はじめに</h2>

この記事は、<a href="https://qiita.com/advent-calendar/2022/dmm" target="_blank">DMMグループ Advent Calendar 2022</a>の18日目の記事です。

こんにちは。動画配信事業部でAndroidエンジニアをしている、新卒1年目の富山(<a href="https://twitter.com/yt8492" target="_blank">@yt8492</a>)です。

先日、DMM TVというサービスがリリースされました！

<a href="https://tv.dmm.com/vod/" target="_blank">DMM TV｜アニメ・エンタメ見放題、コスパ最強月額550円</a>

&nbsp;

自分もAndroidエンジニアとしてDMM TVの開発に関わっています。

&nbsp;

さて、Android版DMM TVアプリは、Jetpack Composeを用いて開発しています。

今回は、DMM TVでも使っている、自動でスクロールする横方向のPagerの実装の紹介をしたいと思います。

Androidエンジニア以外の方には、スマホアプリでよくあるスライドするアレといえばわかるかもしれません。

<h2 id="今回作るもの">今回作るもの</h2>

今回作るPagerの仕様としては、以下の通りです。

<ul>
	<li>時間経過で自動で横スライドする</li>
	<li>手動でもスライドできる</li>
	<li>端に到達して更にスライドすると逆の端に飛ぶ(無限にスクロールできる)</li>
</ul>

動作としては次のようになります。

<img alt="" height="1200" itemprop="image" loading="lazy" src="https://image.dmm-corp.com/zgbj8xxplaj3dtpviabzuifpflbx" title="" width="554" />

<h2 id="AccompanistのHorizontalPagerについて">AccompanistのHorizontalPagerについて</h2>

実装に入る前に、AccompanistのPagerについて紹介します。

<a href="https://google.github.io/accompanist/" target="_blank">Accompanist</a>&nbsp;は、Googleが提供しているJetpack Compose向けのUtil集で、準標準ライブラリ的な位置づけになります。その中の1つに、&nbsp;<a href="https://google.github.io/accompanist/pager/" target="_blank">Pager layouts</a>&nbsp;があります。

※執筆時点でのバージョンは&nbsp;<code>0.28.0</code>&nbsp;です。

AccompanistのPager layoutsが提供するAPIの1つに、&nbsp;<a href="https://google.github.io/accompanist/pager/#horizontalpager" target="_blank">HorizontalPager</a>&nbsp;があります。

これがまさに、水平方向のスクロールができるPagerなのですが、1つ問題があります。それは、無限スクロールができないという点です。

<img alt="" height="1200" itemprop="image" loading="lazy" src="https://image.dmm-corp.com/iodaelag0bkeqf6jho483sobk90g" title="" width="554" />

このように、最後の要素に到達して更にスクロールしようとしても、最初の要素に戻りませんね。

<code>HorizontalPager</code>&nbsp;の定義を見てみましょう。

<pre>
<code>@Composable
fun HorizontalPager(
 count: Int,
 modifier: Modifier = Modifier,
 state: PagerState = rememberPagerState(),
 reverseLayout: Boolean = false,
 itemSpacing: Dp = 0.dp,
 contentPadding: PaddingValues = PaddingValues(0.dp),
 verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
 flingBehavior: FlingBehavior = PagerDefaults.flingBehavior(
 state = state,
 endContentPadding = contentPadding.calculateEndPadding(LayoutDirection.Ltr),
 ),
 key: ((page: Int) -&gt; Any)? = null,
 userScrollEnabled: Boolean = true,
 content: @Composable PagerScope.(page: Int) -&gt; Unit,
)</code></pre>

引数がいろいろありますが、今回重要なのは

<ul>
	<li>count: Int</li>
	<li>state: PagerState</li>
	<li>content: @Composable PagerScope.(page: Int) -&gt; Unit</li>
</ul>

の3つです。

<code>count</code>&nbsp;は、Pagerのページ数を決定します。

<code>state</code>&nbsp;は、Pagerの状態を表します。&nbsp;<code>currentPage</code>&nbsp;で現在のページのindexを取得できたり、&nbsp;<code>scrollToPage</code>,&nbsp;<code>animateScrollToPage</code>&nbsp;でPagerをスクロールさせたりすることができます。

<code>content</code>&nbsp;は、Pagerに表示させるコンテンツのComposable関数です。&nbsp;<code>page</code>&nbsp;が現在のページindexになるので、これで表示させるコンテンツを出し分けることができます。

さて、今回問題になっているのは無限スクロールができないことです。解決策としては、&nbsp;<code>HorizontalPager</code>&nbsp;の&nbsp;<code>count</code>&nbsp;をIntの最大値にし、擬似的に無限スクロール可能とすることが考えられますが、&nbsp;<code>PagerState</code>&nbsp;の&nbsp;<code>currentPage</code>&nbsp;や&nbsp;<code>content</code>&nbsp;の&nbsp;<code>page</code>&nbsp;もそれに合わせた値になってしまうので、使う側としては直感的でないかつ不便です。

そこで今回は、無限スクロールを可能にしつつ、自動でスクロールもできるPagerを、AccompanistのHorizontalPagerをラップする形で実装します。

<h2 id="HorizontalInfiniteAutoScrollPagerの実装">HorizontalInfiniteAutoScrollPagerの実装</h2>

水平方向に無限にかつ自動でスクロール可能なPagerということで、&nbsp;<code>HorizontalInfiniteAutoScrollPager</code>&nbsp;と命名しました。今回はそれを実装していきます。

<h2 id="APIを考える">APIを考える</h2>

今回実装するものを、まずは呼び出し側から見たAPIから考えていきましょう。

参考として、まずはAccompanistのHorizontalPagerを見てみましょう。

<pre>
<code>val state = rememberPagerState(
 initialPage = 0,
)
HorizontalPager(
 count = 5,
 state = state,
) { page -&gt;
 // pageによる出し分け
}</code></pre>

<code>rememberPagerState</code>&nbsp;でPagerStateを生成・保持し、それを&nbsp;<code>HorizontalPager</code>&nbsp;に渡しています。 個人的にはページ数と初期ページを別々のところで指定しているのが気になるところですね。

さて、上記を参考に&nbsp;<code>HorizontalInfiniteAutoScrollPager</code>&nbsp;を呼び出し側から見た時にどのようになるかを考えてみます。

まずstateの生成ですが、今回はページ数、初期ページの他に、自動スクロールのために必要な情報であるスクロール間隔も渡せるようにします。

<pre>
<code>val state = rememberInfiniteAutoScrollPagerState(
 pageCount = 5
 initialPage = 0,
 durationMillis = 5000,
)</code></pre>

Pagerのほうは、先程のstateを単純に受け取り、pageを引数に取るラムダにPager内に表示するUIを記述するという形になります。

<pre>
<code>HorizontalInfiniteAutoScrollPager(
 state = state,
) { page -&gt;
 // pageによる出し分け
}</code></pre>

これらをもとに、実装していきます。

<h2 id="実装を考える">実装を考える</h2>

今回は、Accompanistの&nbsp;<code>HorizontalPager</code>&nbsp;をラップして実装します。前述の通り、&nbsp;<code>HorizontalPager</code>&nbsp;にはIntの最大値をページ数として渡すので、外から見たときのページ数と内部の状態のページ数に乖離が発生することになります。

そこで今回は、&nbsp;<code>HorizontalInfiniteAutoScrollPager</code>&nbsp;用のstateを、Accompanistの&nbsp;<code>PagerState</code>&nbsp;をラップする形で実装し、PagerStateがもつページの状態から外から見たときのページの状態を計算するようにします。

<h2 id="InfiniteAutoScrollPagerState">InfiniteAutoScrollPagerState</h2>

<code>HorizontalInfiniteAutoScrollPager</code>&nbsp;用のstateを実装します。このstateが管理する情報は以下の通りです。

<ul>
	<li>使う側から見たときのページ数</li>
	<li>使う側から見たときの初期ページ</li>
	<li>使う側から見たときの現在のページ</li>
	<li>自動スクロールの間隔(ミリ秒)</li>
	<li>内部のPagerで扱うPageState</li>
</ul>

今回は、これをdata classとして定義します。

<pre>
<code>@OptIn(ExperimentalPagerApi::class)
data class InfiniteAutoScrollPagerState(
 val pageCount: Int,
 val initialPage: Int,
 val currentPage: Int,
 val durationMillis: Int,
 val pagerState: PagerState,
)</code></pre>

これを生成・保持するComposable関数を実装します。

<pre>
<code>@OptIn(ExperimentalPagerApi::class)
@Composable
fun rememberInfiniteAutoScrollPagerState(
 pageCount: Int,
 initialPage: Int,
 durationMillis: Int,
): InfiniteAutoScrollPagerState</code></pre>

ページが切り替わった時に発火させるコールバックも渡せるようにしています。

さて、それでは関数の中身の実装です。

<h3 id="ページの計算">ページの計算</h3>

今回は、内部的なページ数をIntの最大値にして擬似的な無限スクロールを実現しますが、前にも後ろにもスクロールできるようにしたいので、0ページ目は内部的にはIntの最大値/2となります。

<pre>
<code>val startIndex = Int.MAX_VALUE / 2 + initialPage
val pagerState = rememberPagerState(
 initialPage = startIndex,
)</code></pre>

内部的に扱っているcurrentPageから、使う側から見たときのcurrentPageを計算します。

<pre>
<code>val currentPage = (pagerState.currentPage - Int.MAX_VALUE / 2).mod(pageCount)</code></pre>

これで、無限スクロールに伴う内部的なページと使う側から見たページの乖離の問題は解決できました。

<h3 id="自動スクロールの実装">自動スクロールの実装</h3>

次に、自動スクロールの実装です。まずは実装を貼ります。

<pre>
<code>val scope = rememberCoroutineScope()
val scrollTo = { state: PagerState , page: Int -&gt;
 scope.launch {
 if (!state.isScrollInProgress) {
 pagerState.animateScrollToPage(page)
 }
 }
}
LaunchedEffect(pagerState.currentPage) {
 onChangedPage?.invoke(currentPage)
 delay(durationMillis.toLong())
 scrollTo(pagerState, pagerState.currentPage + 1)
}</code></pre>

<code>LaunchedEffect</code>&nbsp;で&nbsp;<code>currentPage</code>&nbsp;の変更を検知し、ページが切り替わった時のコールバックを発火させ、&nbsp;<code>delay</code>&nbsp;ののち&nbsp;<code>pagerState.animateScrollToPage</code>&nbsp;で次のページにスクロールさせるというシンプルなロジックですが、スクロール部分を&nbsp;<code>LaunchedEffect</code>&nbsp;のCoroutineScopeではなくわざわざ&nbsp;<code>rememberCoroutineScope</code>&nbsp;で取得したscopeで行っているのに疑問を持った人もいるのではないでしょうか？

これは、Kotlin CoroutinesとLaunchedEffectの仕様が関係しています。&nbsp;<code>LaunchedEffect</code>&nbsp;のkeyに指定している&nbsp;<code>pagerState.currentPage</code>&nbsp;が、&nbsp;<code>pagerState.animateScrollToPage(page)</code>&nbsp;を呼んだ際にスクロールのアニメーションが終わる前に値が変化するために、&nbsp;<code>LaunchedEffect</code>&nbsp;がその変化を検知し、以前のkeyのcoroutineのjobをcancelして新しいkeyのjobを開始します。&nbsp;<code>pagerState.animateScrollToPage</code>&nbsp;はsusupend関数であるため、この際にスクロール最中にcancelされることになり、結果としてスクロールが中途半端になってしまうという現象が発生します。

これの対策として、&nbsp;<code>pagerState.animateScrollToPage</code>&nbsp;を&nbsp;<code>LaunchedEffect</code>&nbsp;とは別のscopeで呼ぶことで&nbsp;<code>LaunchedEffect</code>&nbsp;のscopeのcancelに影響させずにスクロールさせています。

最後に、このComposable関数の返り値として&nbsp;<code>InfiniteAutoScrollPagerState</code>&nbsp;を返せば完成です。

<pre>
<code>return InfiniteAutoScrollPagerState(
 pageCount,
 initialPage,
 currentPage,
 durationMillis,
 pagerState,
)</code></pre>

<h3 id="完成したrememberInfiniteAutoScrollPagerState関数">完成したrememberInfiniteAutoScrollPagerState関数</h3>

<pre>
<code>@OptIn(ExperimentalPagerApi::class)
@Composable
fun rememberInfiniteAutoScrollPagerState(
 pageCount: Int,
 initialPage: Int,
 durationMillis: Int,
 onChangedPage: ((Int) -&gt; Unit)? = null,
): InfiniteAutoScrollPagerState {
 val startIndex = Int.MAX_VALUE / 2 + initialPage
 val pagerState = rememberPagerState(
 initialPage = startIndex,
 )
 val currentPage = (pagerState.currentPage - Int.MAX_VALUE / 2).mod(pageCount)
 val scope = rememberCoroutineScope()
 val scrollTo = { state: PagerState , page: Int -&gt;
 scope.launch {
 if (!state.isScrollInProgress) {
 pagerState.animateScrollToPage(page)
 }
 }
 }
 LaunchedEffect(pagerState.currentPage) {
 onChangedPage?.invoke(currentPage)
 delay(durationMillis.toLong())
 scrollTo(pagerState, pagerState.currentPage + 1)
 }
 return InfiniteAutoScrollPagerState(
 pageCount,
 initialPage,
 currentPage,
 durationMillis,
 pagerState,
 )
}</code></pre>

<h2 id="HorizontalInfiniteAutoScrollPager">HorizontalInfiniteAutoScrollPager</h2>

こちらは単純です。&nbsp;<code>HorizontalPager</code>&nbsp;の&nbsp;<code>count</code>&nbsp;にIntの最大値を、&nbsp;<code>state</code>&nbsp;に先程実装した&nbsp;<code>InfiniteAutoScrollPagerState</code>&nbsp;が保持している&nbsp;<code>PagerState</code>&nbsp;を渡し、 現在の&nbsp;<code>page</code>&nbsp;から使う側から見たときのcurrentPageを計算して&nbsp;<code>content</code>&nbsp;に渡しています。

<pre>
<code>@ExperimentalPagerApi
@Composable
fun HorizontalInfiniteAutoScrollPager(
 state: InfiniteAutoScrollPagerState,
 contentWidth: Dp? = null,
 itemSpacing: Dp = 0.dp,
 content: @Composable PagerScope.(Int) -&gt; Unit,
) {
 BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {
 val contentPadding = if (contentWidth != null) {
 PaddingValues(horizontal = (maxWidth - contentWidth) / 2)
 } else {
 PaddingValues(0.dp)
 }

 HorizontalPager(
 count = Int.MAX_VALUE,
 state = state.pagerState,
 contentPadding = contentPadding,
 itemSpacing = itemSpacing,
 modifier = Modifier.fillMaxWidth(),
 ) { index -&gt;
 val i = (index - Int.MAX_VALUE / 2).mod(state.pageCount)
 content(i)
 }
 }
}</code></pre>

<h2 id="おわりに">おわりに</h2>

今回は、DMM TVでも使っている、自動でスクロールする横方向のPagerの実装の紹介をしてみました。いかがでしたか？このようなPagerはいろんなアプリで見かけるので、実装する際の参考になればと思います。

<h2 id="宣伝">宣伝</h2>

DMM TVをよろしくお願いします！

<a href="https://tv.dmm.com/vod/" target="_blank">DMM TV｜アニメ・エンタメ見放題、コスパ最強月額550円</a>

&nbsp;

DMM TV

動画

Android

アドベントカレンダー2022

Jetpack Composeで自動でスクロールする無限スクロール可能な横方向のPagerを実装する

Jetpack Composeで自動でスクロールする無限スクロール可能な横方向のPagerを実装する

シェア

関連する求人

関連する記事

関連するサービス