移动App-UI配制篇

杂志app-UI配制篇

背景

现在公司有需求是关于杂志app，里面每个页面可能有不同的展现方式，不同的内容，不同的操作方式。那么这里就有一个需求就是根据用户定制这些不同的展现方式，不同的内容，不同的操作方式，在我们手机端就能正确的展示这些功能。如果一个应用app所有的UI都已经组件化，那么我只需要把这些组件组合拼装就行了，修改配制文件即可。友好的把配制文件的给服务端或者是产品组，让其很容易地修改配制文件。

应用场景

按照我们定义的XML规范进行，考虑到一些情况，除了一些有特殊需求的app，app之前有相似性，应用app的UI符合已有UI组件的要求，业务逻辑相同或相似，UI和业务逻辑分离。

实现原理

根据配制文件定义相关控件或组件，配制其属性。UI引擎解析配制文件，生成对应的控件或组件模型，在需要的时候添加到当前的VIew上。UI引擎大致分为如下几部分，

1.Builder生成器类,2.Element控件或者组件容器类，3.Controller控制器类，处理业务逻辑和UI，4View普通视图类，5.TableView视图类。

从两个方面来看。

第一方面，从程序运行流程来看。

1.当第一次程序运行起来之后，会用Element基类的扩展类RootElement(XMLBuilder),解析配制文件如XML。

2.Builder生成器类把XML里面的结点通过递归的方法，解析成相应的Element控件或组件容器。

3.最终会成一个树形结构在内存中，内存地址根据RootElement对象来取。

4.程序继续往下走，这时会创建一个Controller业务控制器类,这个Controller是从基础业务控制器继承下来。把RootElement的对象指针传给该Controller.

5.把业务控制器赋值给Window的rootViewController,同时让window可见。

6.让window可见时会加载View,系统回调业务控制类的loadView或者viewDidLoad来渲染UI.此时用视图类递归遍历RootElement,根据RootElement容器提供生成View的方法，生成相应的控件或者是组件，addSubView。此时UI渲染完成，呈现给用户了。

第二方面，从程序运行时来看。

我们知道message与方法的真正实现是在执行阶段绑定的，而非编译阶段。编译器会将消息发送转换成对objc_msgSend方法的调用。objc_msgSend(receiver, selector, arg1, arg2, …);

当用户点击设备屏幕时，IOS捕捉到一系列的触摸,将其打包到UIEvent对象中并放置到应用程序活动事件队列中。单例UIApplication对象管理应用程序，从事件队列中取出最前面的事件并将其分发以便处理。通常，其发送事件给应用程序的主窗口——即聚焦于用户交互的窗口——窗口对象代表窗口再发送事件给初始对象进行处理。

在iOS系统中有个很重要的概念：Responder。基本上所有的UI相关的控件，view和viewcontroller都是继承自UIResponder。事件的分发正是通过由控件树所构成的responder chain(响应链)所进行的。

例如一个简单的Button点击事件。

1.当button被按下的时候，系统接收这到个事件，事件经过传递，分发，最终在应用程序的交互窗口的初始控件对象处理。

2.在ButtonElement里监听到这个被按下的事件，先交给父类处理，然后处理自己的逻辑,。

3.依次在ButtonElement--LabelElement--RootElement--Element这个继承树上进行传递。

4.当传递到根结点时即Element，消息就开始分发，消息的分发是动态绑定的，编译器会将消息发送转换成对objc_msgSend方法的调用，objc_msgSend(receiver, selector, arg1, arg2, …);

5.最终消息会分发到指定的Controller里的方法里去执行。处理自己的业务逻辑。

广告时间:

新浪微博: messageloop亮仔