Jetpack Compose – UI定位

前言

在使用Compose开发过程中，有些场景需要把UI定位到某个位置，使用compose-layer可以轻松实现UI定位功能。

场景一

类似微信会话列表的长按菜单，可以根据长按位置，智能选择有足够空间的地方来展示，我们来实现一下这个功能。

设置LayerContainer容器

首先要设置一个LayerContainer容器用来显示弹出的Layer：

class SampleListMenu : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContent {
         AppTheme {
            
            LayerContainer {
               Content()
            }
         }
      }
   }
}

点击坐标：

@Composable
private fun ListItem(
   modifier: Modifier = Modifier,
   text: String,
   
   onOffset: (IntOffset?) -> Unit,
) {
   val onOffsetUpdated by rememberUpdatedState(onOffset)
   var coordinates: LayoutCoordinates? by remember { mutableStateOf(null) }

   Box(
      modifier = modifier
         .fillMaxWidth()
         .height(50.dp)
         .onGloballyPositioned { coordinates = it }
         .pointerInput(Unit) {
            detectTapGestures {
                
               val offset = coordinates?.localToWindow(it)?.round()
               
               onOffsetUpdated(offset)
            }
         }
   ) {
      Text(text = text, modifier = Modifier.align(Alignment.Center))
      HorizontalDivider(modifier = Modifier.align(Alignment.BottomCenter))
   }
}

ListItem是列表Item，点击时通过LayoutCoordinates计算点击位置相对于Window的坐标，并通知回调对象。

创建TargetLayer

@Composable
private fun Content() {
   
   var attach by remember { mutableStateOf(false) }
   
   var offset: IntOffset? by remember { mutableStateOf(null) }

   LazyColumn(modifier = Modifier.fillMaxSize()) {
      items(100) { index ->
         ListItem(
            text = index.toString(),
            onOffset = {
               
               offset = it
               
               attach = true
            },
         )
      }
   }

   
   TargetLayer(
      
      target = LayerTarget.Offset(offset),
      
      attach = attach,
      
      onDetachRequest = { attach = false },
      
      backgroundColor = Color.Transparent,
      
      detachOnBackPress = true,
      
      detachOnTouchBackground = true,
      
      alignment = TargetAlignment.BottomCenter,
      
      smartAlignments = SmartAliments.Default,
   ) {
      
      Menus {
         attach = false
      }
   }
}

调用TargetLayer创建弹出层，弹出层的内容是Menus菜单组合项，具体代码就不展示了。TargetLayer虽然是在Content组合中创建的，但它的内容实际上是显示在LayerContainer容器中。

上述代码已经实现功能了，代码不多，但参数比较多，下面一一解释：

• attach变量用来控制是否显示Layer，即是否把Layer的内容添加到LayerContainer中，true添加，false移除，把它传给TargetLayer即可

• offset变量用来保存点击的坐标点，即目标点，通过LayerTarget.Offset(offset)构建一个目标传给TargetLayer

• onDetachRequest是请求移除Layer的回调，例如按返回键或者触摸背景区域时回调onDetachRequest，在回调里把attach参数修改为false，即可移除Layer

• detachOnBackPress按返回键是否请求移除Layer，true请求移除；false不请求移除；null不处理返回键事件，默认值true。注意：true和false都会消费本次返回键事件，而null则完全忽略返回键事件，如果设置为null，按下返回键，会继续传播事件

• detachOnTouchBackground触摸背景区域是否请求移除Layer，true请求移除；false不请求移除；null不处理事件，事件会穿透背景，默认值false。由于现在手机屏幕越来越大，可能误触背景区域导致移除Layer，所以默认值是false，可以根据实际需求配置

• alignment可以设置Layer和目标的对齐位置，这里设置为BottomCenter表示显示在目标底部，水平方向和目标中心点对齐，它的默认值是Center中心点对齐

