4 Answers

• One way to do it would be to create a table and have a blank row where you want the break from one group to the next.

• David

  It seems to me that item views (one per setting), in a container view, on a scrollview would achieve your end result better.

• Thanks for your answers. Turns out I've done a bunch of custom row UIs but I always forget to move the table creation to be after I've setup my row data. Once I did that things began to fall into place. I then tried to generalize my solution by creating a function that I could use for repeated row inserts - with each row having a label and a switch. You'll find the code below.

  A few things to note:

  1. I create some Utility function to aid in setting and reading properties. It's just how I do things.

  2. I made the row creation function capable of taking a function from the caller that would be used when the row's value changes.

  If you have any suggestions on how this can be further improved, I'd love to hear about it. Right now, it seems to do what I wanted and, visually, is quite appealing.

  var win = Titanium.UI.currentWindow;
  
  var scrollView = Ti.UI.createScrollView({
      contentHeight:420,
      contentWidth:'auto'
  });
  
  win.add(scrollView);
  
  var row_data = [];
  
  Utility = {};
  
  /**
   * Get a settings value
   * 
   * @param {Object} name
   */
  Utility.getSetting = function (name)
  {
      return Ti.App.Properties.getString ('setting_' + name);
  };
  
  /**
   * Return true or false for settings value 
   * @param {Object} name
   */
  Utility.getSettingBool = function (name)
  {
      return (Ti.App.Properties.getString ('setting_' + name) == '1' ? true : false);
  };
  
  /**
   * Set a setting value
   * 
   * @param {Object} name
   * @param {Object} val
   */
  Utility.setSetting = function (name, val)
  {
      Ti.App.Properties.setString ('setting_' + name, val);
  };
  
  /**
   * Set a pseudo boolean value representation for a settings value
   * @param {Object} name
   * @param {Object} val
   */
  Utility.setSettingBool = function (name, val)
  {
      Ti.App.Properties.setString ('setting_' + name, val ? '1' : '0');
  };
  
  
  var open_to_compose = Utility.getSettingBool ('open_to_compose');
  var save_to_gallery = Utility.getSettingBool ('save_to_gallery');
  var clear_fields_after_send = Utility.getSettingBool ('clear_fields_after_send');
  var enable_app_sounds = Utility.getSettingBool ('enable_app_sounds');
  
  
  /**
   * Create a single row in our settings table
   * 
   * @param {Object} label
   * @param {Object} var_name
   * @param {Object} setFunc
   */
  function createSwitchRow (label, var_name, onSet)
  {
      var row = Ti.UI.createTableViewRow ({
          backgroundColor:'white',
          height:44,
          width:320,
          hasDetail:false,
          className: 'datarow'
      });
  
      var row_switch_label = Titanium.UI.createLabel({
          font:{fontSize:14,fontWeight:'normal', fontFamily:'Arial'},
          text: label,
          top:0,
          height:44,
          left:5,
          width:170,
          textAlign:'left'
      });
  
      var row_switch = Titanium.UI.createSwitch({
          value:var_name,
          top:8,
          left:195
      });
  
      row_switch.addEventListener('change',function(e)
      {
          onSet (row_switch.value);
      });
  
      row.add(row_switch_label);
      row.add(row_switch);
      return row;
  };
  
  var row1 = createSwitchRow ('Start in Compose mode', open_to_compose, 
      function(new_val){
          Ti.API.info ("open_to_compose now = " + new_val);
          Utility.setSettingBool ('open_to_compose', new_val);
      });
  
  var row2 = createSwitchRow ('Save new videos to Photo Gallery', save_to_gallery,
      function(new_val){
          Ti.API.info ("save_to_gallery now = " + new_val);
          Utility.setSettingBool ('save_to_gallery', new_val);
      });
  
  
  var row3 = createSwitchRow ('Clear compose fields after send', clear_fields_after_send,
      function(new_val){
          Ti.API.info ("clear_fields_after_send now = " + new_val);
          Utility.setSettingBool ('clear_fields_after_send', new_val);
      });
  
  var row4 = createSwitchRow ('Enable application sounds', enable_app_sounds,
      function(new_val){
          Ti.API.info ("enable_app_sounds now = " + new_val);
          Utility.setSettingBool ('enable_app_sounds', new_val);
      });
  
  row_data.push (row1);
  row_data.push (row2);
  row_data.push (row3);
  row_data.push (row4);
  
  // Create our table view and associate our
  // data rows (row_data)
  var tbl = Titanium.UI.createTableView ({
      rowBackgroundColor:'white',
      style: Titanium.UI.iPhone.TableViewStyle.GROUPED,
      data:row_data
  });
  
  // add our table to our scroll view
  scrollView.add (tbl);
  

• By the way - in the latest KitchenSink sample app. There's an example of how to do this (with about the same amount of code) and basically the similar method. The test page is table_view_controls2.js.