AutoLayout下CollectionView的自适应大小(三)

最新推荐文章于 2024-08-29 15:30:56 发布
最新推荐文章于 2024-08-29 15:30:56 发布
阅读量186 收藏
点赞数
文章标签： ui python 移动开发
原文链接：https://my.oschina.net/u/2435827/blog/546853
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

    这里上接这篇文章，经过前期的准备，这里终于开始使用AutoLayout了，有了前面的铺垫这里才显得没那么唐突，好吧，这里先说下故事的背景吧，对于一个View，我们在布局的时候会写死它的大小，可能是（320，240），但是对于不同的屏幕尺寸，这样写显然是不合适的，对于一些简单的布局可以通过autoResizing的方式自动放大，但本例view中包含高度可变的CollectionView较为复杂，autoResizing已经不能满足我们的需求了，所以才转向更为强大的AutoLayout,可以说AutoResizing是AutoLayout的子集，AutoLayout使用起来更为复杂，但对于简单的问题，AutoResizing能够很简单的解决。


开始之前，我们可能还需要回顾下这篇文章，这里限制条件应该加在什么地方是个问题，

加在initWithFrame可以，但加在layoutSubviews中更合适，这样在addSubviews或者frame变化都会引起layoutSubviews的调用，先上一段计算当前布局高度和之前高度差值的函数

- (CGFloat)getRealAnimationViewHeightDt
{
    NSArray* labels = [[MFAppModel sharedObject].chatroomModelEx getFullLabels];
    
    NSInteger lineWidth = 50;
    NSUInteger rowCount = 1;
    for (int i = 1; i < labels.count; ++i) {
        NSArray* labels = [[MFAppModel sharedObject].chatroomModelEx getFullLabels];
        MFRoomLabel* currentRoomLabel = [labels objectAtIndex:i];
        NSDictionary *attribute = @{NSFontAttributeName: [UIFont systemFontOfSize:15]};
        CGSize currentLabelSize = [currentRoomLabel.name sizeWithAttributes:attribute];
        CGFloat cellWidth = MAX(50, currentLabelSize.width + 16);
        lineWidth = lineWidth + 15 + cellWidth;
        if (lineWidth > (self.frame.size.width - 65)) {
            rowCount++;
            lineWidth = cellWidth;
        }
    }

    return (rowCount - 2)*(24 + 10);
}

这里默认rowCount为2，对默认情况计算新的高度差值，来限制布局的大小。

这种代码写在哪里好？虽然是和UI相关的，但这里又夹杂着逻辑的数据，目前IOS开发中ViewController的使用还是比较迷惑，这里到底是放View还是也可以放些和UI相关的数据呢？这种破坏MVC模式的代码到底写在Model层还是View层？以后再讨论吧，这里先说AutoLayout的问题。

    有了这个根据数据和当前屏幕尺寸计算出来的collectionView的dt值，就可以方便的加些约束条件了，这里首先你可以参考下这篇文章，这个例子很简单，都是受到加约束条件的最简单的用法，

下面上我们的代码

