Titanium：将 ActivityIndi​​cator 添加到 listView？

Question

http://docs.appcelerator.com/titanium/3.0/?mobile=/api/Titanium.UI.ActivityIndicator

是否可以以及如何将 ActivityIndi​​cator 添加到 listView listItem？可能通过选定项目上的 listView 模板...

提前致谢！

Answer 1

是的，有可能，这是一个sn-p：

1. 首先从定义列表项模板开始：

   // Some text row 
   var someTextTemplate = {
       properties: {
           accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_NONE
       },
       childTemplates: [ // Add view subcomponents to the ListItem
           {
               // Display a Label
               type: 'Ti.UI.Label',
               bindId: 'someRowText',
               properties: {
                   font: {fontSize: '14dp'}
               }
           }
       ]
   };
   
   //This is your loading template
   var loadingTemplate = {
       properties: {
           accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_NONE
       },
       childTemplates: [ //And here is where the activity indicator goes
       {
           // Display an activity indicator
           type: 'Ti.UI.ActivityIndicator',
           // If there is a 'loadingIndicator' dictionary in the ListDataItem,
           // that data binds with this view subcomponent (useful for changing
           // the loading message, for example)
           bindId: 'loadingIndicator', 
           properties: {
               // Set the indicator properties
               font: { fontSize: '22dp'},
               width: Titanium.UI.SIZE,
               height: Titanium.UI.SIZE,
               // If you don't set visible to true, the indicator will not show,
               // because unlike other UI elements, it is hidden by default
               visible: true, 
               //Other styles available, just check the component doc      
               style: Titanium.UI.iPhone.ActivityIndicatorStyle.PLAIN
           }
       }
       ]
   };
   

2. 然后设置你的 ListView

   // Create the list section
   var listSection = Titanium.UI.createListSection();
   
   // Add the list section to a list view
   var listView = Titanium.UI.createListView({
       width: Ti.UI.FILL,
       height: Ti.UI.SIZE,
       layout: 'vertical',
       touchEnabled: true,
       sections: [listSection],
       templates: {'rowText': someTextTemplate, 'loading': loadingTemplate },
       defaultItemTemplate: 'rowText',
       showVerticalScrollIndicator: true
   });
   

3. 最后，添加一些列表数据项

   var someData = [];
   // This will add a row with a label, because we've set 'rowText' as our 
   // default ListView template
   someData.push({
       someRowText: { text: 'Some text row 1'}
   });
   // This will also show another label row, because we're specifying 
   // the template to use, in this case the label one
   someData.push({
       someRowText: { text: 'Some text row 2'},
       template: 'rowText'
   });
   // Now we're going to use the 'loading' template, therefore showing 
   // the activity indicator in the row
   someData.push({
       loadingIndicator: { message: 'Please wait while transfering data from the mothership...' },
       template: 'loading'
   });
   
   //Add our data items to the listview section
   listSection.setItems(someData);
   

您也可以混合使用多个模板，但我已尽量简化示例。