这又是一篇关于语法根底的文章,主要讲的是关于Compose里边的手势操作api怎样运用,因为在这之前,咱们都用惯了传统Android里边的手势操作api,比方setOnClickListener,setOnTouchListener等等,而在Compose里边,假如不去了解下这个新的UI系统下如何去处理手势操作,一旦想要去完成一些涉及到与屏幕进行交互的功用的时分,你会发现完成起来很困难或许无从下手

点击操作

点击操作应该是运用的最频繁的操作,最常见是便是点击一个按钮来完成一段逻辑处理,比方现在屏幕上有一个按钮,咱们要完成点击这个按钮然后在它的上方显现一段案牍,再点击一次就把这个案牍隐藏,咱们一般会这样完成

讲一些Compose里面已经被做好的手势操作

有一个变量showTips,用它来控制一段案牍是否显现,默认是不展示的,而在咱们Button组件里边通过onClick特点就能够设置按钮的点击事情,当点击按钮时分,改动showTips的值,然后触发Composable函数重组而且再去判别是否展示案牍,逻辑很简略,完成作用如下

讲一些Compose里面已经被做好的手势操作

可是并不是一切组件都有onClick特点的,莫非只能在Button上设置点击事情吗,当然不是,咱们将界面上的按钮换成一个Box试试看

讲一些Compose里面已经被做好的手势操作

Box里边只要一个Modifier参数,没有onClick特点,那么咱们假如想要给Box设置点击事情,只能从Modifier下手,然后确实发现它有供给一个clickable函数,这个函数里边就有一个onClick特点来处理点击事情

讲一些Compose里面已经被做好的手势操作

所以咱们来改动下咱们的比方,来给Box设置一个点击事情

讲一些Compose里面已经被做好的手势操作

到达的作用也是一样的

讲一些Compose里面已经被做好的手势操作

复合点击操作

当然咱们除了点击操作以外,还会经常遇到双击操作,长按操作,这两个操作连同方才咱们说的点击操作都能够运用Modifier供给的combinedClickable函数一起完成,咱们看下这个函数供给的参数都有哪些

讲一些Compose里面已经被做好的手势操作

咱们看到不但有onClick,还有onLongClickonDoubleClick特点,也便是combinedClickable能够一起满意这三种操作,咱们将方才的比方更改一下试试看这个函数

讲一些Compose里面已经被做好的手势操作

这次咱们将案牍常驻在方块上面,在蓝色方块上别离执行点击,双击以及长按操作,而且在操作之后给案牍赋予不同的值,作用如下

讲一些Compose里面已经被做好的手势操作

拖拽操作

咱们在Modifier的操作符里边还能看到这样一个draggable函数,这个函数通常都是拿来进行一些简略的横向或许纵向拖拽操作的,咱们看下draggable都需求传哪些参数

讲一些Compose里面已经被做好的手势操作

咱们看到必传的有两个,别离是DraggableStateOrientation,后者很明显,便是界说这个拖拽详细是横向仍是纵向的,而DraggableState它是要传一个拖拽状况,比方记载当时拖拽的位移,咱们接下去就在蓝色小方块上完成个拖拽功用

讲一些Compose里面已经被做好的手势操作

这边运用了rememberDraggableState函数创立了一个DraggableState实例,而且实时更新offsetX值即小方块的位移,在Box里边,咱们将offsetX更新到Modifier.offset函数中,并将创立好的DraggableState实例传给draggable函数,咱们的拖拽功用就完成了,作用如下

讲一些Compose里面已经被做好的手势操作

这儿要留意一点的是,由于Modifier操作符的调用次序,offset函数必须在draggable之前调用,否则拖拽是不生效的,究竟拖拽的时分假如不知道位移,那肯定不动啊,刚刚在看draggable函数的时分,有两个参数引起了我的留意,便是onDragStartedonDragStopped,这俩参数都是挂起函数类型,并供给了一个协程作用域,也便是说能在拖拽开端和拖拽完毕的时分进行一些耗时操作,比方网络恳求,那么咱们能够做一个类似于下拉刷新的作用出来,首要将咱们的方才的布局改一下,改成最外层是一个帧布局,里边是俩布局叠加在一起

讲一些Compose里面已经被做好的手势操作

offsetY是笔直方向上的位移,max是笔直上能够移动的最大距离,现在准备给Spacer设置一个突变布景,而且在拖拽完毕后让这个突变布景的色彩次序时间发生改变并维持一段时间,咱们先将突变布景需求的色彩创立出来

