用Jetpack Compose实现下拉刷新和上拉加载


/   今日科技快讯   /

LG将在2021年5月底停止生产手机,到7月底结束销售,退出智能手机业务。分析师认为,LG电子退出亏损的手机业务,预计在利润丰厚的北美智能手机市场,三星由此获得的机会要大于其它竞争对手。

/   作者简介   /

大家周五好,利用周末好好调整一下~我们下周见!

本篇文章来自老司机Zhujiang同学的投稿,讲解了Android中如何使用Compose实现下拉刷新和上拉加载的相关内容,相信会对大家有所帮助!同时也感谢作者贡献的精彩文章!

Zhujiang的博客地址:

https://juejin.cn/user/3913917127985240

/   该咋整   /

下拉刷新和上拉加载是很多应用必备的功能,但是我在使用了 Compose 重构应用的时候发现 Compose 没有下拉刷新和上拉加载,这可咋整。。。以前原生提供了 SwipeRefreshLayout ,改一改就直接能用,或者是有那么多的开源库,直接添加下依赖进行使用就可以了,但是现在该咋整。。。

翻了一遍官网给出的一堆 Compose 的样例,在 Jetnews 这个样例中有下拉刷新,不过是自定义的,那么咋整。。。拿过来用啊!传说中的 cv工程师 不就是这样嘛!哈哈哈。

/   开整   /

最终效果

开整之前先来放一下 Github 地址吧,别忘了是 main 分支哦。Github 地址:

https://github.com/zhujiang521/PlayAndroid

看看实现的效果吧:

虽然说不怎么好看,但功能是实现了,????,凑合看吧,不想看实现过程的可以直接去 Github 中下载代码,里面有全部实现的代码。下面来看看是怎么实现的吧!

下拉刷新

我的思路是既然官方的样例中提供了下拉刷新,那么就先看看他是怎么实现的,再根据下拉刷新来实现下上拉加载吧。

这是官方样例的下载地址:

https://github.com/android/compose-samples

先来看看官方下拉刷新的 Composable 的定义:

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun SwipeToRefreshLayout(
    refreshingState: Boolean,
    onRefresh: () -> Unit,
    refreshIndicator: @Composable () -> Unit,
    content: @Composable () -> Unit
) {}

参数很简单对吧,看见名字就大概知道是啥意思了。咱们一个一个来看:

  • refreshingState:刷新状态,为 true 时表示正在刷新,相反则不是正在刷新

  • onRefresh:下拉刷新时需要执行的操作

  • refreshIndicator:直译过来的意思是刷新指示器,但我理解的就是刷新时的控件,也就是上面转圈的 CircularProgressIndicator ,这个可以自己随便放,也可以加一些小动画等等。

  • content:这就是你想刷新的控件内容,没什么可解释的了。

接下来看一下方法体吧:

val refreshDistance = with(LocalDensity.current) { RefreshDistance.toPx() }
val state = rememberSwipeableState(refreshingState) { newValue ->
    if (newValue && !refreshingState) onRefresh()
    true
}

Box(
    modifier = Modifier
        .nestedScroll(state.PreUpPostDownNestedScrollConnection)
        .swipeable(
            state = state,
            anchors = mapOf(
                -refreshDistance to false,
                refreshDistance to true
            ),
            thresholds = { _, _ -> FractionalThreshold(0.5f) },
            orientation = Orientation.Vertical
        )
) {
    content()
    Box(
        Modifier
            .align(Alignment.TopCenter)
            .offset { IntOffset(0, state.offset.value.roundToInt()) }
    ) {
        if (state.offset.value != -refreshDistance) {
            refreshIndicator()
        }
    }

    LaunchedEffect(refreshingState) { state.animateTo(refreshingState) }
}

方法体的代码大概有二十多行,咱们来慢慢分解来看:

val refreshDistance = with(LocalDensity.current) { RefreshDistance.toPx() }

第一行就是将一个固定 dp 值根据像素密度转为像素值,就不多说了。

val state = rememberSwipeableState(refreshingState) { newValue ->
    if (newValue && !refreshingState) onRefresh()
    true
}

那么。。。这个 state 是个啥呢?咱们来看看它的源码:

