_ NativeScriptで画面の転回に合わせてTabViewの表示を切り替える
NativescriptでTabViewを消したり表示したりする方法です。
例えば動画再生や画像表示をフルスクリーンで行う場合、TabViewのタブを消したい場合があります。
ここでは、デバイスの向き（縦、横）によってTabViewの表示・非表示を切り替えます。
回転検出は nativescript-orientation というプラグインを使います。
1
| require("nativescript-orientation");
|
1
2
3
4
5
6
7
8
| /** * 画面転回検出 * @param {*} args */function orientation(args){ :}exports.orientation = orientation;
|
という感じで、イベントが取れます。
TabViewの表示・非表示は以下のように制御します（iOSは未確認）。
■非表示
1
2
| const application = require("tns-core-modules/application");const Frame = require('tns-core-modules/ui/frame');
|
1
2
3
4
5
6
7
8
| const myFrame = Frame.getFrameById("myFrame");const tabview = myFrame.getViewById("myTabView");if (application.android) { tabview.android.getChildAt(1).setVisibility(android.view.View.GONE);}if(application.ios){ tabview.ios.tabBar.hidden = true;}
|
■表示
1
| tabview.android.getChildAt(1).setVisibility(android.view.View.VISIBLE);
|
これを、画面の縦・横に応じて実行してあげればOKです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| /** * 画面転回検出 * @param {*} args */function orientation(args){ console.log('orientation changed to '+(args.landscape ? 'landscape' : 'portrait')); if(args.landscape){ const myFrame = Frame.getFrameById("myFrame"); const tabview = myFrame.getViewById("myTabView"); if (application.android) { tabview.android.getChildAt(1).setVisibility(android.view.View.GONE); } if(application.ios){ tabview.ios.tabBar.hidden = true; } } else { const myFrame = Frame.getFrameById("myFrame"); const tabview = myFrame.getViewById("myTabView"); if (application.android) { tabview.android.getChildAt(1).setVisibility(android.view.View.VISIBLE); } if(application.ios){ tabview.ios.tabBar.hidden = false; } }}exports.orientation = orientation;
|
ちなみに、getChildAt(1)の1が何故1なのかは不明です(^^;)。0を指定するとTabViewの内容が消えるので、何かがそういう順番で格納されていると思われます。期待した動作をしない場合は、ご自分の環境に合わせて変えてみてください。