如何在方向更改時使用不同的XML模板重新加載頁面？

Question

如何在設備的方向更改時重新加載頁面（使用新模板）？ 我想要橫向模式下的不同佈局。這是在NativeScript中，而不是Java。

如果我到達橫向頁面，選擇正確的XML文件，但如果我改變方向，沒有東西會被重新加載。

請注意，這不是刷新CSS的問題，它是需要的不同的XML文件。

Answer 1

NativeScript解決方案：

首先你要扎入方向的事件。你可以通過一些方法來解決這個問題。

第一種也是最簡單的方法是安裝nativescript-orientation插件，它將全局綁定到事件上，然後每當方向更改時，它就會自動在當前每個稱爲方向的頁面上運行導出的函數。
安裝：

tns plugin install nativescript-orientation 

打開app.js文件，並在文件的頂部添加;

require('nativescript-orientation'); 

然後通過創建：

exports.orientation = function(args) { 
    if (args.landscaped) { /* do landscape stuff */ } 
    else { /* do port */ 
}; 

要被通知的方向改變的任何網頁上，它會被稱爲對那些有功能的頁面，您可以處理該事件如何需要。

---

但是，如果您不想使用插件，您可以直接扎入方向的事件自己做：

var application = require('application'); 
exports.onNavigateTo = function() { 
    application.on(application.orientationChangedEvent,myOrientationFunction); 
} 

exports.onNavigateFrom = function() { 
    application.off(application.orientationChangedEvent, myOrientationFunction); 

function myOrientationFunction(args) { 
    // We have an orientation event 
} 

但是你必須要求被通知的事件時，你的頁面首先打開，當頁面關閉時，您必須從通知中刪除自己。這是上面的插件爲您處理的每頁大量額外代碼。請注意，當你自己做這件事時，你還需要將NavigateTo/NavigatedFrom添加到你的Declarative UI XML文件中的標籤，否則這些函數將不會被調用。

---

好吧，現在你有事件，你喜歡的方式;讓我們看看我們如何才能讓您的想法成功。

現在，您每次頁面更改時都要求切換佈局;這通常是最糟糕的事情;但我會先回答它，然後爲您提供另一種方法，我可以使用這種方法來自動執行縱向和橫向模式下複雜的佈局。

我的編目-Landscape.xml

<Page><StackLayout><Label text="Landscape"/></StackLayout></Page> 

我的編目-Portrait.xml

<Page><StackLayout><Label text="Portrait"/></StackLayout></Page> 

我的編目-Landscape.js

var commonPage = require("./MyPage.js"); 
var frame = require('ui/frame'); 
exports.orientation = function(args) { 
    if (args.landscape === false) { 
    frame.topmost().navigate('MyPage-Portrait'); 
    } 
}; 

// Tie all the common page code into this pages exports 
for (var key in commonPage) { 
    if (commonPage.hasOwnProperty(key)) { 
     exports[key] = commonPage[key]; 
    } 
} 

我的編目，Portrait.js

var commonPage = require("./MyPage.js"); 
var frame = require('ui/frame'); 
exports.orientation = function(args) { 
    if (args.landscape === true) { 
    frame.topmost().navigate('MyPage-Landscape'); 
    } 
}; 

// Tie all the common page code into this pages exports 
for (var key in commonPage) { 
    if (commonPage.hasOwnProperty(key)) { 
     exports[key] = commonPage[key]; 
    } 
} 

MyPage.js

exports.TapHandler = function() { /* Someone Tapped */ } 
exports.someOtherLogic = function() { /* More logic */ } 
exports.etc = function() { /* etc */ } 

你把你所有的常見頁面邏輯在我的頁面文件;但是您可以專門導航到特定的橫向或縱向頁面;如果頁面方向改變，他們每個人都有責任導航到其他版本。

---

注意有關上述解決方案：

1. 您需要導航到任何其他頁面的頁面的正確版本;即。如果您處於風景模式;當你導航到另一個頁面;您需要確保導航到頁面的Landscaped版本。
2. NS方向插件會給你一個句柄輔助函數來找出當前的方向，以使這更容易。
3. 記住要讓MyPage.js擁有所有的通用代碼;您想嘗試並消除特定頁面版本上的任何自定義代碼。
4. 它們是您可以使用的幀重新加載命令;然而它完全清除了歷史;這意味着你不能向後導航。即Page1 - > Page2，frame.reloadPage（）意味着後退按鈕不會回到Page1。如果這是可以接受的;你可以使上述系統簡單得多;而不是創建單獨的xml & js文件，您只需要myPage.landscape.xml和myPage.portrait.xml，並且您需要在每個方向更改上調用frame.reloadPage（）;

---

現在我上面是什麼可能是你需要的網頁之間做一個簡單的改變一些嚴重的矯枉過正。所以我將描述我在應用程序中如何執行此操作;它有一些相當複雜的屏幕，但它們看起來非常漂亮，並且完全改變了方向改變的功能。

這是NativeScript方向插件寫入的原因的一部分。在頁面方向上的變化會自動爲您的XML中的<Page>元素添加/刪除「橫向」類名稱。這可以讓你在你的CSS中做什麼：

.myLabel { 
    font-size: 12; 
    background-color: blue; 
    height: 20; 
} 

.landscape .myLabel { 
    font-size: 16; 
    background-color: green; 
    height: 40; 
} 

如果你還沒有弄清楚我要去哪裏，這允許您在橫向模式下處理頁面的自定義CSS，而不是在縱向模式下。另外，當您使用exports.orientation函數時，您也可以根據方向運行自定義代碼。

所以在我的情況下;在手機上，我的滾動列表是一個向上滾動的單個滾動列表，其大小完全適合屏幕，看起來非常銳利。當您切換到橫向模式時;它隱藏了操作欄，添加了一個晶圓廠按鈕，調整整個柵格項目以適合相同的比例，並將滾動模式切換到左側。整個外觀變化的大部分是在純CSS中完成的;其餘部分在exports.orientation函數中完成，它處理切換滾動方向等事情。

免責聲明：我是NativeScript定向插件

Answer 2

在你的活動：

@Override 
public void onConfigurationChanged(Configuration newConfig) { 
    super.onConfigurationChanged(newConfig); 
    setContentView(R.layout.my_layout); 
} 

確保您有相同名稱的佈局XML用於兩個方向

res/layout/my_layout.xml 
res/layout-land/my_layout.xml 

Answer 3

有了正確的資源文件名的Android系統有適當的資源會自動重新加載你的活動/片段。 您可以通過設置android：configChanges來手動捕獲和處理事件（但這種情況很少見）。

檢查一些文檔：

• Handling Runtime Changes
• Providing Resources