Loading [MathJax]/jax/output/CommonHTML/config.js
社区首页 >问答首页 >在布局过渡中调整UICollectionView单元格内容的大小/缩放

在布局过渡中调整UICollectionView单元格内容的大小/缩放
EN

Stack Overflow用户
提问于 2014-03-25 07:08:42
回答 1查看 4.7K关注 0票数 3

我正在尝试从https://github.com/hebertialmeida/HAPaperViewControllerhttps://github.com/wtmoose/TLLayoutTransitioning转换示例项目的CollectionViewLayout,我不知道如何在小布局和大布局之间自动调整单元格内容的大小。

例如,我在CollectionViewCell中有一个UILabel,它应该是定义(固定)位置的单元格宽度的一半。当完成到大布局的转换时,标签也应该是单元格的一半(相同的相对位置),但具有更大的字体大小(或调整大小)。

在这里使用自动布局还是使用CGAffineTransformMakeScale缩放contentView?

EN

回答 1

Stack Overflow用户

发布于 2014-04-08 21:20:57

我已经更新了TLLayoutTransitioning中的"Resize“示例项目,以演示如何做到这一点。

该方法涉及使用TLLayoutTransitioning回调之一在转换的每个步骤更新字体大小。你可能不想使用仿射变换,因为你会得到大尺寸的模糊缩放文本。

第一步是定义一个方法来设置标签的字体大小。你可以使用你喜欢的任何公式,但我已经使字体与单元格的宽度成比例缩放:

代码语言:javascript
代码运行次数:0
复制
- (void)updateLabelScale:(UILabel *)label cellSize:(CGSize)cellSize
{
    CGFloat pointSize = cellSize.width * 17 / 128.f;
    label.font = [UIFont fontWithName:label.font.fontName size:pointSize];
}

您需要在cellForItemAtIndexPath中调用此方法,以确保屏幕上显示的新标签被正确缩放:

代码语言:javascript
代码运行次数:0
复制
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [super collectionView:collectionView cellForItemAtIndexPath:indexPath];
    UILabel *label = (UILabel *)[cell viewWithTag:1];
    ...
    [self updateLabelScale:label cellSize:cell.bounds.size];
    return cell;
}

标签的中心被约束到单元格的中心,大小由intrinsicContentSize决定。因此,当您更改字体时,标签的大小将自动调整到合适的大小。

最后,您将使用updateLayoutAttributes回调根据新的布局属性更新可见单元格的字体大小(您无需担心不可见的单元格,因为您将在cellForRowAtIndexPath中处理这些单元格):

代码语言:javascript
代码运行次数:0
复制
__weak ResizeCollectionViewController *weakSelf = self;
[layout setUpdateLayoutAttributes:^UICollectionViewLayoutAttributes *(UICollectionViewLayoutAttributes *pose, UICollectionViewLayoutAttributes *fromPose, UICollectionViewLayoutAttributes *toPose, CGFloat progress) {
    CGSize cellSize = pose.bounds.size;
    UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:pose.indexPath];
    if (cell) {
        UILabel *label = (UILabel *)[cell viewWithTag:1];
        [weakSelf updateLabelScale:label cellSize:cellSize];
    }
    return nil;
}];
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22627637

复制
相关文章
在 Linux 终端调整图像的大小
ImageMagick 是一个方便的多用途命令行工具,它能满足你所有的图像需求。ImageMagick 支持各种图像类型,包括 JPG 照片和 PNG 图形。
用户4988085
2021/09/14
4.5K0
Flutter(二)--布局机制、布局步骤、水平和垂直布局、组件大小动态调整Flutter(二)--布局机制、布局步骤、水平和垂直布局、组件大小动态调整
布局机制 flutter的布局机制是组件,flutter中几乎一切都是组件,除了图片、文字等,还有用来排列、限制、对齐这些可见组件的行、列、网格等(可理解为系统样式)。 image.png 布局步骤
用户8893176
2021/08/09
1.7K0
Flutter(二)--布局机制、布局步骤、水平和垂直布局、组件大小动态调整Flutter(二)--布局机制、布局步骤、水平和垂直布局、组件大小动态调整
iOS流布局UICollectionView系列二——UICollectionView的代理方法
        在上一篇博客中,介绍了最基本的UICollectionView的使用和其中我们常用的属性和方法,也介绍了瀑布流布局的过程与思路,这篇博客是上一篇的补充,来讨论关于UICollectionView的代理方法的使用。博客地址:
珲少
2018/08/16
2.1K0
iOS流布局UICollectionView系列二——UICollectionView的代理方法
iOS流布局UICollectionView系列七——三维中的球型布局
        通过6篇的博客,从平面上最简单的规则摆放的布局,到不规则的瀑布流布局,再到平面中的圆环布局,我们突破了线性布局的局限,在后面,我们将布局扩展到了空间,在Z轴上进行了平移,我们实现了一个类似UIPickerView的布局模型,其实我们还可以再进一步,类比于平面布局,picKerView只是线性排列布局在空间上的旋转与平移,这次,我们更加充分了利用一下空间的尺寸,来设计一个圆球的布局模型。以下是前几篇博客地址:
珲少
2018/08/16
1.5K0
iOS流布局UICollectionView系列七——三维中的球型布局
VMware 中 Linux 调整分区大小
Precondition :VMware Player 中安装的Fedora 17 Linux 32bit,个人较久远的测试环境,安装时没有进行磁盘规划,默认20G空间(动态调整),安装在根/下。 Background :在上述环境中安装IBM DB2 Express-C 10.5(v10.5fp1_linuxia32_expc.tar.gz),安装时/tmp空间不足,无法安装。 Plan:需要进行磁盘扩容。考虑到使用VMware Player虚拟机。
gigiwangs
2019/02/28
6.9K0
iOS流布局UICollectionView系列五——圆环布局的实现
        前边的几篇博客,我们了解了UICollectionView的基本用法以及一些扩展,在不定高的瀑布流布局中,我们发现,可以通过设置具体的布局属性类UICollectionViewLayoutAttributes来设置设置每个item的具体位置,我们可以再扩展一下,如果位置我们可以自由控制,那个布局我们也可以更加灵活,就比如创建一个如下的circleLayout:
