技术探索:开源分享 - 在Jetpack Compose中实现iOS丝滑左滑菜单交互设计

背景

最近遇到个需求,jetpack compose中要给列表的item加一个左滑删除菜单,左滑展示一个删除按钮,点击删除item,很简单的需求,然而Google了一圈,只发现了compose自带的SwipeToDismiss和类似的一个开源库me.saket.swipe:swipe比较有用,但是细看不太符合需求,SwipeToDismiss顾名思义就是滑动到某个地方item就会dismiss,不符合要求的swipe后点击再dismiss的需求啊(测试不接受你有啥办法),自己动手呗!!

swipe这个库写得比较简单且支持compose multiplatform,果断在这个库的基础上来修改。

先上成果

少啰嗦,先看东西!觉得有用的话给个star呗~

swipe-like-ios

swipe-like-ios builds composables that can be swiped left or right for revealing actions

groovy 复制代码
// settings.gradle.kts
repositories {
  maven { setUrl("https://www.jitpack.io") }
}

// build.gradle.kts
implementation("com.linversion.swipe:swipe-like-ios:latest-version")
kotlin 复制代码
val archive = SwipeAction(
  icon = rememberVectorPainter(Icons.TwoTone.Archive),
  background = Color.Green,
  onClick = { ... }
)

val replyAll = SwipeAction(
  icon = rememberVectorPainter(Icons.TwoTone.ReplyAll),
  background = Color.Perfume,
  onClick = { println("Reply swiped") }
)
  
val snooze = SwipeAction(
  icon = { Text("Snooze") },
  background = Color.Yellow,
  onClick = { ... },
)

SwipeableActionsBox(
  startActions = listOf(replyAll),
  endActions = listOf(snooze, archive),
  swipeThreshold = 80.dp,
) {
  // Swipeable content goes here.
}

简单介绍一下实现原理

其实很简单,就是在item的左右两边分别用一个Row放置你的菜单(action),给个初始的offsetX,使得菜单刚好不可见,滑动的时候改变ofssetX,每个action平分滑动的空间,直到菜单完全展示后加一个阻尼的效果,完全仿照iOS的实现。

对比之下SwipeToDismiss的原理是在item的底部放一个Row来摆放你的action,滑动的时候就可以看到了。

滑动的监听则都是用Modifier的draggable修饰符,然后给item设置absoluteOffset

kotlin 复制代码
Box(
    modifier = Modifier
      .absoluteOffset { IntOffset(x = offsetX, y = 0) }
      .draggable(
        orientation = Horizontal,
        enabled = !state.isResettingOnRelease,
        onDragStopped = {
          scope.launch {
            state.handleOnDragStopped()
          }
        },
        state = state.draggableState,
      ),
    content = content
  )

后续期望

仔细看了一下,iOS在有些场景也有SwipeToDismiss的效果,并且加了震动效果,后续会考虑拓展加上这个效果。

相关推荐
wrx繁星点点43 分钟前
桥接模式:解耦抽象与实现的利器
android·java·开发语言·jvm·spring cloud·intellij-idea·桥接模式
程序员鱼皮1 小时前
6 年 30k star,这个明星项目停止更新!
计算机·程序员·互联网·github·编程
镰刀出海1 小时前
RN开发环境配置与Android版本app运行
android·react native
Python大数据分析2 小时前
JetPack Compose安卓开发之底部导航Tabbar
android·vue.js·elementui
HyperAI超神经3 小时前
对标Hugging Face?GitHub Models新增OpenAI o1/Llama 3.2等, 新功能支持模型并排比较
人工智能·机器学习·github·llama·huggingface
小华同学ai3 小时前
jsMind:炸裂项目,用JavaScript构建的思维导图库,GitHub上的热门开源项目
javascript·开源·github
DisonTangor3 小时前
GitHub Copilot将支持来自Anthropic、Google和OpenAI的模型
github·copilot
油泼辣子多加3 小时前
2024年10月30日Github流行趋势
github
前期后期3 小时前
Android 在github网站下载项目:各种很慢怎么办?比如gradle下载慢;访问github慢;依赖下载慢
android·github
如果'\'真能转义说3 小时前
从网络到缓存:在Android中高效管理图片加载
android·网络·缓存