Titanium：创建类似于 iPhone 联系人（编辑模式）应用程序中的字段答案

【问题标题】：Titanium: Create fields like the ones in iPhone Contacts (Edit Mode) appTitanium：创建类似于 iPhone 联系人（编辑模式）应用程序中的字段
【发布时间】：2012-02-15 14:24:34
【问题描述】：

注意：分隔符又名分隔符是这个问题的重点。它必须是可见的。

有没有办法创建类似于 iPhone 联系人（编辑联系人模式）应用程序中的字段？

我想创建一个分隔符，将 titleLabel 与 textField 分开。 喜欢“名字|提示文本” 而不是“名字提示文本”

我认为我正在尝试做的事情与此类似......除了我使用的是 Titanium。有没有办法使用钛做到这一点？ How is iPhone Contact app's detail View implemented

@MRT 和任何知道的人：您将如何使组合视图看起来像这样？

 ____________________
( Name  |   hinttext )
 --------------------

【问题讨论】：

标签： iphone titanium contacts field tableview

【解决方案1】：

您必须创建一个新的 TableViewRow 并对其进行自定义。

可以在TableViewRow中放置标签、字段、图片等。

例子：

var row = Ti.UI.createTableViewRow();

var label = Ti.UI.createLabel({
    text: "Name",
    width: 50,
    top: 5,
    bottom: 5,
    left: 5,
    font: {fontSize:10}
});
row.add(label);

【讨论】：

我的意思是，如何添加分隔线？我知道如何添加名称标签和文本字段。但是如何添加分隔线？

【解决方案2】：

试试这个对你真的有用

var view1 = Ti.UI.createView({
    height : 50,
    width: 150,
    top: 5,
    bottom: 5,
    left: 5,
    font: {fontSize:10}
});
var text1 = Ti.UI.createTextField({
    hintText : 'First Name',
    height : 50,
    width: 75,
    top: 0,
    left: 0,
    font: {fontSize:10}
});
var text2 = Ti.UI.createTextField({
    hintText : 'hint text',
    height : 50,
    width: 75,
    top: 0,
    left: 75,
    font: {fontSize:10}
});

view1.add(text1);
view1.add(text2);

【讨论】：

你能看一下后续问题吗？谢谢。
你有两种方法可以做到这一点。检查下面:.

【解决方案3】：

你有两种方法可以做到这一点。

取 2 个 TextField 并调整（顶部和左侧边距）并将其连接起来。或

1 取 1 个文本字段 2.取1个标签，它的宽度为2，高度等于文本字段的高度。 3.TextField.add(lable1)

var win1 = Ti.UI.createWindow({
title : 'Window1',
backgroundColor : '#f00',
id    : 0,
});

var text1 = Ti.UI.createTextField({
width : 150,
height : 50,
borderRadius : 9,
backgroundColor : '#fff',
top  : 50,
left : 20,
    });

var label1 = Ti.UI.createLabel({
width : 2,
height : 50,
top   : 0,
left  : 75,
});

text1.add(label1);
win1.add(text1);
win1.open();

【讨论】：

中间的分隔线怎么做？这实际上是我问题的主要问题。 +++ 如果我创建一个标签，它会有圆角吗？我只想要左边的圆角和右边的尖角。
我写了一个完整的演示代码，你可以复制过去并在模拟器上运行。在这之后你告诉我。发生了什么，你想要什么，好吧......
1) 代码在 iPhone 上按预期运行，但没有分隔线。我的问题的主要问题是关于分隔线。所以问题还没有解决。 2）它不适用于Android。 Android 总是导致问题大声笑 - 标签甚至没有出现。我在标签中添加了文本，并将宽度设为 50。仍然没有文本。

【解决方案4】：

添加垂直线

var vline = Ti.UI.createView({
    height: 44,
    width: 1,
    top: 0,
    left: 85,
    backgroundColor:'#CCC'
});

row.add(vline);

【讨论】：

这条线不是动态的吧？你知道一种方法来创建一条自动跟随文本框高度的动态线吗？

【解决方案5】：

您只需要创建一个 TableViewRow 并为其添加标签。此行没有现成的模板。但是你可以为它创建一个 wrapper，如果你会经常使用它的话。例如：

var createTableViewRowWithTitleAndValue(title, value) {

    // TableViewRow
    row = Ti.UI.createTableViewRow({
        backgroundColor: "#FFFFFF"
    });

    // Title
    row.add(Ti.UI.createLabel({
        text: title,
        left: 5,
        font: { fontWeight: "bold" }
    }));

    // Value
    row.add(Ti.UI.createLabel({
        text: value,
        right: 5,
        textAlign: "right"
    }));

}

然后，当您将数据设置到 TableView 时，您会创建一个新的 TableViewRow，而是创建一个具有 title 和 value 的新 tableViewRowWithTitleAndValue需要。例如：

rows.push(new createTableViewRowWithTitleAndValue("Foo", "Bar"));

【讨论】：