@Composable
@ExperimentalMaterialApi
fun <T : Any> rememberSwipeableState(
    initialValue: T,
    animationSpec: AnimationSpec<Float> = AnimationSpec,
    confirmStateChange: (newValue: T) -> Boolean = { true }
): SwipeableState<T> {
    return rememberSaveable(
        saver = SwipeableState.Saver(
            animationSpec = animationSpec,
            confirmStateChange = confirmStateChange
        )
    ) {
        SwipeableState(
            initialValue = initialValue,
            animationSpec = animationSpec,
            confirmStateChange = confirmStateChange
        )
    }
}

奥,原来是 SwipeableState ,里面还使用了 rememberSaveable , rememberSaveable 类似于之前说的remember,但是使用保存的实例状态机制,怎么说呢,比如旋转屏幕的时候不会丢掉值,和之前的 onSaveInstanceState 相似。行了,再来看看 rememberSwipeableState 的参数意思吧:

  • initialValue:状态的初始值。

  • animationSpec:用于将动画设置为新状态的默认动画。

  • confirmStateChange:确认或否决状态的变更,上面 rememberSwipeableState 后面的大括号就是它,在 kotlin 中如果最后一个参数是一个函数对象的话可以不写在括号中。

上面的 SwipeableState 就不展开说了,它包含有关任何正在进行的滑动或动画的必要信息,并提供立即或通过启动动画来更改状态的方法。

回到主题吧,先把 state 放在这,下面会用到的。

Box(
    modifier = Modifier
        .nestedScroll(state.PreUpPostDownNestedScrollConnection)
        .swipeable(
            state = state,
            anchors = mapOf(
                -refreshDistance to false,
                refreshDistance to true
            ),
            thresholds = { _, _ -> FractionalThreshold(0.5f) },
            orientation = Orientation.Vertical
        )
) {
    content()
    Box(
        Modifier
            .align(Alignment.TopCenter)
            .offset { IntOffset(0, state.offset.value.roundToInt()) }
    ) {
        if (state.offset.value != -refreshDistance) {
            refreshIndicator()
        }
    }

    LaunchedEffect(refreshingState) { state.animateTo(refreshingState) }
}

这一块大家应该就熟悉了,最外面一个 Box 包裹着布局,Box 相当于 FLutter 中的 Stack ,相当于安卓中的 FrameLayout ,可以实现叠加的效果,先不看 Box 的 modefier ,先看它包裹的内容,里面包裹着咱们传进来的想要进行刷新的控件,然后又放了一个 Box,里面包裹着咱们传进来的刷新指示器,最后执行了 LaunchedEffect ,里面根据刷新状态执行了上面 state 的的动画。

到现在为止基本整个流程走下来了,除了上面 Box 中的 modefier 暂时没说。传进来必要的参数,然后在滑动的时候将刷新指示器展示出来,然后执行刷新的操作,很清晰,但是,是怎么滑动的呢?怎么来控制的呢?这就是上面 Box 中的 modefier 干的事了。

之前一直以为 modefier 就是用来设置一些背景啊、边距值啥的,看了这个之后我发现我想的太简单了,里面的 nestedScroll 竟然还可以修改元素以使其参与嵌套的滚动层次结构,swipeable 是在一组预定义状态之间启用滑动手势。

接下来先来看看 swipeable 吧:

  • state:这里将刚才的 state 传了进去,当检测到滑动时, state 的偏移将使用滑动增量来进行更新

  • anchors:成对的锚点和状态,用于将锚点映射到状态,反之亦然。

  • thresholds:指定状态之间的阈值所在的位置。阈值将用于确定滑动停止时要设置为哪个状态的动画。这表示为lambda,它接受两个状态并以 ThresholdConfig 的形式返回它们之间的阈值。这里要注意的是,状态顺序与滑动方向相对应。

  • orientation:可滑动的方向。

swipeable说完就只剩nestedScroll了,上面所用的PreUpPostDownNestedScrollConnection是一个SwipeableState的扩展方法,咱们来看看究竟干了些什么事:

@ExperimentalMaterialApi
private val <T> SwipeableState<T>.PreUpPostDownNestedScrollConnection: NestedScrollConnection
    get() = object : NestedScrollConnection {
        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
            val delta = available.toFloat()
            return if (delta < 0 && source == NestedScrollSource.Drag) {
                performDrag(delta).toOffset()
            } else {
                Offset.Zero
            }
        }

        override fun onPostScroll(
            consumed: Offset,
            available: Offset,
            source: NestedScrollSource
        ): Offset {
            return if (source == NestedScrollSource.Drag) {
                performDrag(available.toFloat()).toOffset()
            } else {
                Offset.Zero
            }
        }

        override suspend fun onPreFling(available: Velocity): Velocity {
            val toFling = Offset(available.x, available.y).toFloat()
            return if (toFling < 0) {
                performFling(velocity = toFling)
                available
            } else {
                Velocity.Zero
            }
        }

        override suspend fun onPostFling(
            consumed: Velocity,
            available: Velocity
        ): Velocity {
            performFling(velocity = Offset(available.x, available.y).toFloat())
            return Velocity.Zero
        }

        private fun Float.toOffset(): Offset = Offset(0f, this)
        private fun Offset.toFloat(): Float = this.y
    }