重点来啦，smartAlignments参数是智能对齐目标的意思，只有在alignment参数导致内容溢出时，才会从smartAlignments中按顺序查找内容溢出最小的位置，可以看一下这个类：

@Immutable
data class SmartAliments(
   val aliments: List,
) {
   constructor(vararg array: SmartAliment) : this(array.toList())

   companion object {
      
      val Default = SmartAliments(
         SmartAliment(TargetAlignment.BottomEnd),
         SmartAliment(TargetAlignment.BottomStart),
         SmartAliment(TargetAlignment.TopEnd),
         SmartAliment(TargetAlignment.TopStart),
      )
   }
}

@Immutable
data class SmartAliment(
   
   val alignment: TargetAlignment,
   
   val transition: LayerTransition? = null,
)

可以看到SmartAliments内部实际上只是一个简单的列表，列表项是SmartAliment：

• SmartAliment.alignment要对齐的位置
• SmartAliment.transition该位置对应的动画，默认值是null，会根据对齐位置自动选择合适的动画

SmartAliments.Default配置了4个默认位置，可以根据实际需求创建SmartAliments。

场景二

类似微信朋友圈的点赞和评论菜单，我们来实现一下这个功能。

首先需要在Item布局里面为按钮添加tag，添加之后这个tag对应的按钮就是Layer要定位的目标：

@Composable
private fun ListItem(
   modifier: Modifier = Modifier,
   
   tag: String,
   
   onClick: (String) -> Unit,
) {
   Box(
      modifier = modifier
         .fillMaxWidth()
         .heightIn(200.dp)
   ) {
      IconButton(
         onClick = { onClick(tag) },
         modifier = Modifier.align(Alignment.BottomEnd)
            
            .layerTag(tag)
      ) {
         Icon(Icons.Default.MoreVert, "more")
      }
      HorizontalDivider(modifier = Modifier.align(Alignment.BottomCenter))
   }
}

IconButton是更多按钮，通过Modifier.layerTag为它设置一个tag，在点击的时候回调tag。

创建TargetLayer：

@Composable
private fun Content() {
   
   var attach by remember { mutableStateOf(false) }
   
   var tag by remember { mutableStateOf("") }

   LazyColumn(
      modifier = Modifier
         .fillMaxSize()
         .pointerInput(Unit) {
            
            detectTapGestures(
               onPress = {
                  attach = false
               }
            )
         },
   ) {
      items(100) { index ->
         ListItem(
            tag = index.toString(),
            onClick = {
               
               tag = it
               
               attach = true
            },
         )
      }
   }

   TargetLayer(
      
      target = LayerTarget.Tag(tag),
      attach = attach,
      onDetachRequest = { attach = false },
      backgroundColor = Color.Transparent,
      
      detachOnTouchBackground = null,
      
      alignment = TargetAlignment.StartCenter,
   ) {
      
   }
}

tag变量用来保存Item回调的目标，然后通过LayerTarget.Tag(tag)构建一个目标传递给LayerTarget。

微信朋友圈菜单弹出的时候，列表仍然可以滑动，并且滑动的时候会关闭菜单。可以把detachOnTouchBackground设置为null，让触摸事件就可以穿透背景区域，再通过detectTapGestures监听触摸事件移除Layer即可。

有个细节：列表滑动的时候，更多按钮已经滑走了，而Layer收回动画还在原来的位置，微信的做法是不显示收回动画，直接隐藏菜单。我们也可以通过设置动画来解决这个问题：

TargetLayer(
   ...
   transition = LayerTransition.slideRightToLeft(
      exit = ExitTransition.None
   )
)

LayerTransition.slideRightToLeft会创建从右向左的enter(进入)动画，以及从左向右的exit(退出)动画，只要把exit设置为ExitTransition.None即可关闭退出动画。

@Immutable
data class LayerTransition(
   
   val enter: EnterTransition,
   
   val exit: ExitTransition,
)

场景三

