天天看点

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

一、项目文件结构和plist文件

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

二、实现效果

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

三、代码示例

1.没有使用配套的类,而是直接使用xib文件控件tag值操作

数据模型部分:

yytg.h文件

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

yytg.m文件

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

主控制器

yyviewcontroller.m文件

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

使用xib自定义的uitableviewcell

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

代码分析:

上面的代码通过使用xib文件中各个控件的tag值,完成对每个部分数据的赋值和刷新。但是,作为主控制器,它应该知道xib文件中各个控件的tag值,它知道的是不是太多了呢?

为了解决上面的问题,我们可以为自定义的cell设置一个配套的类,让这个类来操作这个xib,对外提供接口,至于内部的数据处理,外界不需要关心,也不用关心。

改造后的代码如下:

2.使用xib和对应的类完成自定义cell的数据展示

新建一个类,用来管理对应的xib文件

注意类的继承类,并把该类和xib文件进行关联

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

yytgcell.h文件代码:

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

yytgcell.m文件

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

3.对上述代码进行进一步的优化和调整(mvc)

优化如下:

(1)把主控制器中创建cell的过程抽取到yytgcell中完成,并对外提供一个接口。

yytgcell.h文件(提供接口)

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

yytgcell.m文件(把创建自定义cell的部分进行封装)

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

主控器中的业务逻辑更加清晰,yyviewcontroller.m文件代码如下

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局
iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

四、推荐调整的项目文件结构

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

这是调整后的文件结构,完整的mvc架构。

注意:注意文件的命名规范。

提示技巧:批量改名,操作如下:

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

修改为想要的名称:

iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

继续阅读