[iOS开发]屏幕适配四:Xcode7使用Autolayout拖拽布局基础(3)TableView自动布局

来源:互联网 发布:js为什么禁止跨域请求 编辑:程序博客网 时间:2024/06/03 19:07

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的距底部的距离删除,如下图:



执行一下看看效果是不是我们想要的,嗯这样就对啦。



0 0
原创粉丝点击