UICollectionViewCell cell高度自适应

2021-01-24 09:50:16

参考地址 关于UICollectionViewCell 高度自适应的问题


进击的KFC: OC实现UICollectionViewCell自适应文字宽度

本来想使用UICollectionView来作为整体的布局,并且不再使用UITableView,但是发现高度不固定的布局,UICollectionView没啥优势呀,至少我没找到好的方法,从网上看的是,要自定义cell,并且继承

preferredLayoutAttributesFittingAttributes

这个,才能实现。

我看比较玛法,还是放弃了。使用UITtableview吧。

哎。


对于UICollectionView各个cell的高度因为内容不同的时候,不能设置固定的size,而如何使其自适应高度,网络上的资料并不是很多,这可能是引起大家还是用tableView比较多一些吧
下面就说一下我的解决方法

在自定义cell中加入如下代码

- (UICollectionViewLayoutAttributes*)preferredLayoutAttributesFittingAttributes:(UICollectionViewLayoutAttributes*)layoutAttributes {
    [self setNeedsLayout];
    [self layoutIfNeeded];
    CGSize size = [self.contentView systemLayoutSizeFittingSize: layoutAttributes.size];
    CGRect cellFrame = layoutAttributes.frame;
    cellFrame.size.height= size.height;
    layoutAttributes.frame= cellFrame;
    return layoutAttributes;}

当然你必须已经在cell中加了相应的约束,并且需要在layout中设置estimatedItemSize,设置的estimatedItemSize的width和约束的宽度最好一致。

这种方法对于同一种cell没什么问题了,但若是多种cell,比如第一个是整个屏幕的宽度,而其他的是屏幕宽度的一半或其他尺寸,你需要在每个cell中加上如上方法,然后使其左对齐(或者右对齐 居中)。对齐方法有很多,可以参考这个  demo

这个问题以前解决过,现在有人问到我,发现自己也记得不是很清楚,特此记录一下。



  • 2020-02-22 17:45:43

    tweenjs简单快速学习

    tweenjs 是使用 JavaScript 中的一个简单的补间动画库,支持数字、对象的属性和 CSS 样式属性的赋值。 tweenjs 以平滑的方式修改元素的属性值,需要传递给 tween 要修改的值、动画结束时的最终值和动画花费时间(duration),之后 tween 引擎就可以计算从开始动画点到结束动画点之间值,从而产生平滑的动画效果。

  • 2020-02-22 17:47:12

    easeJs入门学习教程

    createjs中包含以下四个部分: EaselJS:用于 Sprites、动画、向量和位图的绘制,创建 HTML5 Canvas 上的交互体验(包含多点触控) TweenJS:用于做动画效果 SoundJS:音频播放引擎 PreloadJS:网站资源预加载

  • 2020-02-22 17:54:59

    最新FullCalendar中文文档

    Fullcalendar是一款用来管理日程安排、工作计划的日历工具,它功能非常强大而且非常实用。而目前网络上没有很好的中文文档,为了更好的和大家分享Fullcalendar的相关使用,即日起计划将Fullcalendar的英文文档翻译成中文版。

  • 2020-02-22 17:57:05

    nuxtjs支持api接口,serverMiddleware

    Who can’t relate to this: You’ve built a small portfolio page for someone, maybe a company, a friend or yourself. And the only API endpoint you’d need is one for a form. What now? Scaffolding a new service just for this one endpoint?

  • 2020-02-22 17:59:34

    FullCalendar插件的基本使用带详细配置翻译

    前段时间,一直在开发考勤系统,当时为满足设计的需求,选了好几个插件,最后决定采用Fullcanlendar的插件。感觉这个插件可以满足现阶段的功能开发需求

  • 2020-02-22 18:03:10

    Vue组件中使用Sass或者Less全局变量

    本文以Sass做案例,Less的参考,基本配置大同小异。 假如我们有一个Sass的全局变量common.scss文件,路径 ../style/common.scss 代码如下:

  • 2020-02-23 23:27:26

    Nuxt.js 基础入门教程

    Nuxt.js 就是一个极简的 vue 版的 ssr 框架。基于它,我们可以快速开发一个基于 vue 的 ssr 单页面应用。

  • 2020-02-24 18:36:17

    百度地图做电子围栏总结

    需求:在地图上画出围栏,设置围栏信息后保存,生成围栏列表。全选时,地图视野可看到全部的围栏区域,单独勾选会调整地图视野到当前勾选的围栏。围栏区域的中心点要显示围栏名称。