钛功能

时间:2012-10-08 11:00:38

标签: titanium-mobile google-places-api appcelerator-mobile

我是titanium的新手,我试图根据wireframes构建一些原型。下面是我正在尝试构建原型的wireframe

您看到的是从google places api获取的餐馆列表。这里的主要功能是黑色条带,它将处于固定位置,并保留其下方特定餐厅的评级和评论细节。

因此,如果我滚动浏览餐厅,黑色条带应该获得该餐厅下面的特定餐厅的评级细节。

到目前为止,我能够将google places api中的餐馆数据抓取到表格视图的行中。

我不确定该如何调用此功能或如何实现此功能。

请你们指点一下继续前进......

2 个答案:

答案 0 :(得分:2)

@Sarat,

我假设您想开发适用于iOS或Android应用程序的Prototype,因此使用Titanium我的设计和放大器的建议如下:功能

实现设计: 对于Android - 使用相对布局和列表视图,您可以使用固定位置

在顶部加载评级/审核图标

对于iOS / iPhone - 添加父视图然后添加表视图以加载餐厅并在另一个表视图中添加评级/评论图标与餐馆列表的相同顶部位置

实现功能 您将获得正在加载餐馆列表的表格视图的第一个单元格索引,因此请使用单元格标识符检查表格的哪个单元格位于“表格”顶部。

答案 1 :(得分:0)

将它作为行的一部分包含在内是不是更容易?否则,用户一次只能看到一行信息,我认为这是不好的设计。

更重要的是,除非你在TableView的末尾添加了很多虚拟表行,否则这个将无法在iOS上运行,因为用户无法将最底部的行滚动到屏幕上方!

This tutorial shows you how to have custom table rows.使用它作为起点来添加评论和按钮图像。我真的看不到其他选择,因为你的固定位置方法需要黑客攻击TableView组件或使用变换将底行移动到顶部。

编辑:

如果你必须这样做,最好的方法是在实际表行的末尾添加一些空白表行,以便用户可以一直向下滚动到包含内容的最后一行(这样固定位置就可以检测到它)。

接下来创建包含三个按钮的视图,确保它在窗口中的绝对位置(因此它保持固定)并且zIndex大于TableView:

var likeAndCommentHolderView = Ti.UI.createView({
    top : 45,
    left : 0,
    //.... etc
    zIndex : 101
});
window.add(likeCommentHolderView);

现在你必须找出用户在哪一行。这可以使用TableView的scrollEnd事件并获取事件的contentOffset属性来完成。当用户完成滚动tableView中的行时会触发'scrollEnd'事件,它会返回一个contentOffset的事件,这只是衡量你从顶部<滚动的数量的一个指标/ strong>的tableView。使用简单的数学运算,计算偏移量除以rowHeight,即用户正在查看的行索引。

// Assume table view is at coordinates : top=45, left=0 and you have defined rowHeight
tableView.addEventListener('scrollEnd', function(e) {
    // Use this to determine which row your over
    var contentOffset = e.contentOffset;
    // Figure out the index
    var rowIndex = contentOffset / rowHeight;
    // Get the row, assume first section
    var section = tableView.data[0];
    var rowObject = section.rows[rowIndex];
    // Now update your UI with data from the row
    var name = rowObject.restaurantName;
});

现在你在表中有了实际的行对象,你可以提取

这只是一个大致的概述,这并没有考虑平台之间的一些差异,我留给你弄清楚,但这是一个很好的通用方法。