Titanium笔记---ScrollableView

最近因为工作需要,做Android&iOS跨平台的项目,开始学习Titanium,由于Titanium是由Js,xml,tss(其实就是css)构成,所以对于Java开发者来说比较容易上手。

在工作中也遇到遇些问题,在此做个记录。


1. 类似Facebook的List:


虽然不知Facebook具体是如何做到的,我的方案为垂直的ListView + 横向的ScrollableView(每个ListItem显示图片)。

下面要实现的功能就是在垂直的ListView的每个item中有个横向翻阅的图片集,有图则显示,没图则不显示

一开始做法是这样的:

xml:


	
		
			
				
					
						
					
				
			
			
		
	


js:
dataSet.push({ // 添加数据
	template : "template",

	scrollableView : {		//在这里可以设置 visible,height,width等属性,后来发现有问题,下面再说
          views : photoViewSet, //photoViewSet是一个ImageView的array,就是一个item中横向的图片集
         }
});
$.dataListView.setMarker({ // 这里是为ListView动态刷新做的maker
        sectionIndex : 0,
        itemIndex : $.listSection.getItems().length - 1
});
function markerFunction() {
        // 添加数据操作,设置一个lastIndex,每次递增请求数据
}
$.dataListView.addEventListener('marker', markerFunction); //设置marker监听
以上就是主要代码。
上面scrollableview注释部分原来我是设置有图和没图时是否显示scrollableview的设置,要涉及到visible,height,width 3个属性,有人说只要visible就可以了,确实不显示了,但是它的height和width还在,至少得把height给设置为0 。
但是这里出现了一个问题。每次在滑动ListView时,没图和有图交替时,程序会crash掉,纠结了我多久(经验不够啊),后来提示才看明白是scrollableview的height和width发生变化需要类似Android中notifydatasetchanged的操作才行,找了很久也没找到具体的方法。之后,想到了一个惊天地泣鬼神的方法,终于解决了----------------新加一个template,一个有scrollableview,一个没有,在dataSet.push前面判断,来选择template。。。(尽管沉默吧。。。)
如果要想点击每个图片然后放大,类似Facebook或者QQ空间浏览大图时的操作,就要对每一个imageview做监听,一开始我在listview的itemclick监听事件里面做操作,总是拿不到imageview,后来在每个imageview的click监听事件中也做操作,因为是在循环push和update数据,所以得到指定的图片这个问题卡了我很久。
解决方案出来了: 
imgView.addEventListener("click", function(e) {
	Util.showImagesPopup(e.source.properties.photos, e.source.properties.index);// 忽略Util.showImagesPopup,这是一个全局的方法,弹出全屏大小的图片并进行翻阅,类似scrollableview,不做详解,主要讲的就是e.source就可以得到指定的imageview了。(累觉不爱了。。。基础啊)
});
 
   
传图片这里也有讲究,你是要在listview界面下载好图,还是先显示小图,点击后下载大图并显示,这是你自己的选择了,总之你在点击每一个图片(任意位置)后并显示指定图片,并能左右翻阅。就要传递所有图片的array和指定图片的index。在scrollableview中设置currentPage : index来首先显示指定图片。

讲完了,如果有更好的解决方案的话,请分享下,造福全码农!


你可能感兴趣的:(Titanium)