码迷,mamicode.com
首页 > 移动开发 > 详细

ios开发系列-UITableController-1

时间:2015-11-04 19:20:16      阅读:884      评论:0      收藏:0      [点我收藏+]

标签:

     本章开始我们来讲述ios中用得最多的控制器UITableController。本章准备实现微信中的消息页面。首先来分析一下微信消息界面。它使用的是目前最常见的列表布局。每行的最左边都是图片。右上角为最新一条信息的时间。中间是标题和正文。大家留意一下会发现很多app都是使用的这种布局方式。

   分析完毕我们就来看看如何实现吧。首先选中我们之前创建的显示消息菜单的UITableController。如下图:

技术分享

选中的cell就是我们使用的模版,我们可以向里面拖入各种控件最终来形成我们的界面,然后在后台文件中再给他加载数据。先为该cell设置id为cell

布局大致的效果如下图。大致的步骤是将行高设置为60.其他的各个控件的约束见代码吧。

技术分享

然后将正文和日期的字体调整一下。将正文和日期的颜色设置为灰色,效果如下图。

技术分享

    然后设置下4个控件的tag.后台需要通过tag来获取对应的控件。分别设置为100到103。

   界面布局就到这里。然后就是设置后台文件。文件的创建过程就不重复了。接下来介绍下uitableviewcontroller文件如何实现。

    其实逻辑很简单,你需要实现什么功能。就重写uitableviewcontroller对应的方法。说明下常用的几个方法吧,

numberOfSectionsInTableView(tableView: UITableView) -> Int

这个方法是说明这个table里面有多少个Section。至于什么是Section?他是行上一级的结构,可以去看下微信的发现菜单,里面就是4个section.

tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int这个方法是说明每个section里有多少行。这两个方法基本上是肯定要实现的。其他的方法可以参考对应的资料。接下来上代码:

首先定义一个实体类来装载我们的数据。如下图:

技术分享

然后开始开始我们后台文件类的实现,首先定义一个全局的数据源。在viewDidLoad函数中初始化

技术分享

然后设置Section的数量和每个Section的行数

技术分享

为每行绑定数据源

技术分享

最后定义一下行高,不设置的话系统会使用默认高度。

技术分享

后台逻辑写完了,然后我们迫不及待的来跑下效果吧。奇怪,有什么不对?顶部的文字怎么重叠了?哦,还少了最后一个步骤,给我们的uitableviewcontroller加一个navigation的壳吧,这东西就是我们看到的顶部带返回功能的导航。选中我们的uitableviewcontroller。然后选中下图中的菜单中的Navigation Controller选项。

技术分享

然后我们会发现我们的table多了一个navigation item.选中他设置下title.如下图:

技术分享  

好,跑下效果。还可以吧?需要说明一下的是在真机中运行的效果和模拟器中是不一样的,每行间会有分割线。这也是我建议尽量用真机的原因。

技术分享

看起来好像和微信不太一样啊,哦,微信的导航是黑色的。我们选中navigation bar设置Style为Black

 

技术分享

再来跑下效果,是不是好看一些?

技术分享

细心的同学会发现还少了一个东西,搜索功能,别急,等下章我们继续。

代码地址:https://github.com/xing98218/FirstClass

ios开发系列-UITableController-1

标签:

原文地址:http://www.cnblogs.com/starwang/p/4936702.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!