UITableView根据表格内容进行高度自适应与使用Masonry实现根据内容进行宽度自适应和高度自适应
Masonry和SDAutoLayout不同:SDAutoLayout需要上下左右四个方向都显示性的进行约束,虽然当高度和宽度自适应时,可以少一个高度约束,但是也应有对应布局处理设置。因为标签是有顶部和底部空白间隙的,通常高度比字体大小大一些(当字体很大时的粗体差别很大),当设置的高度比标签实际高度小时,标签的顶部和底部被截取。当然它也有好处,就是严格按照布局高度实现ui.而Masonry并非上下左右四个方向都设置约束,一般2到3个不重复方向的约束就可以(没有就采用默认值推导)。就是设置上下左右的约束,它实际的标签也是按照标签的实际显示高度上下留空白,这样就造成和UI有稍微一点高度的偏差。可见他们各有优缺点,一般场景可以混用,带自适应高度的布局场景不能混用。
Masonry的自适应宽度和高度大致可以分为三类情况。
第一种情况:控件根据内容进行宽度自适应(就是省略左或右方向的一个约束):
[self.describeTitleLabel mas_makeConstraints:^(MASConstraintMaker make) {
make.left.mas_equalTo(COMMON_BIG_EDGE_DISTANCE);
// make.width.mas_equalTo(FULL_WIDTH-COMMON_EDGE_DISTANCE2);
make.top.mas_equalTo(68+height+8);
make.height.mas_equalTo(16.0);
}];
当然若你的控件是先加载控件,后填入内容就需要在重置内容后对控件进行重新布局:
[self.describeTitleLabel mas_updateConstraints:^(MASConstraintMaker make) {
make.left.mas_equalTo(COMMON_BIG_EDGE_DISTANCE);
// make.width.mas_equalTo(FULL_WIDTH-COMMON_EDGE_DISTANCE2);
make.top.mas_equalTo(68+height+8);
make.height.mas_equalTo(16.0);
}];
注意:Masonry是延迟布局生效,不是你刚调用mas_makeConstraints或mas_updateConstraints对控件进行布局后立即填充内容,它的宽度就是刚布局时的宽度。但是若控件已经加载出来,等大约1秒后你再对它赋值,那么你不对它重新布局,那么它显示的就是最开始的宽度。高度自适应也是如此。
第二种情况:非表格控件根据内容进行高度自适应(就是省略上或下方向的一个约束):
[content mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(COMMON_BIG_EDGE_DISTANCE);
make.right.mas_equalTo(-COMMON_BIG_EDGE_DISTANCE);
make.top.mas_equalTo(68.0);
}];
第三种情况:表格控件根据内容进行高度自适应,不但要对控件进行最大预计宽度设置(contentLab.preferredMaxLayoutWidth = SCREEN_WIDTH - BaseSize(43);),还要对表格高度进行自适应(不能有height约束),对表格高度设置为高度自适应的值(UITableViewAutomaticDimension)。
表格加载代码:
(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return UITableViewAutomaticDimension;
}
表格控件布局函数部分代码:
#import “MessageTableViewCell.h”
@implementation MessageTableViewCell
(void)awakeFromNib {
[super awakeFromNib];
// Initialization code
}(void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];// Configure the view for the selected state
}(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
[self initCell];
self.selectionStyle = UITableViewCellSelectionStyleNone;}
return self;
}(void)initCell{
UILabel* contentLab = [UILabel labelWithText:@“ttttttttttttttttttttttt” font:SystemFontOfSize(14) textColor:TextBlackColor];
contentLab.preferredMaxLayoutWidth = SCREEN_WIDTH - BaseSize(43);
contentLab.numberOfLines = 0;
contentLab.textAlignment = 0;
[self.contentView addSubview:contentLab];
self.contentLab = contentLab;[contentLab mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(BaseSize(12)).;
make.left.mas_equalTo(BaseSize(17));
make.right.mas_equalTo(BaseSize(-26));
make.bottom.mas_equalTo(-BaseSize(23.5));}];
}(void)setMsg:(MessageModel *)msg {
_msg = msg;
self.contentLab.text = msg.Title;
}
@end
其中最核心的代码是:
contentLab.preferredMaxLayoutWidth = SCREEN_WIDTH - BaseSize(43);
contentLab.preferredMaxLayoutWidth = SCREEN_WIDTH - BaseSize(43);[contentLab mas_makeConstraints:^(MASConstraintMaker *make) {make.top.mas_equalTo(BaseSize(12)).;make.left.mas_equalTo(BaseSize(17));make.right.mas_equalTo(BaseSize(-26));make.bottom.mas_equalTo(-BaseSize(23.5));}];
注意:若你是立即对表格赋值或赋值后局部更新,需要更新布局使用下面的代码:
- (void)setMsg:(MessageModel *)msg {_msg = msg;self.contentLab.text = msg.Title;[self.contentLab mas_updateConstraints:^(MASConstraintMaker *make) {make.top.mas_equalTo(BaseSize(12)).;make.left.mas_equalTo(BaseSize(17));make.right.mas_equalTo(BaseSize(-26));make.bottom.mas_equalTo(-BaseSize(23.5));}];
}
另外在UILabel自适应高度的同时,也可以对UILabel显示的最大行数进行限制,代码如下:
[self.productNameLabel setMaxNumberOfLinesToShow:2];
实现自适应高度和宽度见《自适应高度的表格UICollectionView》和《使用SDAutoLayout实现控件根据内容进行宽度自适应和高度自适应》。
UITableView根据表格内容进行高度自适应与使用Masonry实现根据内容进行宽度自适应和高度自适应相关推荐
- 在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局 本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局 思路:将 ...
- Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格
目录 一.概述 二.效果展示 三.实现思路 1.冻结行.冻结列 2.行高自适应 3.蚂蚁线 四.测试代码 1.添加表格数据 2.设置冻结行.列 3.行高.列宽 4.单元格背景色 5.单元格文字 6.其 ...
- Swift - 可编辑表格样例(可直接编辑单元格中内容、移动删除单元格)
(本文代码已升级至Swift3) 本文演示如何制作一个可以编辑单元格内容的表格(UITableView). 1,效果图 (1)默认状态下,表格不可编辑,当点击单元格的时候会弹出提示框显示选中的内容. ...
- WORD文档中的表格:自定义方式的批处理,增删行列和内容
WORD文档中的表格:自定义方式的批处理,增删行列和内容: 大家有没有遇到需要处理WORD文档中的表格,表格多,需要大量的重复性工作: office提供了宏录制方式,可以编辑风格,内容,但是针对增删表 ...
- 原理:小程序image图片实现宽度100%,高度自适应
微信小程序的图片image有默认的宽高:width: 320px和height: 240px,这两个值让新手弄起来心情烦躁,连引入个icon图标就是变形,今天就记录一下我遇到的一种问题: 多图排列,我 ...
- jspdf-html2canvas 自动分页 网页导出pdf 自动根据dom子节点的高度进行分页,避免dom的内容在分页的时候被截断
jspdf-html2canvas 网页导出pdf 自动根据dom子节点的高度进行分页,避免dom的内容在分页的时候被截断 说明 直接上代码 说明 要导出的内容用 .pdf 包裹 ,默认会以.pdf的 ...
- python3-xlwt-Excel设置表格基础(字体颜色 背景颜色 设置边框 边框颜色 冻结窗口 字体大小 字体高度 字体加粗 下划线 斜体字 单元格对齐方式 自动换行 删除线 超链接 插入公式)
文章目录 引入xlwt和创建workboos对象 初始化样式和创建设置字体,赋值给style 保存文件 自定义样式 字体颜色 背景颜色 设置边框 边框颜色 冻结窗口 字体大小 字体高度 字体加粗 下划 ...
- uniapp中图片宽度100%,高度自适应
uniapp中图片宽度100%,高度自适应 <view class="headeruser-image"><image mode='widthFix' src=& ...
- 轮播图高度自适应_【2020顶会NIPS】用于交通预测的自适应图卷积循环网络
就idea来说,这篇文章整体感觉亮点只有参数分解一处,其他的自适应网络结构,之前已经有文章研究,如果在计算方面有需求,或者是网络节点较多的应用可以参考这篇文章. Adaptive Graph Conv ...
最新文章
- MPB:东林牛犇组玉米根系简化细菌群落的定量与其生物防治效果的评价方法(视频)...
- openSUSE install albertlauncher from source files
- delimiter mysql报错_MySql中的DELIMITER错误
- 线性表(一)——顺序表
- numpy 排序, 查询功能
- python可变数据类型与不可变数据类型
- linux下通用Makefile写法
- windows apache部署php,Windows下部署Apache+PHP+MySQL运行环境实战
- 初次接触 Lottie
- Leetcode 24——Swap Nodes in Pairs
- flask综合整理2
- 夏普Sharp AR-C260M PS 一体机驱动
- 基于 Python 的时序模型——AMIRA模型
- MSDN帮助文档安装失败解决方案
- 如何为管理者设计 360 评估调查题目?
- web实现html页面思维导图效果
- revit插件建模助手的【快速工具箱】功能
- 一、熟悉新闻推荐系统基本流程
- Java面向对象之简单项目制作(DVD管理系统)
- Win11上手初体验,文末附Win10升级Win11方法
热门文章
- 运筹学笔记 图与网络分析
- jailbreakme问题-原生1.1.2破解经验分享!
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(三十二) 雷、混、冰、毒、火、风 - 幻化中的魔法魅力!...
- 大数据:关于分布式,集群,机架和节点的关系
- 小企业用什么协同oa比较好?
- 微信小程序开发笔记(四)数据绑定
- 计算机应用能力考试教师要求,2017年抚州教师职称评定所需的计算机应用能力考试什么时候报名...
- STM32CubeMX之FatFS读写U盘
- 360云盘关闭,手把手教你用蒲公英搭建私有云
- idea2019版本使用不了CamelCase问题