Titanium笔记---ScrollableView

最新推荐文章于 2021-05-29 00:15:55 发布

原创最新推荐文章于 2021-05-29 00:15:55 发布 · 968 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#titanium #scrollableview #类似Facebook列表 #图片翻阅

Titanium 专栏收录该内容

1 篇文章

订阅专栏

文章详细记录了使用Titanium进行Android和iOS跨平台应用开发的经验，包括解决Facebook List功能实现、图片集显示与切换、图片点击放大等功能。介绍了通过XML、JS、CSS构建组件，以及在不同场景下处理高度、宽度变化和数据更新的问题。分享了选择模板、处理图片显示和点击事件的方法，以及如何优化用户体验。

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

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

1. 类似Facebook的List：

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

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

一开始做法是这样的：

xml：

<Alloy>
	<View class="container">
		<ListView id="dataListView" separatorColor="#FFF">
			<Templates>
				<ItemTemplate name="template">
					<View bindId="main" id="main">
						<ScrollableView bindId="scrollableView" id="scrollableView" showPagingControl="true" height="150"/>
					</View>
				</ItemTemplate>
			</Templates>
			<ListSection id="listSection" ></ListSection>
		</ListView>
	</View>
</Alloy>

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了。（累觉不爱了。。。基础啊）<pre name="code" class="java"><span style="font-size: 14px;">});</span>

传图片这里也有讲究，你是要在listview界面下载好图，还是先显示小图，点击后下载大图并显示，这是你自己的选择了，总之你在点击每一个图片（任意位置）后并显示指定图片，并能左右翻阅。就要传递所有图片的array和指定图片的index。在scrollableview中设置currentPage : index来首先显示指定图片。

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