阅读 2129
Jetpack Compose - Accompanist 组件库

Jetpack Compose - Accompanist 组件库

写在最前面,本篇文章只是挑了大部分功能写出来,当然里面也有我们针对的部分知识点扩展介绍.
更多使用介绍可以去: Accompanist官方原文的,请看如下链接地址👇👇
google.github.io/accompanist…

官方文档的原文介绍:

Accompanist is a group of libraries which aim to supplement Jetpack Compose with features which are commonly required by developers, but not yet available.

👆👆看不懂不要紧,目前我觉得它只是一个帮助大家过渡Compose的库,未来这个库可能会被谷歌废弃.
👇👇下面也是官方介绍的原话:

Future?
Any of the features available in this group of libraries may become obsolete in the future, at which point they will (probably) become deprecated.

个人觉得应该会像以前android的support 升级到 appcompat 再到后来升级到androidX这样慢慢整合的过程

Accompanist目前有哪些功能?

1.1 🖼️ Image loading

目前集成了Coil和Glide的图片加载,依赖如下:

//按需选择自己喜欢的
implementation "com.google.accompanist:accompanist-glide:<version>"
implementation "com.google.accompanist:accompanist-coil:<version>"
复制代码

举个简单的用法示例:

//Glide的用法
Image(
    painter = rememberGlidePainter(
        "https://picsum.photos/300/300",
        fadeIn = true
    ),
    contentDescription = null,
)
//Coil用法: 把上面的rememberGlidePainter
//换成rememberCoilPainter就可以看到效果了
//更多扩展用法可以Google或者去官方文档查阅
复制代码

1.2 📐 Insets

我觉得最🐂🍺的地方就是配合键盘互动的地方,使用Compse之后,只需要使用到几个关键代码就可以搞定,非常滴银杏👍👍👍

1.需要注意的是:列表手势滑动控制键盘动画目前任然需要:API 30+ 的设备上运行时有效;
2.点击文本输入框,API 21+的设备键盘弹出来任然有动画跟随;
3.手势的话,不生效,需要API 30+;
4.(目前列表滑动不稳定,体验不好,用Redmi k30手机测试的时候,发现图片已经加载了,在列表底部进行滑动操作的时候会出现图片闪的问题);


列表滑动到底部,拉出键盘动画
//需要先依赖这两个libary
implementation "com.google.accompanist:accompanist-insets:<version>"
implementation "com.google.accompanist:accompanist-systemuicontroller:<version>"
复制代码

第一步:通知视窗,我们(应用)会处理任何系统视窗(而不是 decor)

WindowCompat.setDecorFitsSystemWindows(window, false)
复制代码

第二步:为了效果好看,可以用rememberSystemUiController将系统栏(sb和nav)背景设置为透明(不设置也阔以,不影响)

val systemUiController = rememberSystemUiController()
val useDarkIcons = MaterialTheme.colors.isLight
systemUiController.setSystemBarsColor(Color.Transparent, darkIcons = useDarkIcons)
复制代码

第三步:启用动画插图的支持

ProvideWindowInsets(windowInsetsAnimationsEnabled = true) {
   mainContent()
}
复制代码

第四步:允许手势滚动组件拉/推 IME 打开/关闭键盘

通过NestedScrollConnection返回的内置实现来实现的rememberImeNestedScrollConnection()
注意:此功能仅在 API 30+ 的设备上运行时有效。

//简单的一个例子,核心代码如下:
@Composable
private fun mainContent() {
    Scaffold(
        topBar = {
            TopAppBar(....)
        },
        bottomBar = {
            Surface(elevation = 1.dp) {
                val text = remember { mutableStateOf(TextFieldValue()) }
                OutlinedTextField(
                    //省略其他属性定义,自己设置,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(horizontal = 16.dp, vertical = 8.dp)
                        //👇👇todo:注意这个方法:👇👇
                        //它的意思是:键盘向上时自动添加填充
                        .navigationBarsWithImePadding()
                        //👆👆-----------------👆👆
                )
            }
        },
        modifier = Modifier.fillMaxSize()
    ) { contentPadding ->
        Column {
            LazyColumn(
                contentPadding = contentPadding,
                modifier = Modifier
                    .weight(1f)
                    .nestedScroll(connection = rememberImeNestedScrollConnection())
            ) {
                items(传入数据集合) {
                   //item......
                }
            }
        }
    }
}
复制代码