珲少
2018/08/16
1.5K0
iOS流布局UICollectionView系列五——圆环布局的实现
让你的 App 更吸引人的 5 个 iOS 库
TKSwitcherCollection 是一组动画开关控件。它非常易于使用-只需下载 TKSwitcherCollection 并将其拖放到项目中,就可以了!
用户2932962
2019/12/12
7100
让你的 App 更吸引人的 5 个 iOS 库
窗口动画缩放,过渡动画缩放,Animator时长缩放_关闭动画缩放好不好
最近用到了ScaleAnimation来实现图片放大需求,今天就把使用过程中学习的一些东西总结记录一下,希望能对大家有所帮助。
全栈程序员站长
2022/11/19
2.7K0
在 React 中缩放、裁剪和缩放图像
在本文中,我们将了解如何使用 Cropper.js 在 React Web 应用中裁剪图像。尽管我们不会将这些图像上传到远程服务器进行存储,但是很容易就能完成这个任务。
疯狂的技术宅
2020/02/26
6.3K0
在 React 中缩放、裁剪和缩放图像
让JTable单元格可以自动换行、自动调整宽度以适合单元格内容
源代码也可以从我的Java资料站进行下载! http://Java.EchoChina.net 或 http://61.131.30.54/123/Develop/Java/SC/
阿敏总司令
2019/02/28
1.9K0
让JTable单元格可以自动换行、自动调整宽度以适合单元格内容
iOS开发常用之网络
表相关与的TabBar SWTableViewCell - 国内开源作者,带很多手势的表单元格。 MCSwipeTableViewCell - 带很多手势的表单元格。 TMQuiltView - 瀑布流。 XRWaterfallLayout - 超简单的瀑布流实现,实现说明。 WaterfallFlowDemo - 一个简单的UICollectionView瀑布流布局演示demo。 XLForm - 很多表格类的表,写法更高冷一点,推荐使用。 Eureka.swift - Eur
GuangdongQi
2018/12/18
23.7K0
Ios常用第三方框架(二)
图表 PNChart - 国内开源作者,动态的图表。 swift-linechart - 功能完整、实用的折线图组件。使用方便,参数配置简单。是不可多得的优质组件--swift。 ios-charts - 一款优秀 Android 图表开源库 MPAndroidChart 的 Swift 语言实现版(支持 Objective-C 和 Swift 调用)。缺省提供的示例代码为 Objective-C。 TEAChart - xhacker/TEAChart 一个简洁的 iOS 图表库,支持柱状图、饼图
honey缘木鱼
2018/09/26
7.7K0
细述Kubernetes和Docker容器的存储方式
#####集合视图的作用 集合视图是为了增强网格视图开发而在IOS6中开放的集合视图API。 #####集合视图的组成 集合视图有4个重要的组成部分,分别为:
全栈程序员站长
2021/07/07
1.5K0
iOS流布局UICollectionView系列一——初识与简单使用UICollectionView
        UICollectionView是iOS6之后引入的一个新的UI控件,它和UITableView有着诸多的相似之处,其中许多代理方法都十分类似。简单来说,UICollectionView是比UITbleView更加强大的一个UI控件,有如下几个方面:
珲少
2018/08/16
3.1K0
iOS流布局UICollectionView系列一——初识与简单使用UICollectionView
【IOS开发基础系列】UICollectionView专题
        UICollectionView是一种新的数据展示方式,简单来说可以把他理解成多列的UITableView(请一定注意这是UICollectionView的最最简单的形式)。
江中散人_Jun
2023/10/16
9140
【IOS开发基础系列】UICollectionView专题
Linux调整Swap大小
关闭swap swapoff -a 1.创建交换分区的文件:增加2G大小的交换分区 dd if=/dev/zero of=/var/swapfile bs=1M count=2048 2.设置交换文件 mkswap /var/swapfile 3.启用交换分区文件 swapon /var/swapfile 4.在/etc/fstab添加 echo '/var/swapfile swap swap defaults 0 0'>>/etc/fstab 5.检查 free -m
苦咖啡
2018/04/28
8.7K0
C#中动态调整数组大小的代码
通常,我们创建一个数组后就不能调整其长度,但是Array类提供了一个静态方法CreateInstance用来创建一个动态数组,所以我们可以通过它来动态调整数组的长度。
用户7999227
2021/11/03
2.3K0
iOS UICollectionView的用法
UICollectionViewDataSource,UICollectionViewDelegateFlowLayout
码客说
2019/10/22
1.3K0
Angularjs中模态框调整大小简单方法
代码中点击事件打开模态框,一般如下: data-ng-click="open('ui/user/timeAdd.html', 'md');" AngulerJS自带的模态框源码,调用了 $uibModal 函数 //打开模态框 $scope.open = function(url, size){ var modalInstance = $uibModal.open({ templateUrl : url, controller : 'ModalInstanceCtrl', siz
陈哈哈
2020/07/06
1K0
点击加载更多

相似问题

将UICollectionView调整为内容大小

13

UICollectionView内容没有正确调整大小

25

动态调整UICollectionView单元格大小

448

UICollectionView自调整大小单元格

113

UICollectionView单元格自动调整大小

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档