|
上月Rexsee宣布发布了最新版,开始支持原生UI布局,对此一直在留意更新的内容。。除了当天发布的新版开发手册有一些新的东西出来以外,一直没看到别的动作,倒是上周有软文报道说到了一个图片集的应用工具,简单说来就是直接上传图片,在线编译生成APK。。
只可惜访问了Rexsee的项目中心,也只是看到源码,没有看到这个具体的工具,难不成还有设限?
仔细看了共享出来的源码,稍微说明一下。图片集应用创建成功后的源码主要由如下几个文件组成:
1.Index.html:主要代码页
2.Config.js
3.Gallery目录:存放大图片文件
4.Icon目录:存放图标文件
5.Info目录:存放图片说明文件
6.Thumbnail目录:存放gallery缩略图文件
7.其它图片,如按钮、logo等
主要代码还是集中在index.html文件的<script>标签内,我们挑选比较重要的JS代码,逐一进行分析。
首先需要重点介绍新版Rexsee所提供的rexseeJavaView对象及事件,主要用于创建和管理原生界面布局元素,支持一下原生布局(API8的全部布局)。
创建封面的javaview:
rexseeJavaView.create('cover','LinearLayout','orientation:y;background-color:#000000;');
rexseeJavaView.create('text','ImageView','icon-url:...android_asset/rexsee_text.png;width:150;height:wrapcontent;icon-padding-bottom:30px;');
rexseeJavaView.create('progress','ProgressBar','mode:circular;width:36;height:36;');
rexseeJavaView.setChilds('cover','text|progress');
rexseeJavaBar.add('cover','border-width:0;bar-position:layout;');
1.id是cover;类型是线性布局,垂直方向顺序布局,背景颜色为黑色;
2.id是text;类型是图片布局,资源文件是...android_asset/rexsee_text.png;宽150,高是根据内容决定,底内边距30px;
3.id是progess,类型是进度条,无进度条,圆形旋转,宽36,高36;
4.设置text和progress与cover的父子关系;
5.显示封面cover,边框宽度为0,覆盖在整个布局上。
创建可缩放的Gallery类型的javaview
rexseeJavaView.create('multiTouchGallery','ThreeDGallery','mode:drawable;background-color:#000000;vertical-align:middle;');
rexseeJavaView.setChilds('multiTouchGallery',touchList);
rexseeJavaView.setStyle('multiTouchGallery','duration:1000;icon-width:'+screenWidth+';icon-height:500;horizontal-spacing:-20;distance-threshold:100;event-touch:true;event-multitouch:true;');
1.idmultiTouchGallery,类型是ThreeDGallery,背景颜色为黑色,垂直居中对齐;
2.将所有的大图文件加载到multiTouchGallery中;
3.动画时间为1000毫秒,图片宽度为屏幕的宽度,高度为500,帧之间的间隔为-20,当多点触控缩放模式启动后,用户拖拽图片导致图片边缘距离对象边缘超过100毫秒时会触发onImageDragedOverThreshold事件,响应触屏、多点触屏事件
rexseeJavaView.create('threeDGallery','ThreeDGallery','mode:drawable;background-color:#000000;effect:reflectshader;vertical-align:middle;');
rexseeJavaView.setChilds('threeDGallery',galleryList);
rexseeJavaView.setStyle('threeDGallery','zoom:-200;duration:1000;icon-width:150;icon-height:500;horizontal-spacing:-20;event-touch:true;');
1.创建默认的Gallery类型的javaview,类型是ThreeDGallery,模式是图片,背景颜色为色,有倒影,垂直居中对齐;
2.将所有的缩略图文件加载到threeDGallery中;
3.设置样式,当前图片在z轴的-200处,帧间隔为-20,图片宽度150,高度500,帧之间间隔为-20,响应触屏事件;
4.默认的3DGallery
呃,文件太多了,官方也没个正式说明,太辛苦。。没顾得上整理,想到哪写到哪了,估计没人看的明白,建议去Rexsee的项目中心自个儿琢磨琢磨源码吧,反正也是全部开放的。。
支持原生UI,至少这一点对我而言还是蛮有吸引的 |
|