最近开始入门IOS开发了,本来打算用以前的方式自学的,但发现找不到什么好的视频教程,最后只好花钱买了一个基础教程,算是入门了IOS开发吧。
花了一个星期差不多学完教程之后,打算做一个文本编辑器,那么首先要有一个列表,我希望能够显示文章的标题以及开头的几行内容,但我发现要做到显示简介还并不是一个容易的事情。
不过最终还是实现了自适应高度的效果,下面先放上效果图:
下面正式开始我的探索之旅。(如果不想看前面的铺垫可直接跳到第二节)
一、实现TableView并使用自定义Cell
首先拖一个TalbeViewController到页面中并指定入口,然后⌘+N
创建一个对应的TableViewController实现类PostController.swift
,并在TableView的页面中连接上该类。
PostController
此时应该有Xcode自动帮我们生成的一些代码,我们现在需要设置一下TableView的数据源:
1 | // 设置 tableView 有几部分 |
上面代码中用到了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出现了。
因为目前的内容是静态的,所以不能确定这样做是否实现了自适应高度。而这一点就需要你们用代码来验证一下了,至少我是验证通过了~~