iOS 当tableView 遇到Xib(storyBoard)自适应高度

虽然很多人仍然排斥storyboard(xib)这个东西,他们觉得容易引起冲突,不利于后期的维护,这些问题确确实实存在,但是你也不能否认它的强大的之处,可视化编辑是代码不能达到的,设置约束也是手到擒来,效率将会大大提高,在使用中,它往往还会给你带来一些惊喜,让你慢慢喜欢上这个东西。

话不多说,那我就总结一下我使用xib与tableview时的一些比较有用的东西

xib给tableview添加delegate和datasource

  • 最简单的就是我们我们可以直接拖tableview的delegate和DataSource(是按住ctrl按住鼠标拖到下图一的File's Owner,放开鼠标,然后就会出现图二的两个选项,这时候选择delegate和DataSource就ok了,是不是很简单)
图一.png

图二.png
  • 有些时候我们的tableview需要添加tableHeaderView,可能我们会去新建一个view,然后用代码把这个view设置为tableView的

Xib中的tableview添加headerView

tableHeaderView。但是现在我们可以用Xib直接拖一个tableHeaderView,我当时知道这个功能的时候感觉是发现了新大陆,对xib的好感又提升了不少,哈哈哈。
1.第一步:(如图三)直接拖一个view和xib是平级关系,注意看,view是和控制器单独存在的


图三.png

2.第二步:(如图四)将view的size设为freeform(一定不能忘记这个最最最重要的操作!)


图四.png

3.最后一步:(如图五)直接将你刚才的那个view用鼠标按住,使劲地拖,拖到tableview的下面去,像图上面的那种位置关系,这时你觉得你就成功了吗?那我告诉你,确实成功了,哈哈哈, 这时候这个view就是你的tableview的tableheaderView了,这时候你就可以随心所欲在上面添加控件了
图5.png

4.最后的效果就是下面的了,红色的就是tableview的tableHeaderView。(你是不是发现我的这个控制器比你的长,哈哈。把你的控制器的size设置为Freeform,参照第二步,这样你就想拖多长就拖多长,tableHeaderView也可以想拖多长就拖多长,这样妈妈就再也不用担心控件过多,一个屏幕摆放不完的问题了)
图六.png

storyboard中的tableview添加headerView

如果你觉得这种做法很麻烦,那我推荐你使用storyboard,这个玩意儿更方便,(只需参照第三步,图五),直接拖一个View放在上面,一步到位,简直so easy(效果就是下面那样,白色的就是tableHeaderView,也是随意在上面放控件就行了)。

图七.png

Xib(storyboard)tableViewHeaderView 高度自适应

但是,当我使用这种方法的时候,发现高度不能自适应!!!!当hederView的高度是固定的时候没问题,但是当headerView的高度需要根据数据源来动态改变的时候,布局就会出现问题,无论约束怎么设置,然后也想到配合代码来自适应,但是都是失败了。我就觉得肯定是Xib的HeaderView不能自适应高度,当我想要放弃这个东西的时候,却意外发现了一个方法,完美解决烦恼。只需几行代码。

代码

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    //利用systemLayoutSizeFittingSize:计算出真实高度
    CGFloat height = [self.tableView.tableHeaderView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
    CGRect headerFrame = self.tableView.tableHeaderView.frame;
    headerFrame.size.height = height;
    //修改tableHeaderView的frame
    self.tableView.tableHeaderView.frame = headerFrame;
}

xib(storyboard)增加额外属性

有时我们在使用Xib的时候,发现属性不够用,这时我们一般的做法就是把这个控件拖成属性,然后在用代码去手懂设置属性,以前我也是这样做的。后面发现这种做法实在繁琐,就去网上看了找,最后发现常用的有两种办法,一种是利用runtime来做,就是下图中,在箭头所指的里面添加属性

CD1D3A3E-1B4A-454E-834A-B338677E6F1F.png

但是我用的是另一种方法,就是通过category来增加属性,因为我觉得这种写法很方便,至于方便在哪里,后面为你揭晓答案

  • 第一步,新建一个Uiview的Category,如下图
02173B97-5BCF-4558-B642-9A0F6D6DBBCA.png
  • 第二步,在新建类的.h文件内申明你要添加的属性(注意写法)


    44A1D82E-6FBA-4100-9405-842A9E39C50E.png
  • 第三步, 在.m文件内重写属性的set方法,如下图
75ACD3CF-F79A-4897-B809-56C5B85BD647.png

最后大功告成 ,你会发现Xib(storyboard)里面所有继承于UIView的类都会增加你手动添加的那些属性(如下图),有没感觉一劳永逸,十分强大。

A409636E-E889-4D78-9C0E-86052AC6A689.png

代码:

.h文件
@property (nonatomic) IBInspectable UIColor *borderColor;
@property (nonatomic) IBInspectable CGFloat borderWidth;
@property (nonatomic) IBInspectable CGFloat cornerRadius;
.m文件
@dynamic borderColor,borderWidth,cornerRadius;

-(void)setBorderColor:(UIColor *)borderColor{
    [self.layer setBorderColor:borderColor.CGColor];
}

-(void)setBorderWidth:(CGFloat)borderWidth{
    [self.layer setBorderWidth:borderWidth];
    
}

-(void)setCornerRadius:(CGFloat)cornerRadius{
    [self.layer setCornerRadius:cornerRadius];
    self.layer.masksToBounds = YES;
    
}

tableviewCell 自适应高度

有时候我们在用xib拖tableviewCell得时候,可能会有动态改变cell高度的时候,比如说遇到文本过多,需要换行,这时候的cell的高度就不是固定的了。然而,一般解决这个问题的步骤也不难,就是挨个去计算需要换行的label的高度,最后得到总高度,再在tableview的代理方法里面去返回这个高度。但是如果你用xib,那就是洒洒水,小意思啦。

直接上代码

//预估高度(必须要有)
self.tableview.estimatedRowHeight = 100;
    // 设置cell自适应高度
    self.tableview.rowHeight = UITableViewAutomaticDimension;
    // 有了上面两件代码后,并保障storyboard中约束正确(必须保证cell中最上边的约束和最下边视图的约束都有
看到没有,只需要两行代码就能解决tableviewCell的自适应高度(切忌不要在代理方法里面再去返回cell的高度,还有xib的约束一定要整对)
以上这些就是我平时用xib时处理一些特殊问题的方法,有什么不对的地方请指出来,我好纠正,谢谢指教。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容