027-应用管理之MVC模式-iOS笔记

学习目标

1.【理解】九宫格坐标计算

2.【理解】应用添加子控件

3.【理解】应用子控件添加数据

4.【理解】字典转模型

5.【掌握】xib初体验

6.【理解】初识MVC设计模式

7.【理解】根据MVC模式封装我们的应用

一、九宫格坐标计算

实现以九宫格的形式展示应用信息,点击按钮后能监听按钮单击事件。类似这种类型app往往都是动态加载应用数据,所以我们不可能将数据写死,因为我们不确定应用数量,所以就无法确认控件的数量。最终效果图如下:

027-应用管理之MVC模式-iOS笔记

界面分析

一个控件需要显示在界面上,必须为其设置frame和一些必要属性。如果将每一个控件单独的添加到view中,每一个控件的坐标都不同而且计算非常繁琐,也不方便后期坐标的修改。所以我们考虑为每一个应用创建一个单独的view,然后为这个view添加三个子控件,因为每个view中的三个子控件中的坐标都是基于这个单独view而且都是固定的,这样无论是坐标计算还是后期修改子控件坐标都非常方便。

创建项目,拖入使用到的图片素材和plist文件。

027-应用管理之MVC模式-iOS笔记

app.plist中是一个数组,有12个元素,每个元素有拥有两个字典键值对,分别表示应用的名称、应用图标名。

027-应用管理之MVC模式-iOS笔记

声明一个数组属性,用于存储plist文件中加载的应用数据并实现加载过程,这里我使用懒加载方式,在需要加载的时候才加载数据,并且只会加载一次。

ViewController.m文件

根据九宫格公式,计算每个应用的坐标并显示到屏幕上,计算x坐标和y坐标的原理相同。如下图:

027-应用管理之MVC模式-iOS笔记

假如每个应用宽为viewW,高为viewH,横向边距为appMarginRow,纵向边距为appMarginCol,每行3个应用,则得到下面结果:

第一个应用

第二个应用

第三个应用

第四个应用

第五个应用

第六个应用

......

由此发现了一个规律,我们可以给每一行计算出一个行索引,每一列计算出一个列索引。

ViewController.m文件

二、应用添加子控件

现在应用view已经创建好了,接下来要创建每个应用view中的子控件,包括应用图标、应用名称和下载按钮。应用view的子控件坐标是以它为基准的,并且每个应用的子控件都是不变的。

027-应用管理之MVC模式-iOS笔记

ViewController.m文件

三、应用子控件添加数据

现在应用管理界面大体框架已经搭建好了,而数据在_apps数组中,每个元素都是一个字典(NSDictionary)。我们可以通过依次取出数组中的每个元素,也就是取出数组中的每个字典,然后通过字典取出字典中的应用图标、应用名称为子控件赋值。

027-应用管理之MVC模式-iOS笔记

ViewController.m文件

四、字典转模型

以上面这种方式添加数据,如果在调用字典时key值写错Xcode将不会报任何错误,这样有时会造成非常坑爹的BUG。所以如果我们将字典中的数据以对象的方式来进行调用,就能避免类似问题还可以更好的封装数据,也就是MVC中的封装数据模型(Model)。

创建一个类JFApp继承自NSObject,用于封装应用信息数据。类的属性类型根据封装数据的类型来确定,这里app.plist中每个元素是拥有两个键值对的字典,所以定义两个NSString类型的属性分别封装应用图标、应用名称。

JFApp.h文件

JFApp.m文件

懒加载返回的数组中存储的是模型对象,所以我们需要修改ViewController.m文件中懒加载代码和所有用到字典获取数据的代码。

ViewController.m文件 (改变后的)

五、xib初体验

应用管理界面搭建、调用数据都已经完成,但是创建应用的子控件的操作非常的繁琐,我们可以利用苹果提供的一款工具xib来简化我们的操作。

创建一个xib文件,因为我们是要描述一个应用view,所以命名为JFAppView,其中JF是前缀。

027-应用管理之MVC模式-iOS笔记

拖拽一个UIView控件,修改Size选项为Freeform,Status Bar为None

027-应用管理之MVC模式-iOS笔记

和操作我们熟悉的Main.storyboard一样,设置View的宽、高都为90,然后再拖拽UIImage、UILabel、UIButton,并设置其尺寸、字体大小、按钮背景图等等。设置的尺寸和我们上面代码写的子控件尺寸一样。并为每个子控件设置对应的tag值,我这里设置的是UIImage为1、Label为2、Button为3。

027-应用管理之MVC模式-iOS笔记

加载xib文件并调用我们创建好的View控件

根据子控件的tag值调用view的对象方法来创建子控件

ViewController.m文件(已加载xib中的控件,简写代码)

这样做只是简化了大量创建子控件、设置子控件属性的代码,但还是没有达到我们最终优化的目的。先来了解下MVC设计模式概念,再继续优化我们的代码。

六、初识MVC设计模式

MVC全名是Model View Controller,是模型(model)、视图(view)、控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑。

027-应用管理之MVC模式-iOS笔记

视图:数据的展现

视图是用户看到并与之交互的界面。视图向用户显示相关的数据,并能接收用户的输入数据,但是它并不进行任何实际的业务处理。视图可以向模型查询业务状态,但不能改变模型。视图还能接受模型发出的数据更新事件,从而对用户界面进行同步更新。

模型:应用对象

模型是应用程序的主体部分。模型代表了业务数据和业务逻辑。当数据发生改变时,它要负责通知视图部分。一个模型能为多个视图提供数据。由于同一个模型可以被多个视图重用,所以提高了应用的可重用性。

控制器:逻辑处理、控制实体数据在视图上展示、调用模型处理业务请求

当用户单击了应用管理中的下载按钮触发一个单击事件时,控制器接收请求并调用相应的模型去处理请求,然后调用相应的视图来显示模型返回的数据。

七、根据MVC模式封装我们的应用

根据MVC模式设计思想,我们继续优化我们的应用管理app。让模型、视图与控制器分开,独立完成各自的工作。

先来为我们的xib文件新建一个视图类JFAppView继承自UIView,用于操作xib中的控件和显示控件的数据。注意一定要为xib指定对应的视图类才能进行控件拖线操作。

027-应用管理之MVC模式-iOS笔记

控件连线操作,需要被访问的控件就设置为属性,能触发事件的控件就设置为方法。

027-应用管理之MVC模式-iOS笔记

为视图类提供一个快速创建view的类方法,在方法中加载xib文件并为调用者(控制器)返回一个view。而不是让调用者(控制器)自己加载xib创建view。

再为视图类提供一个为子控件赋值数据的方法,接收数据模型,并将模型中的数据赋值给对应的子控件。这里也可以将模型设置为视图类的属性,重写这个属性的set方法,在set方法中为模型属性赋值的同时也为子控件赋值。

JFAppView.h文件

JFAppView.m文件

 ViewController.m文件(最终版本)

控制台中只是创建了一个应用view并设置其frame,接收模型兑现传递给view,并显示应用到屏幕上。这样就完成了简单MVC模式的应用,我们再调整一下Xcode导航结构。

027-应用管理之MVC模式-iOS笔记

六阿哥

目前评论:2   其中:访客  2   博主  0

  1. avatar iwenk 1
  2. avatar 阿里斯 0
评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: