router

router提供了对整个app的管理。提供了app、nav、page、nav-bar、bev-router-link等元素。

如果要使用router功能，你需要在podfile中添加如下代码。

1

pod 'GICXMLLayout/Router'

然后执行 pod install或者pod update命令。

当前router提供的路由功能还有限，只是提供了基本的导航+传参功能。

app

app元素其实是一个空元素，或者你可以理解为UIWindow,单独使用的时候没有作用的。必须搭配子元素使用，并且使用GICRouter的loadAPPFromPath:方法来解析才有用。当解析完毕后就会自动将当前的windowd的rootViewController 设置为app的子元素。

app的子元素是可以任意从UIViewController继承过来的自定义元素。这也就意味着，你可以将你项目中任意一个UIViewController直接封装成自定义元素，然后就可以直接在xml中使用了，改造非常的简单。

nav

nav元素其实就是对UINavigationController的封装，因为也是继承自UIViewController，因为可以直接作为app的子元素。

目前router模块提供的导航功能，基本都是由nav元素来实现的，因此，如果项目中需要使用导航功能的，那么nav元素是必不可少的。

属性

nav当前只提供了一个background-color的属性，其实就是对UINavigationController的view设置背景色。

由于UINavigationController需要一个rootViewController，因此nav也提供了两种方式来设置rootViewController。

1. root-page子元素。通过root-page的path属性，你可以设置rootViewController对应的路径。这样在gic解析的时候就会自动加载path对应的xml文件作为rootViewController。如下面代码：

   1 2 3 4 5

   <app> <nav> <root-page path="IndexPage.xml"/> </nav> </app>

2. 直接以page元素作为nav的子元素，你可以添加多个自定义page元素，nav会依次将自定义page元素添加到nav的viewControllers中。

   1 2 3 4 5

   <app> <nav background-color="white"> <chats-page/> </nav> </app>

   这里直接将一个聊天页面作为rootViewController添加到nav元素中。

page

page元素顾名思义，代表的就是页面，而在实现的时候其实就是一个UIViewController的自定义元素。

属性

page元素可以将任意一种UI元素作为子元素，但是只能将一个UI元素作为子元素。

nav-bar(beta)

nav-bar在当前的router模块中还处于beta阶段，目前只是提供了简单的title、buttons的设置，无法提供复杂的功能，比如：拉下切换导航栏、导航栏背景色等。虽然router不提供，但并不能说就无法实现了，而是因为在实际的项目中nav-bar的自定义有很多的需求，router模块不可能完全提供，但是你可以通过自定义元素的方式自己来实现。

nav-bar当前只能作为page的子元素存在。

属性

nav-bar自身也提供了两个子元素。right-buttons和left-buttons，这两个子元素主要是用来设置导航栏左边按钮和导航栏右边按钮的。按钮可以是任意UI元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<nav-bar title="模拟头条feeds">
    <templates>
        <template t-name="nav-bar-button">
            <dock-panel size="40">
                <lable text="{{}}" font-size="17" font-color="FF3F0A"/>
            </dock-panel>
        </template>
    </templates>
    <right-buttons>
        <template-ref t-name="nav-bar-button" data-context="全选" event-tap="btnSelectAll"/>
    </right-buttons>

    <left-buttons>
        <template-ref t-name="nav-bar-button" data-context="关闭" event-tap="btnClose"/>
    </left-buttons>
</nav-bar>

bev-router-link

bev-router-link是一个behavior，用来提供点击跳转的功能。bev-router-link有两个属性。

属性

1
2
3

<behaviors>
    <bev-router-link path="{{pagePath}}"/>
</behaviors>

或者

1
2
3

<behaviors>
    <bev-router-link path="app/Detial.xml" params='{"url":"http://www.baidu.com"}'/>
</behaviors>

这里面设置一个json字符串的params。

导航+传参

router中有两种方式来实现导航+传参。一种是通过bev-router-link来添加一个behavior来获得点击的跳转的能力。另外，router也提供了直接以代码的方式来导航的能力。你可以在你的ViewModel中以如下代码来获取router实例：

1

[self gic_Router]

前提是你必须要引入GICRouter.h头文件。

gic_Router获取到的其实是一个GICRouterProtocol，该协议提供了多个方法用来导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

@protocol GICRouterProtocol <NSObject>
@required
/**
 返回上一页
 */
-(void)goBack;
-(void)goBackWithParams:(id)paramsData;

/**
 根据path导航到下一页。需要事先设置GICXMLLayout 的 RootUrl
 
 @param path 
 */
-(void)push:(NSString *)path;

/**
 根据path导航到下一页,并且带有参数。需要事先设置GICXMLLayout 的 RootUrl
 
 @param path 
 @param paramsData 
 */
-(void)push:(NSString *)path withParamsData:(id)paramsData;


- (void)pushViewController:(UIViewController *)viewController;
@end

获取参数

上面介绍了如果导航+传参。现在介绍下如何获取传过来的参数。

当前router只能通过native代码的方式来获取参数。

在您的ViewModel中实现GICPageRouterProtocol协议。协议定义如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@protocol GICPageRouterProtocol <NSObject>

/**
 导航到当前页面的回调

 @param params 导航带过来的参数
 */
-(void)navigationWithParams:(GICRouterParams *)params;
@optional

/**
 从前一页返回到当前页面的回调

 @param params 返回参数
 */
-(void)navigationBackWithParams:(GICRouterParams *)params;
@end

这里面需要注意的是。ViewModel必须是page元素的直接数据源，否则将无法获得回调。

目前，rouert模块的例子已经贯彻到整个sample中了。