TableView应该是iOS开发中最常用的几个UI控件之一了,以其灵活多变的页面展现成为大多数app页面展现的首选。因为它用的太多了,所有必须要用全新的篇章来介绍一下基本的自动布局的实现。
本篇采用Stroyboard+xib的方式来实现(个人习惯哈),一个不同高度cell的页面。
实现步骤一:在新的Viewcontroller中拖拽一个Tabbleview,并将约束设定为其充满页面,即TableView的上、下、左、右的约束分别为(-64,-49,0,0)-64为Navi+Status的高度,-49为tabbar的高度。
实现步骤二:在Viewcontroller中连线TableView并遵守Delegate,实现Delegate函数
执行一下,看看基本的页面是否满意,执行一下嗯还可以哈!
实现步骤三:使用xib自定义cell,并实现cell关联类(自动布局和高度自动返回)
1、实现cell的contentView的布局约束。
cell的contentView由两部分组成上部的label和下部的imageview
设置label的上、左、右的约束分别为(10,20,20)
设置imageview的上、下、左的约束分别为(10,20,20)长宽为100
2、建立cell上的imageview和label与关联文件的关联,并实现相关函数,建立关联完成效果如下:
实现步骤四:在Tabbleview中实现tabbleview cell看一下实际的实现效果。
1、创建数据模型,导入cell头文件,修改create函数
2、在Viewcontroller中导入cell头文件,将cell加载到tabbleview中
执行以下,看下效果是不是我们想要的,截图如下,嗯好像有点问题啊 (label的高度没有变化导致cell的高度是一样的)
仔细想了一下由于我们的view是有高度的,而我们针对Image做了底部约束,所有整个label的高度也就固定死了,要修改一下约束条件。
修改方案:label的约束条件不变,将Image的距底部的距离删除,如下图:
执行一下看看效果是不是我们想要的,嗯这样就对啦。