天天看点

ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

一、实现效果

ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

二、使用纯代码自定义一个tableview的步骤

1.新建一个继承自uitableviewcell的类

2.重写initwithstyle:reuseidentifier:方法

添加所有需要显示的子控件(不需要设置子控件的数据和frame, 子控件要添加到contentview中)

进行子控件一次性的属性设置(有些属性只需要设置一次, 比如字体\固定的图片)

3.提供2个模型

数据模型: 存放文字数据\图片数据

frame模型: 存放数据模型\所有子控件的frame\cell的高度

4.cell拥有一个frame模型(不要直接拥有数据模型)

5.重写frame模型属性的setter方法: 在这个方法中设置子控件的显示数据和frame

6.frame模型数据的初始化已经采取懒加载的方式(每一个cell对应的frame模型数据只加载一次)

三、文件结构和实现代码

1.文件结构

ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

2.实现代码:

njweibo.h文件

ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

njweibo.m文件

ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

njweibocell.h文件

ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

njweibocell.m文件

ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

njweiboframe.h文件

ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

njweiboframe.m文件

ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

主控制器

njviewcontroller.m文件

ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

四、补充说明

由于系统提供的tableview可能并不能满足我们的开发需求,所以经常要求我们能够自定义tableview。

自定义tableview有两种方式,一种是使用xib创建,一种是使用纯代码的方式创建。

对于样式一样的tableview,通常使用xib进行创建,对于高度不一样,内容也不完全一致的通常使用纯代码进行自定义。