IOS 无需代码实现TableViewCell自适应高度

最近开始入门IOS开发了,本来打算用以前的方式自学的,但发现找不到什么好的视频教程,最后只好花钱买了一个基础教程,算是入门了IOS开发吧。

花了一个星期差不多学完教程之后,打算做一个文本编辑器,那么首先要有一个列表,我希望能够显示文章的标题以及开头的几行内容,但我发现要做到显示简介还并不是一个容易的事情。

不过最终还是实现了自适应高度的效果,下面先放上效果图:

下面正式开始我的探索之旅。(如果不想看前面的铺垫可直接跳到第二节

一、实现TableView并使用自定义Cell

首先拖一个TalbeViewController到页面中并指定入口,然后⌘+N创建一个对应的TableViewController实现类PostController.swift,并在TableView的页面中连接上该类。

PostController此时应该有Xcode自动帮我们生成的一些代码,我们现在需要设置一下TableView的数据源:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 设置 tableView 有几部分
override func numberOfSections( in tableView: UITableView) - > Int {
return 1
}

// 设置 tableView 有几行
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) - > Int {
return 5
}

// 设置t tableView 的单元格内容
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) - > UITableViewCell {
// 根据单元格上定义的 identifer 识别对应的单元格
let cell = tableView.dequeueReusableCell(withIdentifier: "postItem",
for: indexPath)
cell.textLabel?.text = "我是修改后的内容"
return cell
}

上面代码中用到了TableCell的标识符postItem,我们需要在界面中定义一下:

然后按下⌘+R运行项目,得到的结果如下:

这样就得到了最基本的TableView样式了,但显然不能满足我的要求。所以需要将TableCell的类型改为自定义类型。

此时我们需要新建一个类继承TableViewCell,以便我们对这个自定义Cell进行操作。

⌘+N新建CocoaTouchClass,并继承UITableViewCell

创建完成后,同样需要将界面中的TableCell和代码连接起来。连接成功后,应该就可以在代码助手中找到该类:

然后我们先按照预想的方式来实现两个Label的TableCell。

这样设计之后乍一看应该是能满足要求了吧?运行起来看看:

发现只显示了第一个Table,第二个却没有显示。

二、自定义TableCell实现自适应高度

遇到这种情况,我第一个想到的就是TableView有没有自动高度的功能呢?找了一下发现TableView和TableCell里面都有这个属性,但我开启了之后也没有作用。然后求助百度,一堆代码实现的方法,看不下去啊。实在不甘心,就去求助谷歌,结果在这个网站上找到的方法:http://www.thomashanning.com/uitableview-automatic-row-height/

总的来说就是要给TableCell里面的内容添加约束,使其上下左右四个方向均存在和父元素的约束,然后再让TableCell里面的内容可以动态改变大小。然后我自己试了一下,确实是有用的,但当我换成两个元素在四个方向上的约束时,却又失效了。

于是我想到可以用StackView将两个元素整合成一个元素,所以下面就是我的做法:

1、选中两个Label,将其合并为一个Label

2、给合并后的StackView添加四个方向的约束,距离均为0

设置完成后,由于StackView的四条边均和外部有了约束,里面的两个Label的高度就不能确定了。而我们的目标是第一个Label的高度固定为1行,而第二个Label的高度随内容变化,且最多显示3行。那么我们就需要给第一个Label添加高度的约束。

再次运行项目,即可看到第二个Label出现了。

因为目前的内容是静态的,所以不能确定这样做是否实现了自适应高度。而这一点就需要你们用代码来验证一下了,至少我是验证通过了~~

Godbobo wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!