compose公式のswipeRefreshを使う

初めに

今回は、jetpack composeの公式からでた1.4.0-alpha01から使えるswipeRefreshを実装していこうと思います

本文

実装自体はすごく単純でawipeRefreshをつけたいBoxなどに下記の設定を追加するだけです

val pullRefreshState =
        rememberPullRefreshState(refreshing = isRefreshing, onRefresh = { onRefreshed() })
Box(
    modifier = Modifier
        .pullRefresh(pullRefreshState)
        .fillMaxSize()
    ) {

   }

PullRefreshIndicator(
            refreshing = isRefreshing,
            state = pullRefreshState,
            modifier = Modifier.align(Alignment.TopCenter),
            scale = true
        )

pullRefreshStateには専用の型を代入します。rememberとついてるようにrefreshingに渡されたBooleanの状態が変更されるのを監視してくれてその状態によって挙動を制御することができます。
onRefreshにはswipeされた時に実行して欲しい処理を代入します。
また、PullRefreshIndiacatorはswipeされた時に表示されるインジケータでrefreshingにはpullRefreshState同様Booleanを入れることでその値を参照して表示、非表示をきりかえてくれます。
stateには対象のBoxと同じrememberPullRefreshState型の変数を代入すれば大丈夫です。
一番重要なのはscaleでこれをtrueにしないとデフォルトのfalseの状態だと、対象のViewの上に隠れてる状態なのでタブなどがある時に被って表示されてしまいます。

最後に

今回は、ComposeでのswipeRefreshを紹介しました
だんだんと公式から必要なパーツが実装されてきたので今後誰かのお役に立てれば光栄です