• ios开发系列-UITableController-动态页面


         本章开始我们来讲述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

  • 相关阅读:
    Benelux Algorithm Programming Contest 2016 Preliminary K. Translators’ Dinner(思路)
    Benelux Algorithm Programming Contest 2016 Preliminary Target Practice
    Benelux Algorithm Programming Contest 2016 Preliminary I. Rock Band
    Benelux Algorithm Programming Contest 2016 Preliminary A. Block Game
    ICPC Northeastern European Regional Contest 2019 Apprentice Learning Trajectory
    ICPC Northeastern European Regional Contest 2019 Key Storage
    2018 ACM ICPC Asia Regional
    2018 ACM ICPC Asia Regional
    Mybatis入库出现异常后,如何捕捉异常
    优雅停止 SpringBoot 服务,拒绝 kill -9 暴力停止
  • 原文地址:https://www.cnblogs.com/starwang/p/4936702.html
Copyright © 2020-2023  润新知