哇!代码好长,这都是什么,不着急,慢慢来看,先看方法,实现了 NestedScrollConnection 接口,来看看 NestedScrollConnection 接口有什么东东:

interface NestedScrollConnection {
    fun onPreScroll(available: Offset, source: NestedScrollSource): Offset = Offset.Zero

    fun onPostScroll(
        consumed: Offset,
        available: Offset,
        source: NestedScrollSource
    ): Offset = Offset.Zero

    suspend fun onPreFling(available: Velocity): Velocity = Velocity.Zero

    suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {
        return Velocity.Zero
    }
}

发现这个接口一共有四个方法,那就来分别看看都是干啥的吧:

  • onPreScroll:预滚动事件链,由子控件来调用,以允许父母事先消耗部分拖动事件,参数最后说吧。

  • onPostScroll:滚动完成,当分派(滚动)后代进行消费并通知父控件可以消费的剩下的滚动事件时,就会调用此方法。

  • onPreFling:咱们注意到这是一个有 suspend 关键字的方法,所以只能在协程中进行调用。预发射事件链:当孩子们要发射的时候就会调用此方法,允许父控件拦截并消耗部分初始速度。

  • onPostFling:同样有 suspend 关键字,当完成发射的时候进行调用。

上面说的发射其实就是快速滑动,滚动的话就是慢慢滑,速度不一样。咱们注意到上面参数其实一直是那几个,来看看吧:

  • Offset:不可变的2D浮点偏移量。

  • NestedScrollSource:NestedScrollConnection 中滚动事件的可能来源

  • Velocity:以像素每秒为单位的二维速度。

看完  NestedScrollConnection 接口的几个方法是什么意思之后应该会有点恍然大明白地感觉,上面的 performDrag 和 performFling 是强制手势流外部提供的拖动增量,就是减弱你拖动的能量,根据不同情况拦截事件,嗯,对,这基本就是 PreUpPostDownNestedScrollConnection 的意思了。

我在看这块代码的时候也有点懵,看不太明白的话打印下日志看看基本就知道了。

上拉加载

看完上面的如果理解了的话上拉加载就很简单了,改个值的事,先来看看哪些地方需要改,首先需要改一下刷新指示器的位置吧:

Box(
    Modifier
        .align(Alignment.BottomCenter)  // 修改成 bottom
        .offset { IntOffset(0, loadRefreshState.offset.value.roundToInt()) }
) {
    if (loadRefreshState.offset.value != loadDistance) {
         refreshIndicator()
    }
}

还有就是修改扩展方法中的值了:

@ExperimentalMaterialApi
private val <T> SwipeableState<T>.LoadPreUpPostDownNestedScrollConnection: NestedScrollConnection
    get() = object : NestedScrollConnection {
        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
            val delta = available.toFloat()
            return if (delta > 0 && source == NestedScrollSource.Drag) {
                performDrag(delta).toOffset()
            } else {
                Offset.Zero
            }
        }

        override fun onPostScroll(
            consumed: Offset,
            available: Offset,
            source: NestedScrollSource
        ): Offset {
            return if (source == NestedScrollSource.Drag) {
                performDrag(available.toFloat()).toOffset()
            } else {
                Offset.Zero
            }
        }

        override suspend fun onPreFling(available: Velocity): Velocity {
            val toFling = Offset(available.x, available.y).toFloat()
            return if (toFling > 0) {
                performFling(velocity = toFling)
                available
            } else {
                Velocity.Zero
            }
        }

        override suspend fun onPostFling(
            consumed: Velocity,
            available: Velocity
        ): Velocity {
            performFling(velocity = Offset(available.x, available.y).toFloat())
            return Velocity.Zero
        }
    }

看了代码是不是很简单,只是改了 onPreScroll 和 onPreFling 的返回逻辑,就 OK 了,其它和下拉刷新一摸一样,是不是很简单?哈哈哈

