Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-15291

iOS7: backgroundColor="transparent" doesn't work on custom templates

    Details

      Description

      Problem description

      'transparent' backgroundColor property for ListView Templates is showing a 'white' backgroundColor in the ListItems instead of a transparent one.
      Setting a color it works as expected.

      Sample code and steps to reproduce

      Following sample code is basically the one available here http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.ListItem , adding

      properties: {
        		backgroundColor: 'transparent', // this will set the backgroundColor to white.
        		// backgroundColor: 'green'   // set the background to a color works
        	},
      

      to the 'plainTemplate' template.

      var win = Ti.UI.createWindow({
      	backgroundColor: 'yellow',
      	top:20
      });
       
      var plainTemplate = {
          childTemplates: [
              {                            // Image justified left
                  type: 'Ti.UI.ImageView', // Use an image view for the image
                  bindId: 'pic',           // Maps to a custom pic property of the item data
                  properties: {            // Sets the image view properties
                      width: '50dp', height: '50dp', left: 0
                  }
              },
              {                            // Title
                  type: 'Ti.UI.Label',     // Use a label for the title
                  bindId: 'title',         // Maps to a custom title property of the item data
                  properties: {            // Sets the label properties
                      color: 'black',
                      font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
                      left: '60dp', top: 0,
                  },
              },
              {                            // Subtitle
                  type: 'Ti.UI.Label',     // Use a label for the subtitle
                  bindId: 'subtitle',      // Maps to a custom subtitle property of the item data
                  properties: {            // Sets the label properties
                      color: 'gray',
                      font: { fontFamily:'Arial', fontSize: '14dp' },
                      left: '60dp', top: '25dp',
                  }
              }
          ],
        	properties: {
        		// These are the same as the list data item properties
        		// The list data item properties supersedes these if both are defined
        		backgroundColor: 'transparent', // this will set the backgroundColor to white.
        		// backgroundColor: 'green'   // set the background to a color works
        	},
          // Binds a callback to the click event, which catches events bubbled by the view subcomponents.
          events: {click: toggleCheck }
      };
       
      // The following API calls are equivalent to using jQuery.extend(true, {}, oldObject)
      // Copy the plainTemplate
      var redTemplate = JSON.parse(JSON.stringify(plainTemplate));
      // Change the text color to red
      redTemplate.childTemplates[1].properties.color = 'red';
      redTemplate.childTemplates[2].properties.color = 'red';
      // Rebind the click event callback
      redTemplate.events.click = toggleCheck;
       
      var listView = Ti.UI.createListView({
          // Maps plainTemplate to 'uncheck' and redTemplate to 'check' 
          templates: { 'uncheck': plainTemplate, 'check': redTemplate },
          // Use 'uncheck', that is, the plainTemplate created earlier for all items
          // Can be overridden by the item's template property
          defaultItemTemplate: 'uncheck',
          backgroundColor:'purple'
      });
       
      var tasks = [
          {id: 'trash', name: 'Take Out the Trash', person: 'Yakko', icon: 'trash.png'},
          {id: 'dishes', name: 'Do the Dishes', person: 'Wakko', icon: 'dishes.png'},
          {id: 'doggie', name: 'Walk the Dog', person: 'Dot', icon: 'doggie.png'}
      ];
       
      var data = [];
      for (var i = 0; i < tasks.length; i++) {
          data.push({
              // Maps to the title component in the template
              // Sets the text property of the Label component
              title : { text: tasks[i].name },
              // Maps to the subtitle component in the template
              // Sets the text property of the Label component
              subtitle : { text : tasks[i].person },
              // Maps to the pic component in the template
              // Sets the image property of the ImageView component
              pic : { image : tasks[i].icon },
              // Sets the regular list data properties
              properties : {
                  itemId: tasks[i].id,
                  accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_NONE,
                  // backgroundColor:'transparent' //this works
              }
          });
      }
       
      var section = Ti.UI.createListSection();
      section.setItems(data);
      listView.sections = [section];
       
      // Modified version of the `itemclick` event listener
      // Changes the item template rather than the list item's color property
      function toggleCheck (e) {
          var item = section.getItemAt(e.itemIndex);
          if (item.properties.accessoryType == Ti.UI.LIST_ACCESSORY_TYPE_NONE) {
              item.properties.accessoryType = Ti.UI.LIST_ACCESSORY_TYPE_CHECKMARK;
              item.template = 'check';
          }
          else {
              item.properties.accessoryType = Ti.UI.LIST_ACCESSORY_TYPE_NONE;
              item.template = 'uncheck';
          }
          section.updateItemAt(e.itemIndex, item);
      } 
       
      win.add(listView);
      win.open();	
      

      Further sample

      This is the Alloy sample originally provided from community.

      index.xml

      <Alloy>
          <Window class="container">
              <ListView id="lv">
                  <ListSection id="ls">
                          <ListItem title="row 1" color="white" backgroundColor="transparent"/>
                          <ListItem title="row 2" color="white" backgroundColor="blue"/>
                      </ListSection>
              </ListView>
              <ListView id="lv2" defaultItemTemplate="template1">
                  <Templates>
                      <ItemTemplate name="template1" height="100" backgroundColor="transparent">
                          <Label bindId="label" id="label1"/>
                      </ItemTemplate>
                  </Templates>
                  <ListSection>
                      <ListItem label:text="this is some text"/>
                  </ListSection>            
              </ListView>       
          </Window>
      </Alloy>
      

      index.tss

      ".container": {
          backgroundColor:"black"
      }
      "ListView":{
          backgroundColor: 'transparent'
      }
      "#lv": {
          top: '10dp',
          height: '100dp'
      }
      "#lv2": {
          top: '110dp',
          height: '300dp'
      }
      

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                vduggal Vishal Duggal (Inactive)
                Reporter:
                fcasali Federico Casali
                Reviewer:
                Sabil Rahim
              • Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Titanium SDK/CLI <> Titanium Mobile
                    Synced with:
                    TIMOB-17521
                    Sync status:
                    ERROR
                    Last received:
                    Last sent:

                    Git Source Code