扩展控件

需要使用原生技术，高级功能，新手勿入

扩展控件在现有封装的控件不足以满足我们的要求时，可以通过自定义扩展控件来实现，即为平台扩展开发新的控件。
扩展控件开发完成之后，需要在菜单-移动平台-扩展控件导入才可见（导入后需要重新打开Window）。

注意：使用扩展控件需要在配置文件的插件页签中勾选对应的插件。

扩展控件制作和管理

1、准备材料

此处不讲解如何开发扩展的原生部分，假设扩展的原生部分已经开发完成。
取Android及IOS扩展控件的相关源文件（包含原生代码、相关资源及启动文件）。

2、制作扩展控件

（1）、拷贝资源

以IM_Control为例（IM_Control为电脑中的某个目录），将准备的Android扩展控件（包含原生代码、相关资源及启动类）拷贝到IM_Controlandroid目录下；IOS扩展控件（包含原生代码、相关资源及启动库）拷贝到IM_Controlios目录下。
然后制作控件在设计器工具箱的显示图标，放置到IM_Control目录下，图标信息如下：

toolbarpic：工具箱控件图标，尺寸48*48px
background：控件在画布区域的背景图，尺寸自定

（2）、创建配置文件

在IM_Control目录下创建名为control.config的配置文件。如下图：

（3）、编辑配置文件

<?xml version="1.0" encoding="UTF-8"?>
<plug>
    <controls type="android">
        <import type="jar" ref="android/libs/" obj="path" />
        <import type="res" ref="android/res/" obj="path" />
        <control name="YYIMRecentchatListView" height="200" width="100" classname="com.yonyou.sns.im.uapmobile.control.YYIMRecentchatListView" background="RecentchatListView_Designer.png" toolbarpic="RecentchatListView_Icon.png" displayname="最近联系人控件">
            <property name="list-background" type="color" propertygroup="Style" displayname="列表的背景颜色"/>
            <property name="row-background" type="color" propertygroup="Style" displayname="行的背景颜色"/>
            <property name="divider-color" type="color" propertygroup="Style" displayname="分隔线的背景颜色"/>
            <property name="text-name-size" type="number" propertygroup="Style" displayname="名称字体大小"/>
            <property name="text-name-color" type="color" propertygroup="Style" displayname="名称字体颜色"/>
            <property name="text-detail-size" type="number" propertygroup="Style" displayname="消息字体大小"/>
            <property name="text-detail-color" type="color" propertygroup="Style" displayname="消息字体颜色"/>
            <property name="text-time-size" type="number" propertygroup="Style" displayname="时间字体大小"/>
            <property name="text-time-color" type="color" propertygroup="Style" displayname="时间字体颜色"/>
            <property name="onrowclick" type="action" displayname="响应行的点击事件"/>
            <!-- 属性名：chatid，chattype -->
        </control>
    </controls>
    <controls type="ios">
        <import type="so" ref="ios/Source/" obj="path"/>
        <control name="YYIMRecentchatListView" classname="YYIMRecentchatListView"  hfile="YYIMRecentchatListView.h" background="RecentchatListView_Designer.png" toolbarpic="RecentchatListView_Icon.png" displayname="最近联系人控件">
            <property name="list-background" type="color" propertygroup="Style" displayname="列表的背景颜色"/>
            <property name="row-background" type="color" propertygroup="Style" displayname="行的背景颜色"/>
            <property name="divider-color" type="color" propertygroup="Style" displayname="分隔线的背景颜色"/>
            <property name="text-name-size" type="number" propertygroup="Style" displayname="名称字体大小"/>
            <property name="text-name-color" type="color" propertygroup="Style" displayname="名称字体颜色"/>
            <property name="text-detail-size" type="number" propertygroup="Style" displayname="消息字体大小"/>
            <property name="text-detail-color" type="color" propertygroup="Style" displayname="消息字体颜色"/>
            <property name="text-time-size" type="number" propertygroup="Style" displayname="时间字体大小"/>
            <property name="text-time-color" type="color" propertygroup="Style" displayname="时间字体颜色"/>
            <property name="onrowclick" type="action" displayname="响应行的点击事件"/>
            <!-- 属性名：chatid，chattype -->
        </control>
    </controls>
</plug>

（4）、属性说明

可自定义属性说明

import ef：Android是指扩展的Jar包所在目录，IOS是指扩展的Source目录
control ame：控件的名字
controlheight：控件的高
controlwidth：控件的宽
controlclassname：Android为控件对应的类路径，IOS为类名
controlclassname：IOS类对应的头文件，仅IOS有
controlackground：控件在画布区域的背景图
control oolbarpic：工具箱控件图标
controldisplayname：控件在工具箱显示的名字
property ame：属性的名字
propertydisplayname：属性在属性视图中显示的名字

固定属性说明

controls ype：平台类型（android表示Android，ios表示IOS）
import ype：源类型（jar表示Android库，res表示Android资源；so表示IOS库）
importobj：资源类型（path表示目录，file表示文件）
property ype：属性的类型（color表示颜色；number表示数字；action表示方法）
propertypropertygroup：属性所在的分组（Style表示样式；Basic表示属性；事件不需要设置此属性）

（5）、制作压缩文件

将以上制作的目录压缩成zip包（包名随意），如下图：

3、扩展控件管理

制作完控件后可在菜单-扩展控件中将控件导入、导出或删除，如下图：

4、扩展控件使用

扩展控件导入之后，重新打开页面编辑器，在工具箱的自定义中就可以看到我们导入的扩展控件了，拖动就可以了，和其它标准控件一样哦！

5、扩展示例下载

地址：https://pan.baidu.com/s/1bNm8pS

文档更新时间: 2018-05-08 13:42

扩展控件（自定义）