0

Note: The divider aka separator is the main point of this question. It must be visible.

Is there a way to create fields like the ones in the iPhone Contacts (Edit Contact Mode) app?

I want to create a separator that separates the titleLabel from the textField. Like " First Name | hinttext " Instead of " First Name hinttext "

I think what I am trying to do is similar to this... except that I am using Titanium. Is there any way to do this using Titanium? How is iPhone Contact app's detail View implemented

@MRT and anyone who knows: How would you make the combined view such that it looks like this?

 ____________________
( Name  |   hinttext )
 --------------------
Community
  • 1
  • 1
John Tan
  • 509
  • 3
  • 8
  • 19

5 Answers5

0

You just have to create a TableViewRow and add labels to it. There is not a ready template to this rows. But you can create an wrapper to it, if you will use it a lot. For example:

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"
    }));

}

Then, when you set data to TableView, instead you create a new TableViewRow, you create a new tableViewRowWithTitleAndValue, with title and value needed. For example:

rows.push(new createTableViewRowWithTitleAndValue("Foo", "Bar"));
Rafael Kellermann Streit
  • 160
  • 1
  • 7
0

You will have to create a new TableViewRow and customize it.

You can put labels, fields, images, etc. in the TableViewRow.

Example:

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);
Rafael Kellermann Streit
  • 160
  • 1
  • 7
  • I mean, how do I add that divider? I know how to add the name label and the text field. But how do I add the divider? – John Tan Feb 22 '12 at 16:23
0

Try it this really usefull to you 

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);
MRT
  • 1,610
  • 15
  • 41
0

you have 2 way to do this.

  1. take 2 TextField and adjust (top and left margin) and joint it. or

1 Take 1 TextField 2. take 1 Label and its width 2 and height is equal to the textfield height. 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();
MRT
  • 1,610
  • 15
  • 41
  • How do you do the divider in the middle? That's actually the main issue in my question. +++ If I create a label, it would have rounded corners right? I only want rounded corners on the left and sharp corners on the right. – John Tan Feb 29 '12 at 16:47
  • i write a demo full code u can copy and past and run on simulator. after this u tell me that. what happened and what u want okey... – MRT Mar 01 '12 at 05:53
  • 1) The code runs as expected for iPhone but there is no divider line. The main issue of my question is regarding the divider line. So the question hasnt been solved yet. 2) It's not working for Android. Android is always causing problems lol - the label doesn't even appear. I added text into the label and also made the width 50. Still no text. – John Tan Mar 03 '12 at 14:38
0

To add a vertical line

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

row.add(vline);
grim
  • 1
  • This line is not dynamic right? Do you know of a way to create a dynamic line that will follow the height of the textbox automatically? – John Tan Apr 01 '12 at 05:00