2016-04-14 8 views
0

デバイスの向きが変わったときにページをリロードする方法(新しいテンプレートを使用) 私は風景モードで別のレイアウトが欲しいです。これはJavaではなく、NativeScriptにあります。向きが変わったときに別のXMLテンプレートを使用してページを再読み込みするにはどうすればよいですか?

私がランドスケープのページに到着した場合、正しいxmlファイルが選択されますが、向きが変わっても何も読み込まれません。

これはCSSをリフレッシュするための質問ではなく、必要な別のXMLファイルです。あなたの活動で

答えて

2

NativeScriptソリューション:あなたはオリエンテーションイベントに結び付ける必要があり

まず

は、いくつかのドキュメントを参照してください。あなたは、そのイベントに結びつけることができるいくつかの方法があります。

nativescript-orientationプラグインをインストールすると、グローバルにイベントに結びつき、向きが変わるたびに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 
} 

あなたがたときにあなたのページイベントが通知されるように依頼する必要がありますが最初に開いて、あなたのページが閉じたときに通知から自己を削除する必要があります。これは上記のプラグインがあなたのために処理するページあたりのたくさんの余分なコードです。これを自分自身で行うときは、宣言UI XMLファイルの<Page>タグにNavigateTo/NavigatedFromを追加する必要があります。そうしないと、これらの関数は呼び出されません。


[OK]をクリックすると、今すぐ好きなようにイベントが開催されます。私たちがあなたの考えをどのように働かせるかを見てみましょう。

ここでは、ページが変更されるたびにレイアウトを切り替えるように求めています。これは典型的には最悪のことです。私はまずそれに答えて、次に、私がポートレートモードとランドスケープモードの両方で動作する複雑なレイアウトを行うために使用する代替の方法をほとんど自動的に提供します。

マイページ-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. あなたは他のページからページの適切なバージョンに移動する必要があります。すなわち、あなたがランドスケープモードの場合は、別のページに移動したとき。あなたは、ページの造られたバージョンに移動することを確認する必要があります。
  2. NS-Orientationプラグインは、これを簡単にするための現在の方向を見つけるハンドルヘルパー機能を提供します。
  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-姿勢プラグイン

+0

OK、これは非常に役に立つ情報です。私はすでにnativescript-orientationプラグインのセットアップと実行があり、CSSを変更しています。私はちょうどCSSのすべての変更を管理していません。 変更をプログラムで行い、XMLテンプレートファイルを1つしか持たないことに注意しますが、それは難しいでしょう。たとえば、次のように 'GridViewの列= "*、*、*、*" 行= "*" etc' に' GridViewの列= "*" 行= "*、*、*、*" etc'とりわけ、 です。 – jalal

+0

さて、exports.orientation関数を使ってgridviewをプログラムで再セットアップすることはあまり難しくありませんが、グリッド内のコンポーネントをリセットして新しいレイアウトにタグを付ける必要があります。または、画面がどれほどシンプルであるかによって異なります。グリッドビューの2つのバージョンを持ち、適切なものを表示/非表示することもできます。 – Nathanael

+0

BTWは、プラグインのTypescript定義ファイルを持っているといいです:) – jalal

0

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

正しいリソースファイル名を持つAndroidのシステムが自動的に適切なリソースを使用して活動/フラグメントを再ロード

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

の著者だ。これは、質問に答えていません。 Nativecript not android –

0

両方の配向のための同じ名前のレイアウトXMLを持っていることを確認してください。 android:configChangesを設定することで、イベントを手動でキャッチして処理できます(ただし、まれです)。

+0

これはNativeScriptのクエストであることを明確にするために質問を編集しました。 – jalal

+0

NativeScriptでの経験はありませんが、同じ質問がありますhttp://stackoverflow.com/questions/35908494/does-anybody-know-how-to-detect-orientation-change-for-nativescript –

+0

検出は簡単で、トリガーページのリロードは単純ではありません。 :) – jalal

関連する問題