NB的原生布局，可以自定义各种类型的界面布局，并且使应用界面更加流畅，是移动开发必备技能。AppCan封装了uexNBlistview插件，并制定了一套自定义布局规则，根据这套规则和相关插件API方法，开发者即可轻松实现应用的原生布局。

在本周三AppCan尖课直播中，AppCan讲师为大家介绍了uexNBlistview的详细使用方法。

1.实现原生布局，首先需要了解自定义布局规则，熟悉自定义布局指引文档，大致了解xml布局的规则，其中包括的元素和属性。

元素分为三类，一类是根元素，一类是布局元素，另外一类是控件元素。

根元素是root,主要指定该布局文件的唯一标识(该标识在API接口中会用到)。

布局元素分为相对布局和线性布局。

控件元素分为文本，按钮和图片。

一个正确的xml布局文件必须是root元素为根元素，根元素的子元素必须是布局元素，而且至少包含一个控件。

2.了解uexNBListView的API接口，大致分为初始化布局，设置数据，打开列表，列表操作类。

其中要和自定义布局规则打交道的是设置数据接口，即setItems方法，需要通过唯一标识符去指定某一个列表项用到哪个布局，主要使用数据载入方式。

在uexNBListView使用过程中,需要优先调用initLayout初始化布局方法,布局在定义时需要指定哪些数据在列表中是动态的,然后在setItems、insert或者update接口传入相应的数据。

• 示例：

在这个布局文件中，定义了两个控件元素,一个text显示标题,一个button显示操作按钮。

其中根布局linearlayout的背景颜色和text的文本内容需要动态变化,则定义id为content的linearlayout的background属性为 :${自定义变量名} ,这里的"自定义变量名"为backgroundColor。同理定义id为text的text属性为 ${title}。

则在设置数据的时候,传入如下代码:

• 运行效果:

下面结合《今日头条》案例，介绍uexNBListView插件在实际项目中的应用。

该应用中有四个tab页分别为“首页”、“视频”、“话题”和“我”，通过底部的按钮点击切换。其中“首页”、“视频”和“话题”页都包含头部的导航条，可左右滑动切换页面。而“我”tab页只有单独的一个界面。因此该应用设计为三个容器（分别对应前三个tab页，每个容器中包含两个列表，这两个列表之间通过左右滑动切换），和一个列表（对应“我”tab页）。在底部导航栏点击之后，处理容器或列表的显示及隐藏，来实现tab页的切换效果。

1.创建容器

应用中需要用到左右滑动切换的效果，因此需要使用容器。首先创建容器，然后在打开列表时将列表添加进容器中。具体代码如下：

上例中，列表Id为listView1和listView2的两个列表可通过左右滑动切换。

2.创建列表

定义布局样式

在创建列表之前，需要先调研整个列表中有几种类型的布局，每种类型的布局中哪些数据是需要动态更新的。

例如“首页”tab页中，就有四种布局，分别为：

（1）纯文本不带图片，如:

（2）文字加单张图片，图片在文字右侧，如：

（3）文字加三张图片，图片在文字之间，如：

（4）文字加单张图片，图片在文字之间，如下：

虽然该列表中包含四种样式的布局，但并一定要定义四种样式，相似的布局可以合并，通过控件的visible属性可以控制某个控件的显示和隐藏，展现不同的效果。

例如，第一种和第三种布局即可合并，第三种布局中将三张图片的布局隐藏掉即是第一种布局显示的效果。

布局定好之后，需要确定布局中哪些数据是需要动态变化的。

例如第一种布局中的黑色文字大标题，每一条新闻大标题必然是不同的。而右下角带“X”号的图标，每一条新闻的图标都一样，则不需要动态更新。

需要动态更新的数据，参考“uexNBListView插件API文档”中的"数据载入方式"，定义完整数据变量名称，在接口传入数据时，数据与变量一一对应。

3.布局代码

(1).layout_index_item1.xml

该布局对应第一和第三种布局，代码如下：

(2).layout_index_item2.xml

该布局对应第二种布局，代码如下：

(3).layout_index_item3.xml

该布局对应第三种布局，代码如下：

4.初始化布局

定义布局文件后，调用插件的initLayout接口，如下：

其中center关键字表示主布局数组，数组元素为布局文件的存放路径，只支持本地文件。

5.设置列表数据

在initLayout的回调方法cbInitLayout之后可调用设置数据方法setItems。代码如下：

注意：dataList主数据中的键值是与布局文件中定义的变量值相对应的，同时布局文件中定义为形如${XXX}样式的属性变量，必须在接口数据中传入对应的值，否则显示异常。

6.打开列表

数据设置完成后，在setItems的回调方法cbSetItems中调用打开列表视图方法open，如下：

其中openListView方法同上文中容器的创建示例，容器id为0的容器需要提前创建成功，否则会打开失败。调用open方法之后，若已经设置过数据，列表会直接显示，若没有设置过数据，则列表不显示。

• 显示效果：

7.列表数据的更新

列表数据的更新有以下几种方法：

1.重置列表数据，通过setItems方法实现；

2.更新列表中某一个item中的某一项数据，通过update方法实现；

3.向列表的某一位置添加一个item，通过insert方法实现；

4.从列表中删除一个item，通过delete方法实现。

具体可参考uexNBListView插件API文档。

如此，即可使用uexNBListView插件自定义应用的原生布局。