Compose中实现原生TabView+ViewPager的效果

简介: Compose中实现原生TabView+ViewPager的效果

前言


首先一个问题ScrollableTabRowHorizontalPager是什么?

答:ScrollableTabRow相当于View体系中的TabViewHorizontalPager相当于View体系中的ViewPager。这么说很明了了吧,哈哈。


导入依赖


Pager需要导入依赖如下:

implementation "com.google.accompanist:accompanist-pager:0.18.0"
复制代码


用法介绍


val datas = remember {
        mutableStateListOf("香蕉", "苹果", "芒果", "萝卜", "咖啡")
    }
    val state = rememberPagerState(pageCount = datas.size,
        initialPage = 0,//初始页码
        infiniteLoop = true,//是否循环效果
        initialOffscreenLimit = 1//预加载页数
    )
    val scope = rememberCoroutineScope()
    Column {
        ScrollableTabRow(selectedTabIndex = state.currentPage,//展示的页码,和Pager的保持一致
            backgroundColor = Color.Green) {
            datas.forEachIndexed { index, data ->
                Box(
                    Modifier
                        .height(40.dp)
                        .width(100.dp)
                        .clickable {
                            scope.launch {
                                state.scrollToPage(index, 0f)//Tab被点击后让Pager中内容动画形式滑动到目标页
                            }
                        }, contentAlignment = Alignment.Center) {
                    Text(text = data)
                }
            }
        }
        HorizontalPager(state = state,//Pager当前所在页数
            modifier = Modifier.height(300.dp)) { pagePosition ->
            Log.e("tag", "加载页码$pagePosition")
            val color = (0..255)
            Box(
                Modifier
                    .fillMaxSize()
                    .background(Color(color.random(), color.random(), color.random())),
                contentAlignment = Alignment.Center) {
                Text(text = datas[pagePosition])
            }
        }
    }
复制代码


扩展


Pager库中还有VerticalPager用来实现垂直的Banner。

ScrollableTabRow还有配套的不可滑动的TabRow实现固定的Tab效果。


效果


image.png

git:github.com/ananananzhu…



目录
打赏
0
0
0
0
4
分享
相关文章
Jetpack-Compose 学习笔记(三)—— Compose 的自定义“View”(下)
Jetpack-Compose 学习笔记(三)—— Compose 的自定义“View”(下)
217 0
安卓Jetpack Compose+Kotlin, 使用ExoPlayer播放多个【远程url】音频,搭配Okhttp库进行下载和缓存,播放完随机播放下一首
这是一个Kotlin项目,使用Jetpack Compose和ExoPlayer框架开发Android应用,功能是播放远程URL音频列表。应用会检查本地缓存,如果文件存在且大小与远程文件一致则使用缓存,否则下载文件并播放。播放完成后或遇到异常,会随机播放下一首音频,并在播放前随机设置播放速度(0.9到1.2倍速)。代码包括ViewModel,负责音频管理和播放逻辑,以及UI层,包含播放和停止按钮。
Jetpack Compose中ViewModel、Flow、Hilt、Coil的使用
Jetpack Compose中ViewModel、Flow、Hilt、Coil的使用
1559 0
Jetpack Compose中ViewModel、Flow、Hilt、Coil的使用
Compose:从重组谈谈页面性能优化思路,狠狠优化一笔
Compose:从重组谈谈页面性能优化思路,狠狠优化一笔
532 0
在 Compose 中使用 Jetpack 组件库
在 Compose 中使用 Jetpack 组件库
746 0
Android Compose——ScrollableTabRow和LazyColumn同步滑动
Android Compose——ScrollableTabRow和LazyColumn同步滑动
512 0
kotlin安卓开发JetPack Compose 如何使用webview 打开网页时给webview注入cookie
在Jetpack Compose中使用WebView需借助AndroidView。要注入Cookie,首先在`build.gradle`添加WebView依赖,如`androidx.webkit:webkit:1.4.0`。接着创建自定义`ComposableWebView`,通过`CookieManager`设置接受第三方Cookie并注入Cookie字符串。最后在Compose界面使用这个自定义组件加载URL。注意Android 9及以上版本可能需要在网络安全配置中允许第三方Cookie。
1217 0
Android原生TabLayout使用全解析,看这篇就够了
Android原生TabLayout使用全解析,看这篇就够了
2198 0
Android原生TabLayout使用全解析,看这篇就够了

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问