输入框输入一些内容后，下拉框会有建议列表，这也是比较常见的场景，我们来实现一下这个功能。

@Composable
private fun Content() {
   
   var attach by remember { mutableStateOf(false) }

   Column(modifier = Modifier.fillMaxSize()) {
      InputBar(
         
         tag = "abc",
         showPopMenu = {
            
            attach = it
         }
      )
   }

   TargetLayer(
       
      target = LayerTarget.Tag("abc"),
      attach = attach,
      onDetachRequest = { attach = false },
      detachOnTouchBackground = true,
      
      alignment = TargetAlignment.BottomCenter,
      
      clipBackgroundDirection = Directions.Top,
   ) {
      
   }
}

InputBar是一个输入框，给它传递一个tag为"abc"参数，其内部还是通过Modifier.layerTag来为输入框设置tag，上面已经介绍过了这里就不赘述，然后监听输入框的回调showPopMenu是否显示Layer。

最后要把"abc"这个tag也传递给TargetLayer，这样子它才能定位到输入框这个目标。

这里多了一个还没见过的参数：clipBackgroundDirection，它的意思是要裁切Layer哪些方向的背景，设置为Directions.Top表示裁切Layer顶部方向的背景，如果不裁切的话输入框会被背景所遮挡。

Directions支持上下左右4个方向，支持同时裁剪多个方向的背景，如果要同时裁切顶部和底部的话，可以设置为：Directions.Top + Directions.Bottom

有时候需要在对齐目标之后做一些位置微调，例如输入框下面弹出的建议列表往下面挪一点，可以通过以下代码实现：

TargetLayer(
   ...
   
   alignmentOffsetY = TargetAlignmentOffset.PX(200)
) 

alignmentOffsetY表示Y方向偏移，alignmentOffsetX表示X方向偏移，参数类型是TargetAlignmentOffset：

@Immutable
sealed class TargetAlignmentOffset {
   
   data class PX(val value: Int) : TargetAlignmentOffset()

   
   data class DP(val value: Int) : TargetAlignmentOffset()

   
   data class Target(val value: Float) : TargetAlignmentOffset()
}

• TargetAlignmentOffset.PX表示按像素偏移，支持正数和负数，以Y轴为例，大于0往下偏移，小于0往上偏移

• TargetAlignmentOffset.DP表示以dp为单位计算偏移，偏移逻辑和TargetAlignmentOffset.PX一样

• TargetAlignmentOffset.Target表示按目标的大小偏移，支持正数和负数字，以Y轴为例，1表示往下偏移1倍目标的高度，-1表示往上偏移1倍目标的高度

TargetAlignment

我们已经知道可以通过TargetAlignment来设置要对齐的位置，具体都有哪些位置可以看下面的效果图：

TargetLayer vs Layer

这篇文章主要讲的是定位，所以用到的都是TargetLayer，实际上还有一个Layer，它没有定位功能，可以把它当作Compose Dialog来使用：

@Composable
fun Layer(
   attach: Boolean,
   onDetachRequest: (LayerDetach) -> Unit,
   debug: Boolean = false,
   detachOnBackPress: Boolean? = true,
   detachOnTouchBackground: Boolean? = false,
   backgroundColor: Color = Color.Black.copy(alpha = 0.3f),
   alignment: Alignment = Alignment.Center,
   transition: LayerTransition? = null,
   zIndex: Float = 0f,
   content: @Composable LayerContentScope.() -> Unit,
)

• 参数alignment是Compose标准类Alignment，相当于在Box中为UI设置对齐参数
• 参数zIndex可以设置Layer在z轴的层级，值越大显示在越上层

其他参数上面已经介绍过就不赘述了。

不管是TargetLayer还是Layer，最终它的内容都会显示在LayerContainer中，所以外层要设置LayerContainer容器，否则会抛异常。

结束

分享到此为止，如果有问题欢迎一起交流学习，感谢你的阅读。