[self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_collectionView
                         attribute:NSLayoutAttributeWidth
                         relatedBy:NSLayoutRelationEqual
                         toItem:nil
                         attribute:NSLayoutAttributeWidth
                         multiplier:0
                         constant:self.frame.size.width - 65]];

    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_collectionView
                         attribute:NSLayoutAttributeHeight
                         relatedBy:NSLayoutRelationEqual
                         toItem:nil
                         attribute:NSLayoutAttributeHeight
                         multiplier:0
                         constant:_collectionView.frame.size.height + [self getRealAnimationViewHeightDt]]];
    
    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_mainView
                         attribute:NSLayoutAttributeWidth
                         relatedBy:NSLayoutRelationEqual
                         toItem:self
                         attribute:NSLayoutAttributeWidth
                         multiplier:1
                         constant:0]];
    
    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_mainView
                         attribute:NSLayoutAttributeHeight
                         relatedBy:NSLayoutRelationEqual
                         toItem:nil
                         attribute:NSLayoutAttributeHeight
                         multiplier:0
                         constant:_mainView.frame.size.height + [self getRealAnimationViewHeightDt]]];
    
    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_animationView
                         attribute:NSLayoutAttributeWidth
                         relatedBy:NSLayoutRelationEqual
                         toItem:self
                         attribute:NSLayoutAttributeWidth
                         multiplier:1
                         constant:0]];
    
    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_animationView
                         attribute:NSLayoutAttributeHeight
                         relatedBy:NSLayoutRelationEqual
                         toItem:nil
                         attribute:NSLayoutAttributeHeight
                         multiplier:0
                         constant:_animationView.frame.size.height + [self getRealAnimationViewHeightDt]]];
    
    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_buttonView
                         attribute:NSLayoutAttributeWidth
                         relatedBy:NSLayoutRelationEqual
                         toItem:self
                         attribute:NSLayoutAttributeWidth
                         multiplier:1
                         constant:0]];
    
    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_cancelButton
                         attribute:NSLayoutAttributeWidth
                         relatedBy:NSLayoutRelationEqual
                         toItem:self
                         attribute:NSLayoutAttributeWidth
                         multiplier:0.5
                         constant:0]];
    
    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_cancelButton
                         attribute:NSLayoutAttributeLeft
                         relatedBy:NSLayoutRelationEqual
                         toItem:self
                         attribute:NSLayoutAttributeLeft
                         multiplier:1
                         constant:0]];
    
    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_okButton
                         attribute:NSLayoutAttributeWidth
                         relatedBy:NSLayoutRelationEqual
                         toItem:self
                         attribute:NSLayoutAttributeWidth
                         multiplier:0.5
                         constant:0]];
    
    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_okButton
                         attribute:NSLayoutAttributeRight
                         relatedBy:NSLayoutRelationEqual
                         toItem:self
                         attribute:NSLayoutAttributeRight
                         multiplier:1
                         constant:0]];
    
    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_buttonView
                         attribute:NSLayoutAttributeTop
                         relatedBy:NSLayoutRelationEqual
                         toItem:_lineView
                         attribute:NSLayoutAttributeBottom
                         multiplier:1
                         constant:0]];

    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_sortAndPositionLineView
                         attribute:NSLayoutAttributeWidth
                         relatedBy:NSLayoutRelationEqual
                         toItem:self
                         attribute:NSLayoutAttributeWidth
                         multiplier:1
                         constant:0]];
    
    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_positionAndTagLineView
                         attribute:NSLayoutAttributeWidth
                         relatedBy:NSLayoutRelationEqual
                         toItem:self
                         attribute:NSLayoutAttributeWidth
                         multiplier:1
                         constant:0]];
    
    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_lineView
                         attribute:NSLayoutAttributeWidth
                         relatedBy:NSLayoutRelationEqual
                         toItem:self
                         attribute:NSLayoutAttributeWidth
                         multiplier:1
                         constant:0]];
    
    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_lineView
                         attribute:NSLayoutAttributeTop
                         relatedBy:NSLayoutRelationEqual
                         toItem:_mainView
                         attribute:NSLayoutAttributeBottom
                         multiplier:1
                         constant:0]];
    
    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_buttonLineView
                         attribute:NSLayoutAttributeCenterX
                         relatedBy:NSLayoutRelationEqual
                         toItem:self
                         attribute:NSLayoutAttributeCenterX
                         multiplier:1
                         constant:0]];
    
    [self addConstraint:[NSLayoutConstraint
                         constraintWithItem:_lineView
                         attribute:NSLayoutAttributeWidth
                         relatedBy:NSLayoutRelationEqual
                         toItem:self
                         attribute:NSLayoutAttributeWidth
                         multiplier:1
                         constant:0]];

想想这些约束条件要是加在IB中还能看吗？这也就是说AutoLayout复杂的地方，对于屏幕尺寸变化的情况，里面的所有view都需要根据这个最外层的屏幕尺寸而发生变化，再加上View中又有高度不可控的collectionView，真是约束的不亦乐乎，但回头想想，这也不失为一种解决问题的好办法，有没有更简单的解决问题的方法还有待挖掘，就目前对AutoLayout的理解，只能是这样的实现了

