Kotlin实现Instagram探索页布局 FlexboxLayout方案失效求解

问题说明 #

使用FlexboxLayout、Spanned实现类社交平台探索页错落网格布局未达预期，当前实现存在错位、留白问题：

• 当前错误效果参考
• 目标实现效果参考
  开发语言为Kotlin，原有实现存在两处核心错误：
• 大尺寸item的位置判断逻辑不符合目标布局的循环规律，导致大图错位
• 未给Flexbox子项配置正确的布局参数，也没有处理网格间距，导致布局留白、挤压

原有代码片段如下：

适配器原有代码

binding.apply {
    Picasso.get().load(exploreList[position].exploreImageUrl).into(ivExplore)
    exploreRecyclerviewLayout.setOnClickListener {
        Toast.makeText(context, "itemNumber = $position", Toast.LENGTH_SHORT).show()
    }


    if (position ==1){
        exploreRecyclerviewLayout.layoutParams.height = (width/3)*2
        exploreRecyclerviewLayout.layoutParams.width = (width/3)*2
    } else if (position>1 && position%8 == 0) {
        exploreRecyclerviewLayout.layoutParams.height = (width/3)*2
        exploreRecyclerviewLayout.layoutParams.width = (width/3)*2
    } else {
        exploreRecyclerviewLayout.layoutParams.height = width/3
        exploreRecyclerviewLayout.layoutParams.width = width/3
    }

}

Fragment原有布局管理器配置

val exploreRvLayoutManager = FlexboxLayoutManager(requireContext()).apply {
    flexDirection = FlexDirection.ROW
    justifyContent = JustifyContent.FLEX_START
    flexWrap = FlexWrap.WRAP
}

具体实现步骤 #

1. 先定义基础尺寸常量
   基于屏幕宽度计算单格小图的基础尺寸，提前预留网格间距，避免尺寸计算错误导致换行错位：

   // 可放到 dimens.xml 中统一管理
   val horizontalPadding = 12.dp2px() // RecyclerView左右内边距
   val itemGap = 4.dp2px() // 网格item间距
   val screenWidth = resources.displayMetrics.widthPixels
   val validContentWidth = screenWidth - horizontalPadding * 2
   // 3列布局，2个横向间距，计算单格小图宽高
   val baseItemSize = (validContentWidth - itemGap * 2) / 3
   

   新增dp转px扩展方法，避免尺寸单位错误：

   fun Int.dp2px(): Int = (this * Resources.getSystem().displayMetrics.density + 0.5f).toInt()
   

2. 调整FlexboxLayoutManager配置
   关闭子项默认伸缩规则，避免自动改写item尺寸：

   val exploreRvLayoutManager = FlexboxLayoutManager(requireContext()).apply {
       flexDirection = FlexDirection.ROW
       flexWrap = FlexWrap.WRAP
       justifyContent = JustifyContent.FLEX_START
       alignItems = AlignItems.FLEX_START
   }
   
   binding.exploreRv.apply {
       layoutManager = exploreRvLayoutManager
       // 添加item间距装饰
       addItemDecoration(GridGapItemDecoration(itemGap))
   }
   

3. 修正Adapter内item尺寸逻辑
   目标布局以9个item为一个循环单元，循环起始位置为22尺寸大图，其余为11小图，同时给Flexbox子项设置固定尺寸、关闭伸缩：

   binding.apply {
       Picasso.get().load(exploreList[position].exploreImageUrl).into(ivExplore)
       exploreRecyclerviewLayout.setOnClickListener {
           Toast.makeText(context, "itemNumber = $position", Toast.LENGTH_SHORT).show()
       }
   
       val lp = exploreRecyclerviewLayout.layoutParams as FlexboxLayoutManager.LayoutParams
       // 大图位置判断：每9个item的第一个为跨2行2列的大图
       val isLargeItem = position % 9 == 0
       if (isLargeItem) {
           lp.width = baseItemSize * 2 + itemGap
           lp.height = baseItemSize * 2 + itemGap
       } else {
           lp.width = baseItemSize
           lp.height = baseItemSize
       }
       // 禁止子项自动伸缩，固定尺寸
       lp.flexGrow = 0f
       lp.flexShrink = 0f
       exploreRecyclerviewLayout.layoutParams = lp
   }
   

4. 实现网格间距装饰类
   统一处理item边距，避免手动给item设置margin导致的尺寸计算偏差：

   class GridGapItemDecoration(private val gap: Int) : RecyclerView.ItemDecoration() {
       override fun getItemOffsets(
           outRect: Rect,
           view: View,
           parent: RecyclerView,
           state: RecyclerView.State
       ) {
           outRect.right = gap
           outRect.bottom = gap
           val itemLp = view.layoutParams as FlexboxLayoutManager.LayoutParams
           // 每行最后一个item去掉右侧间距
           if (itemLp.flexItemPositionInLine % 3 == 2) {
               outRect.right = 0
           }
       }
   }
   

优化注意点 #

• 图片加载时给ImageView设置scaleType="centerCrop"，保证图片填充不变形，不要开启adjustViewBounds避免覆盖固定宽高
• 如果需要调整大图位置，只需要修改isLargeItem的判断逻辑即可，不需要改动整体布局规则
• 尺寸计算时必须把间距值计入大图宽高，否则会出现大图右侧、下侧的小项错位问题

内容的提问来源于stack exchange，提问作者Masoud Mousavi