讲一些Compose里面已经被做好的手势操作

reverse是一个布尔值,true的时分让colorList的次序更改一下,false的时分再变回来,咱们将这一段逻辑用来给Spacer做突变色

讲一些Compose里面已经被做好的手势操作

现在咱们在拖拽完毕的地方创立一个Flow,在上游每200毫秒就在下游改动一下reverse的值,两秒钟今后让拖拽位移复原到初始方位,代码如下

讲一些Compose里面已经被做好的手势操作

终究作用如下

讲一些Compose里面已经被做好的手势操作

滑动操作

咱们运用swipeable操作符来完成组件的滑动作用,与draggable不同的是,swipeable通过设置锚点值来完成组件的吸附作用,这儿就运用swipeable来完成一个开关控件,首要来看下swipeable都需求传哪些参数

讲一些Compose里面已经被做好的手势操作

能够看到必传的参数有

  • state:是一个SwipeableState,能够记载当时的偏移数据
  • anchors:锚点,用来记载不同滑动数据对应的状况
  • orientation:滑动方向
  • thresholds:不同锚点之间的临界值

知道了需求的参数,那咱们现在将它们逐一创立出来

讲一些Compose里面已经被做好的手势操作

首要创立滑块巨细,要用它来核算咱们整个控件的巨细,还有状况间的切换,然后再创立个SwipeableState,而且设置初始值为start,然后再是咱们的锚点,是一个map,而且界说两种滑动距离所对应的状况,滑块布局的代码如下

讲一些Compose里面已经被做好的手势操作

布局便是两个Box之间的嵌套,里边的Box便是咱们的滑块,咱们的滑块里边就运用了swipeable操作符,除了设置了刚刚设置的SwipeableState与锚点,还设置了临界值threholds,当时状况假如是start,也便是滑块在左面的时分,滑动距离在整个父布局的百分之三十以内都归于start状况,也便是假如松手了,滑块会自动吸附值0f的方位,反之,假如滑块的end状况,假如滑动距离不超过百分之五十,假如松手之后,滑块又回自动吸附值布局最右边,咱们看下作用是不是这样

讲一些Compose里面已经被做好的手势操作

多点触控

在日常生活当中,多点触控这样的操作多数是在阅读图片,网页或许地图之类的场景下被用到,而在Compose中,多点触控是通过transformable操作符来完成,咱们看下运用transformable需求哪些参数

讲一些Compose里面已经被做好的手势操作

咱们看到只要一个必传参数TransformableState,这个是用来获取多点触控时分方针组件巨细,位移,旋转视点改变情况的,咱们能够运用它来完成对一张图片进行双指拖动,缩放和旋转事情

讲一些Compose里面已经被做好的手势操作

首要咱们创立三个变量,别离表示图片的位移,旋转视点以及巨细,然后咱们创立一个Transformable实时更新这三个变量的值

讲一些Compose里面已经被做好的手势操作

咱们运用rememberTransformableState函数创立了一个TransformableState对象,现在能够将这三个变量赋值给咱们的图片了,代码如下

讲一些Compose里面已经被做好的手势操作

咱们看到了别离将刚刚创立的三个变量带入到了rotate,offset,scale函数里去,这儿的次序要留意一下,offset不要比rotate调用的早,这会导致旋转后的终究方位不行预期,咱们看下作用

讲一些Compose里面已经被做好的手势操作

刚刚咱们在看transformable函数的参数的时分,还有个参数是lockRotationOnZoomPan,默认值是false,这个是干嘛的呢?注释上有解说,这个参数的意思是假如设置为false,那么多点触控的时分将会一起监听双指拖动,缩放以及旋转,可是假如设置为true的时分,除非旋转动作比其他两个动作先执行,这样会被监听到,否则的话,只会监听双指拖动和缩放动作,旋转事情将不会被监听,咱们来试一下,将上述代码的lockRotationOnZoomPan设置为true

讲一些Compose里面已经被做好的手势操作

再来看下作用如何

讲一些Compose里面已经被做好的手势操作

咱们看到了这次先进行缩放动作,这个时分不管怎样再去转动图片,图片也都不会再改动旋转视点了,这也刚好满意图片预览的需求,究竟预览图片时分也都不需求去旋转图片

总结

通过这篇文章对这几个关于手势操作的函数的了解,今后再去处理一些简略的手势操作需求就会变得愈加得心应手,这儿讲到的这些手势操作是已经被封装好的,尽管用起来便利,可是能够完成的需求范围有限,下一篇会讲到愈加底层的一些手势操作api