• 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

  • 相关阅读:
    android 数据绑定(6)自定义绑定方法、双向数据绑定
    android apk瘦身(2) R8编译器:压缩代码、压缩资源、优化代码
    Kotlin 泛型
    android 数据绑定(5) kotlin 的binding bug
    android 数据绑定(4)实用特性及疑惑:使用控件、格式化@string/xxx、对象传递、双向数据绑定
    android apk瘦身(1) 使用矢量图 和 webp,去掉多余cpu架构的库文件
    android 数据绑定(3)自动更新UI
    android 数据绑定(2)绑定表达式
    android 数据绑定(1)Ativity、Fragment、Item绑定数据源
    react.js中render的return的坑
  • 原文地址:https://www.cnblogs.com/starwang/p/4936702.html
Copyright © 2020-2023  润新知