_ 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の内容が消えるので、何かがそういう順番で格納されていると思われます。期待した動作をしない場合は、ご自分の環境に合わせて変えてみてください。