iOS 比例拼图

关键时刻,第一时间送达!

需求原型图:

要求:

各个模块的大小反映各个模块的占比(销售额),所有模块共同组成一个正方形。

后台返回的数据格式:

注:gross_margin_ratio代表“毛利率”,不是模块的占比。

分析

第一眼看到这个原型图的时候我就觉得不简单,后面和Android一起研究了一下,也没有想到什么好的算法。正巧那天上司跑来问我们有没有什么需要帮忙的,我赶紧把这个问题扔给他。

一周后,他给我说了思路:

每一排放三个,让它们的高度一致。

经他这么一点,这个问题立即就不是问题了(放3个还是放两个通过开方得到最合适的值)。

一排放三个模块,三个一组组成一个矩形,这一组的总面积确定,宽确定,那么高就确定了。高确定,每个模块的面积确定,每个模块的宽也就确定了。至于排版

交给UICollectionView就行了。

实现

效果如下:

核心代码:

完整demo

https://github.com/CaiWanFeng/iOS_Demo

作者:无夜之星辰

https://www.jianshu.com/p/70eec89b71ac

程序员大咖整理发布,转载请联系作者获得授权

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180627B0I7A900?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券