这样就可以让你的键盘和界面互动起来了,非常的银杏😍😍😍
官方键盘互动Demo:ImeAnimationSample

Modifier.navigationBarsWithImePadding:键盘向上时自动添加填充


navigationBarsWithImePadding含义

1.3 🍫 System UI Controller

用于更新 Jetpack Compose 中的系统 UI 栏颜色

implementation "com.google.accompanist:accompanist-systemuicontroller:<version>"
复制代码

简单示例代码如下:

val systemUiController = rememberSystemUiController()
val useDarkIcons = MaterialTheme.colors.isLight
SideEffect {
   //设置状态栏背景色为透明,状态栏图标颜色是黑色
   systemUiController.setStatusBarColor(
        color = Color.Transparent,
        darkIcons = true
    )
}
复制代码

1.4 📖 Pager

一个为 Jetpack Compose 提供分页布局的库,类似于 Android 的 ViewPager
功能太强大了,直呼6666666,包括Banner轮播图我们都可以借助它来实现

implementation "com.google.accompanist:accompanist-pager:<version>"
//如果需要用指示器的话,请添加下方的依赖
implementation "com.google.accompanist:accompanist-pager-indicators:<version>"
复制代码

详细使用细节介绍:Accompanist Pager

1.5 🌊 Flow layouts

与标准的Row和Column可组合的不同,如果这些子项超过可用空间,它们会跨多行/多列布局

FlowRow {
    //包裹compose控件,从左往右布局排列,超出屏幕内容,自动换行显示
}

FlowColumn {
// 包裹compose控件:将其子项置于垂直流中的可组合项。
// 与 Column 不同的是
// 如果『垂直空间太小』而无法将所有子项放在一列中,则可以使用多列(一行显示)
// 如果『用的是verticalScroll包裹』,那么FlowColum只会(一列显示)
}
复制代码

垂直方向不能滚动,高度不能超过一屏
Column{
   Text(text = "无任何修饰的Column包裹")
   //FlowRow子view瀑布流的排版显示
   //FlowColum子view超出屏幕,在一行显示多列
   ShowFlowLayout()
}

@Composable
fun ShowHorizontalPager(){
        Text(text = "FlowRow")
        FlowRow {
            Image(..)
            //随便添加2-3个保证下面的能显示在屏幕内
        }
        Text(text = "FlowColumn")
        FlowColumn(modifier = Modifier
            .fillMaxWidth()
            //保证超出屏幕之后能横向滑动
            .horizontalScroll(rememberScrollState())) {
            Image(..)
            //省略几百个....
        }
    }
复制代码

垂直方向可以滚动,高度能超过一屏
Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    Text(text = "Modifier.verticalScroll修饰的Column包裹")
    //FlowRow子view瀑布流的排版显示
    //FlowColumn子view只会在一列显示,不会并排显示
    ShowFlowLayout()
}
复制代码

1.6 🎨 AppCompat Theme Adapter

可以在Jetpack Compose 中重用AppCompat XML 主题进行主题化

该库试图弥补AppCompat XML 主题与Jetpack Compose 中的主题之间的差距,允许你的可组合MaterialTheme基于Activity的 XML 主题:

AppCompatTheme {
    // MaterialTheme.colors, MaterialTheme.shapes, MaterialTheme.typography
    // will now contain copies of the context's theme
}
复制代码

当一次迁移现有应用程序、片段(或其他 UI 容器)时,还是挺方便的。
AppCompat Compose文档

1.7 ⬆️ Swipe To refresh

下拉刷新用法如下:

val viewModel: MyViewModel = viewModel()
val isRefreshing by viewModel.isRefreshing.collectAsState()
SwipeRefresh(
    state = rememberSwipeRefreshState(isRefreshing),
    onRefresh = { viewModel.refresh() },
) {
    LazyColumn {
        items(30) { index ->
            // TODO: list items
        }
    }
}
复制代码

下拉刷新文档

文章分类
Android