Titanium : ActivityIndicator를 listView에 추가 하시겠습니까?

Question

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

ActivityIndicator를 listView listItem에 추가 할 수 있습니까? 아마도 선택한 항목의 listView 템플릿을 통해 ...

미리 감사드립니다!

Answer 1

예, 여기, 수있는 코드 조각입니다 :

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

마지막으로

// 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 
     } 
    } 
    ] 
}; 

그런 설정 당신의 ListView :

1. 먼저 시작 목록 항목 템플릿을 정의하여 , 일부 목록 데이터 항목 추가

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

또한 여러 개의 템플릿을 혼합 할 수 있습니다,하지만 난 가능한 한 많은 예제를 단순화하기 위해 노력했습니다.