Android上的listview視圖響應方向

我在編寫Android和iOS平板電腦上運行的應用程序，支持兩種平臺上的多種屏幕尺寸以及橫向和縱向方向。Android上的listview視圖響應方向

應用程序使用ListView，我想根據平板電腦的方向對ListView行中的內容進行更改。

使用橫向，ListView行應該包括文字和圖形相鄰。縱向方向，圖形應顯示在文本下方。

我能夠在iOS上創建兩個包含不同ListView的視圖，並根據方向顯示相應的視圖。不幸的是，我無法在Android上覆制這些結果。我在應用程序的其他區域使用了orientation方法的類似視圖，兩個平臺都支持它，所以看起來ListView導致了這個問題。

以下附上一個小的演示應用程序反映這些症狀（文字顏色爲綠色的肖像和紅色的景觀，爲簡單起見，沒有圖像）：

var win = Ti.UI.createWindow({backgroundColor: 'white'}); 

var viewPortrait = Ti.UI.createView({ 
    top: '20%', 
    bottom: '20%', 
    left: '10%', 
    right: '10%' 
}); 
var templatePortrait = { 
    childTemplates: [{ 
    type: 'Ti.UI.Label', 
    bindId: 'info', 
    properties: { 
    color: 'green', 
    left: '5%', width: '200dip', height: '200dip', 
    textAlign: 'right' 
    }, 
    }] 
}; 
var listViewPortrait = Ti.UI.createListView({ 
    templates: { 'templatep': templatePortrait }, 
    defaultItemTemplate: 'templatep' 
}); 

var viewLandscape = Ti.UI.createView({ 
    top: '20%', 
    bottom: '20%', 
    left: '10%', 
    right: '10%' 
}); 
var templateLandscape = { 
    childTemplates: [{ 
    type: 'Ti.UI.Label', 
    bindId: 'info', 
    properties: { 
     color: 'red', 
     left: '5%', width: '200dip', height: '200dip', 
     textAlign: 'right' 
    } 
    }] 
}; 
var listViewLandscape = Ti.UI.createListView({ 
    templates: { 'templatel': templateLandscape }, 
    defaultItemTemplate: 'templatel' 
}); 

var sections = []; 
var section = Ti.UI.createListSection(); 
var data = [ 
    { properties:{height: '160dip'}, info: {text: 'Line text number 1'}}, 
    { properties:{height: '160dip'}, info: {text: 'Line text number 2'}}, 
    { properties:{height: '160dip'}, info: {text: 'Line text number 3'}}, 
]; 
section.setItems(data); 
sections.push(section); 

listViewPortrait.setSections(sections); 
viewPortrait.add(listViewPortrait); 

listViewLandscape.setSections(sections); 
viewLandscape.add(listViewLandscape); 

win.add(viewPortrait); 
win.add(viewLandscape); 
win.open(); 

Ti.Gesture.addEventListener('orientationchange', function() { 
    if (Ti.Gesture.isLandscape() === true) { 
    viewPortrait.hide(); 
    viewLandscape.show(); 
    } else { 
    viewPortrait.show(); 
    viewLandscape.hide(); 
    } 
});

在Android上，文本顏色永遠不會變爲紅色。當我在orientationchange偵聽器中註釋掉viewLandscape.show（）時，ListView完全消失（因爲viewPortrait.hide（），也證明偵聽器正在運行）。

我瞭解初始視圖（顯示viewPortrait和viewLandscape）並不理想，但這只是一個測試&我期望隨着方向改變orientationchange事件監聽器會清理它。它看起來像我在iOS上預期的那樣工作。

我有兩個問題。

爲什麼不顯示.show（）方法，因爲我期望在Android上使用ListView？
有沒有更好的方法來處理整體方向變化？我已經閱讀了Titanium的Orientation documentation的「對方向更改作出反應」部分，但我不清楚如何在模板已經加載後觸發事件，以便實際更改ListView（顯然，創建ListView後無法更改模板，並且setTemplate方法不存在）。

感謝您的幫助！

來源

2014-04-30 wolfet410

反而顯示的（）和隱藏（）方法，你可以嘗試view.visible =真，view.visible =假 –

我試圖使用setVisible方法而不是show（）＆hide（）並得到相同的結果。實際上，在我的測試中，無論可見屬性設置爲什麼，添加到窗口的第一個視圖都顯示在Android上。此行爲僅在視圖中使用ListView時存在。 – wolfet410

我能夠通過使用多個模板（無論如何是更乾淨的代碼）解決問題。

var listView = Ti.UI.createListView({ 
    templates: { 
    'templatePortrait': templatePortrait, 
    'templateLandscape': templateLandscape 
    }, 
    defaultItemTemplate: 'templatePortrait' 
});

....剪斷....

Ti.Gesture.addEventListener('orientationchange', function() { 
    if (Ti.Gesture.isLandscape() === true) { 
     // Landscape 
     listView.defaultItemTemplate = 'templateLandscape'; 
    } else { 
     // Portrait 
     listView.defaultItemTemplate = 'templatePortrait'; 
    } 
});

來源

2014-04-30 14:22:33 wolfet410

Android上的listview視圖響應方向

回答

相關問題