162402_BVI9_2435827.png

这个是不同屏幕尺寸的效果，可以看到，当屏幕分辨率小的时候，collectionView的高度变化，但可以重新布局适应不同屏幕。

转载于:https://my.oschina.net/u/2435827/blog/546853

weixin_34233856
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CollectionView-AutoLayout:具有全宽度垂直流和全高度水平流的收集视图的最小示例
05-10
方法和问题 TL; DR： 第三个选项卡展示了一个非琐碎的基于自动布局的单元格的工作示例，该单元格在单击时会展开，在滑动时会删除单元格，并演示重新插入。 这是一个进行中的测试平台，可以进行各种测试，但是可以在第三个选项卡中使用。 插入后，将EstimatedSize配置为内容的宽度 布局可以工作，但也容易出现集合视图约束中的自动布局警告 更新动画看起来坏了，压缩到顶部并再次返回 需要在单元格上实现systemSizeFitting(..)以指向嵌套的内容 要求集合视图将其估计大小更新为它的实际宽度减去layoutSubviews中的插入，否则将为0（如果在VC的视图中完成加载） 也可以实现流布局的preferredAttributes... ，但这似乎并没有在systemSizeFitting上添加任何值 使用sizeForItemAt。 布局可以正常工作（尽管也遇到了AL警告和错误
AutoLayout下CollectionView的自适应大小(一)
weixin_34008784的博客
12-17 377
2019独角兽企业重金招聘Python工程师标准>>> ...
UICollectionView的高度自适应
热门推荐
ioslingbing的博客
04-14 2万+
estimatedItemSize是iOS 8中苹果最新推出的黑魔法，可以让CollectionView中也能让 cell 自适应内容大小，达到自动适应高度的预期效果！ UICollectionView的高度自适应的原理： 1.CollectionView根据 layout 的 estimatedItemSize 算出估计的 contentSize，有了 contentSize C
iOS 美丽说瀑布流界面纯AutoLayout光速布局
Deft_MKJing的博客
06-18 6869
最近在Github上看到三个库,分别是 GSKStretchyHeaderView,CHTCollectionViewWaterfallLayout ,JZNavigationExtension， 其中第一个是给CollectionView添加可动画的头部，添加方式和内容非常丰富，第二个是 瀑布流布局，第三个是UINavigationController的导航栏扩展。这三个东西厉
UIScrollView(UITableView、UICollectionView)Autolayout横屏frame自动变动
大帅的专栏
01-03 712
描述下问题出现的场景 【1】 ViewControllerA 是竖屏的VC，VC中有一个CollectionView。ViewControllerB是横屏的VC。 【2】跳转方式为 present 通过- (void)scrollViewDidScroll:(UIScrollView *)scrollView查看到，当VCA跳转到VCB的时候，collection view的frame、conte...
iOS tableview里面嵌套tableview，自适应高度
03-15
swift ，使用autolayout + storyboard 最外层tableview列表，cell里面嵌套了tableview，自适应内容，cell里的tableview不可滑动，内容全部显示，且文字分行显示，不用设置cell的高度直接可以自适应内容
ios-自定义headerview，自适应header的高度.zip
07-11
- 如果需要图文混排，可以使用`UILabel`、`UIImageView`等组件，结合AutoLayout设置约束，确保在不同屏幕尺寸下正确显示。 2. **自适应高度**： - 自适应高度通常涉及到计算视图内容的实际高度，这需要实现`...
FriendCricle:微信朋友圈分享的效果，三种自定义Cell、图文混排、自动布局l
06-12
再者，自动布局（AutoLayout）是iOS开发中的一个重要概念，它用于控制视图在屏幕上的位置和大小，尤其是在响应式设计中。`FriendCricle`项目的自动布局应用，确保了Cell的内容能根据设备的屏幕尺寸自适应调整，无论...
IOS课程表Demo
01-23
利用AutoLayout和Size Classes，我们可以确保应用在不同尺寸的设备上都能自适应显示。对于课程表的展示，可以使用TableView或者CollectionView，它们提供了灵活的数据展示方式。 二、数据模型与数据存储 课程表应用...
iOS游戏应用源代码——shawbenWiki-WarGame-f6f748f.zip
07-05
- 使用Storyboard进行界面布局，可能通过AutoLayout实现自适应屏幕尺寸。 - `ViewController`: 视图控制器，处理界面交互，与模型层通信。 - `TableViewCell`或`CollectionViewCell`: 如果存在列表展示，这些类将...
CollectionViewPagingLayout：UICollectionView的简单但高度可自定义的页面布局
02-06
CollectionViewPagingLayout 布局设计师 SnapshotTransformView ScaleTransformView StackTransformView 定制实施 关于 CollectionViewPagingLayout是一个简单但功能强大的工具，用于为UICollectionView制作复杂的布局。 实现非常简单，有一个自定义的UICollectionViewLayout ，使您能够在单元格上应用转换。 没有继承之类的东西。 有关更多详细信息，请参见。 安装 CollectionViewPagingLayout不包含任何外部依赖项。 # Podfile us
AutoLayout下CollectionView的自适应大小(二)
weixin_34234823的博客
12-17 188
2019独角兽企业重金招聘Python工程师标准>>> ...
AutoLabel(自动标签)
DotNeter-Hpf的博客
07-21 2151
AutoLabel 会随着标记控件的位置变化而自动重新定位
UICollectionView 、UItableView 动态改变高度
Red_coralDown的专栏
09-09 1万+
在之前做项目的时候，机会性的将UICollectionView 、UItableView 放在了一个UI视图中展示，并且需要动态布局的那种，在以下代码中，也可以动态计算collection的高度 以下是小八自己简单敲得代码，共读者参考，有任何意见或者建议，都欢迎各位留言，发邮件也可以的哟，小八在此先谢过各位读者啦！^-^  ^-^ 话不多说，直接上代码了哟！！！ //View
Swift 使用SnapKit实现 UICollectionViewCell 高度自适应
Super灬LV
12-19 7174
问题在我们的日常开发中，经常会使用到UICollectionViewCell、UITableViewCell的自适应。解决方案之前的MVC开发中，使用SnapKit 处理UICollectionViewCell 高度自适应的问题后，一直想抽时间整理一下，下面就用部分的代码，解释一下 我这边处理的思路。Controller// // TaskVC.swift // BossClient // //
element-ui 表单Cannot read property ‘indexOf‘ of undefined
最新发布
weixin_42079403的博客
08-29 128
在使用resetField 报错Cannot read property ‘indexOf’ of undefined。
Unity3D UI Toolkit数据动态绑定详解
voidinit的专栏
08-27 1001
在Unity3D中，Compute Shader是一种强大的工具，用于在GPU上执行并行计算任务，这些任务通常涉及大量的数据处理，如图像处理、物理模拟等。然而，由于GPU的并行特性，Compute Shader中的线程（也称为工作项）之间默认是不进行同步的。这意味着每个线程都是独立运行的，且无法直接访问其他线程的数据或执行状态，除非通过特定的机制进行通信。对惹，这里有一个游戏开发交流小组，大家可以点击进来一起交流一下开发经验呀！
WPF框架(Prism 和 Community Toolkit)区别点
Blue
08-29 566
WPF框架(Prism 和 Community Toolkit)区别点
NetSuite 2024.2 学习笔记
NetSuite知识会
08-25 465
24.2已经陆续升级完成，此篇作为我们的学习笔记。
AutoLayout进阶：约束优先级与冲突解决
AutoLayout通过定义一系列的布局约束（NSLayoutConstraint）来决定视图在屏幕上的位置和大小。这些约束可以基于其他视图的位置、屏幕尺寸或者内容大小进行定义。AutoLayout支持在Interface Builder（IB）中通过图形...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值