请选择 进入手机版 | 继续访问电脑版

[Android] Android自定义ViewGroup多行多列效果

[复制链接]
查看51 | 回复4 | 2021-9-13 04:15:14 | 显示全部楼层 |阅读模式

本文实例为大家分享了Android自定义ViewGroup多行多列的详细 代码,供大家参考,详细 内容如下

先看下结果 图

每行两个子孩子

Android自定义ViewGroup多行多列效果

每行一个子孩子

Android自定义ViewGroup多行多列效果

实现思绪

自定义viewGroup,实现测量和布局,使控件顺应 业务场景。

测量

根据父控件的宽度,匀称 分给每个子孩子固定的宽度。高度就是行数乘以一个子孩子的高度,再加上清闲 的高度。

根据子孩子个数计算行数  

  1. val rows = if (childCount % perLineChild == 0) {
  2. childCount / perLineChild
  3. } else {
  4. childCount / perLineChild + 1
  5. }
复制代码

代码示例

  1. override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
  2. val width = MeasureSpec.getSize(widthMeasureSpec)
  3. for (i in 0 until childCount) {
  4. val child: View = getChildAt(i)
  5. if (child.visibility != GONE) {
  6. val lp = child.layoutParams
  7. val childWidthMeasureSpec = getChildMeasureSpec(
  8. widthMeasureSpec,
  9. 0, (width - (perLineChild - 1) * space) / perLineChild
  10. )
  11. val childHeightMeasureSpec = getChildMeasureSpec(
  12. heightMeasureSpec,
  13. 0, lp.height
  14. )
  15. child.measure(childWidthMeasureSpec, childHeightMeasureSpec)
  16. }
  17. }
  18. val rows = if (childCount % perLineChild == 0) {
  19. childCount / perLineChild
  20. } else {
  21. childCount / perLineChild + 1
  22. }
  23. if (childCount > 0) {
  24. setMeasuredDimension(
  25. width,
  26. getChildAt(0).measuredHeight * rows + (rows - 1) * space
  27. )
  28. }
  29. }
复制代码

布局

必要 注意 摆放的次序 和位置,每行摆放固定的个数,达到个数之后换行继续摆放

代码示例 

  1. override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
  2. var left = l
  3. var top = t
  4. children.forEachIndexed { index, view ->
  5. if (index % perLineChild == 0) {
  6. left = 0
  7. if (index != 0) {
  8. top += view.measuredHeight
  9. top+=space
  10. }
  11. view.layout(left, top, view.measuredWidth + left, top + view.measuredHeight)
  12. } else {
  13. view.layout(left, top, view.measuredWidth + left, top + view.measuredHeight)
  14. }
  15. left += view.measuredWidth
  16. left += space
  17. }
  18. }
复制代码

完备 代码

  1. class MultiLineViewG @JvmOverloads constructor(
  2. context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
  3. ) : ViewGroup(context, attrs, defStyleAttr) {
  4. var perLineChild = 2
  5. /**
  6. * 子孩子之间的空隙
  7. */
  8. var space = 10
  9. override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
  10. val width = MeasureSpec.getSize(widthMeasureSpec)
  11. for (i in 0 until childCount) {
  12. val child: View = getChildAt(i)
  13. if (child.visibility != GONE) {
  14. val lp = child.layoutParams
  15. val childWidthMeasureSpec = getChildMeasureSpec(
  16. widthMeasureSpec,
  17. 0, (width - (perLineChild - 1) * space) / perLineChild
  18. )
  19. val childHeightMeasureSpec = getChildMeasureSpec(
  20. heightMeasureSpec,
  21. 0, lp.height
  22. )
  23. child.measure(childWidthMeasureSpec, childHeightMeasureSpec)
  24. }
  25. }
  26. val rows = if (childCount % perLineChild == 0) {
  27. childCount / perLineChild
  28. } else {
  29. childCount / perLineChild + 1
  30. }
  31. if (childCount > 0) {
  32. setMeasuredDimension(
  33. width,
  34. getChildAt(0).measuredHeight * rows + (rows - 1) * space
  35. )
  36. }
  37. }
  38. override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
  39. var left = l
  40. var top = t
  41. children.forEachIndexed { index, view ->
  42. if (index % perLineChild == 0) {
  43. left = 0
  44. if (index != 0) {
  45. top += view.measuredHeight
  46. top+=space
  47. }
  48. view.layout(left, top, view.measuredWidth + left, top + view.measuredHeight)
  49. } else {
  50. view.layout(left, top, view.measuredWidth + left, top + view.measuredHeight)
  51. }
  52. left += view.measuredWidth
  53. left += space
  54. }
  55. }
  56. }
复制代码

以上就是本文的全部内容,盼望 对大家的学习有所帮助,也盼望 大家多多支持脚本之家。


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

avatar 想出轨逗 | 2021-10-4 09:49:35 | 显示全部楼层
admin楼主,我告诉你一个你不知道的的秘密,有一个牛逼的网站,运动刷步数还是免费刷的,QQ和微信都可以刷,特别好用。访问地址:http://yd.mxswl.com 猫先森网络
回复

使用道具 举报

avatar 什么大师特 | 2021-10-8 20:22:27 | 显示全部楼层
论坛人气好旺!
回复

使用道具 举报

avatar 陈嘉凯 | 2021-10-9 07:24:03 | 显示全部楼层
刚看见一个妹子,很漂亮!
回复

使用道具 举报

admin楼主主机很热情啊!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则