下拉刷新和上拉加载我都分开写了 Composable ,组合起来也写了一个,上面的 gif 图中我就使用的是组合起来的,大家可以按需使用,完整代码在 Github 中都有,别忘了给个 star 啊,????。

回到顶部

这个功能之前 RecyclerView 实现的时候其实挺麻烦的,还需要去添加监听,Compose 实现起来就比较简单了。LazyColum 可以直接控制滚动的位置,来看看官方的样例吧:

@Composable
fun MessageList(messages: List<Message>) {
    val listState = rememberLazyListState()
    // Remember a CoroutineScope to be able to launch
    val coroutineScope = rememberCoroutineScope()

    LazyColumn(state = listState) {
        // ...
    }

    ScrollToTopButton(
        onClick = {
            coroutineScope.launch {
                // Animate scroll to the first item
                listState.animateScrollToItem(index = 0)
            }
        }
    )
}

是不是很简单?只需要一个 animateScrollToItem 方法,如果不需要动画的话使用 scrollToItem 方法即可。来看看实现的效果吧:

这里其实要说一下,如果不使用 listState 的话,就不会记住上次滚动到的地方,所以如果要实时加载数据进行使用的话还是要使用 rememberLazyListState 的。

/   整完了   /

差不多了,今天先整到这里吧,这段时间使用 Compose 真的感觉安卓的编码方式变了,看官方的意思是:如果在老项目中当然可以多个 Activity 和 Fragment 相结合进行使用,但是新项目的话最好使用一个。。。完全颠覆了之前多 Activity 的编程方式,但是历史的车轮一直在往前走,既然性能更好,那为什么不用呢,慢慢尝试吧,我还在慢慢往前走,遇到问题了再写文章继续。

今天先到这里了,有什么问题大家可以在评论区告诉我,别忘了点赞评论关注啊,感激不尽!!!

Github 地址:

https://github.com/zhujiang521/PlayAndroid

推荐阅读:

我的新书,《第一行代码 第3版》已出版!

来来来!一起动手整个性能检测工具吧~

我和 Google 的代码差在哪里?

欢迎关注我的公众号

学习技术或投稿

长按上图,识别图中二维码即可关注

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现类似抖音上下滑动切换视频的功能,可以使用Jetpack Compose中的`LazyColumn`和`Pager`组件。 首先,我们需要准备一些视频数据,可以使用一个包含视频URL的列表: ```kotlin val videos = listOf( "https://example.com/video1.mp4", "https://example.com/video2.mp4", "https://example.com/video3.mp4", // ... ) ``` 然后,我们可以使用`LazyColumn`和`Pager`组件来实现上下滑动和视频切换的功能: ```kotlin LazyColumn { val pagerState = rememberPagerState(pageCount = videos.size) items(count = videos.size) { index -> val videoUrl = videos[index] Pager( state = pagerState, modifier = Modifier.fillMaxWidth(), ) { VideoPlayer(videoUrl) } } } ``` 在上面的代码中,我们首先创建了一个`PagerState`,用于管理视频的切换。然后,我们使用`LazyColumn`组件创建一个垂直滚动列表,每个列表项都是一个`Pager`组件,用于显示一个视频。`Pager`组件的`state`属性绑定了`PagerState`,`modifier`属性设置了组件的宽度为最大,这样视频就可以充满屏幕了。`Pager`组件的内容是一个自定义的`VideoPlayer`组件,用于播放视频。 最后,我们需要实现`VideoPlayer`组件,可以使用`VideoView`和`ExoPlayer`来播放视频。下面是一个简单的`VideoPlayer`组件的实现: ```kotlin @Composable fun VideoPlayer(url: String) { val context = LocalContext.current val videoView = remember { VideoView(context).apply { layoutParams = ViewGroup.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT ) setMediaController(MediaController(context)) setOnPreparedListener(MediaPlayer.OnPreparedListener { mp -> mp.isLooping = true }) } } AndroidView( factory = { videoView }, update = { it.setVideoURI(Uri.parse(url)) it.start() } ) } ``` 在上面的代码中,我们首先使用`remember`来创建一个`VideoView`实例,然后使用`AndroidView`组件将其包装成一个Compose组件。在`AndroidView`组件的`update`块中,我们设置`VideoView`的视频URL并开始播放。这样就可以在`Pager`组件中显示一个视频并自动播放了。 以上就是使用Jetpack Compose实现类似抖音上下滑动切换视频的简单示例。当然,这只是一个基础实现,你还可以根据自己的需求进行扩展和优化。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值