--> -->
#blog2navi() *NativeScriptで画面の転回に合わせてTabViewの表示を切り替える [#e7bb1863] NativescriptでTabViewを消したり表示したりする方法です。~ ~ 例えば動画再生や画像表示をフルスクリーンで行う場合、TabViewのタブを消したい場合があります。~ ここでは、デバイスの向き(縦、横)によってTabViewの表示・非表示を切り替えます。~ ~ + 回転検出~ [nativescript-orientation:https://www.npmjs.com/package/nativescript-orientation]というプラグインを使います。 require("nativescript-orientation"); 回転検出は [[nativescript-orientation:https://www.npmjs.com/package/nativescript-orientation]] というプラグインを使います。 #code(php){{{ require("nativescript-orientation"); }}} #code(php){{{ /** * 画面転回検出 * @param {*} args */ function orientation(args){ : } exports.orientation = orientation; }}} という感じで、イベントが取れます。~ TabViewの表示・非表示は以下のように制御します(iOSは未確認)。 ~■非表示 #code(php){{{ const application = require("tns-core-modules/application"); const Frame = require('tns-core-modules/ui/frame'); }}} #code(php){{{ 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; } }}} ~ ~■表示 #code(php){{{ tabview.android.getChildAt(1).setVisibility(android.view.View.VISIBLE); }}} ~ これを、画面の縦・横に応じて実行してあげればOKです。 #code(php){{{ /** * 画面転回検出 * @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; }}} ちなみに、&inlinecode{getChildAt(1)};の&inlinecode{1};が何故1なのかは不明です(^^;)。0を指定するとTabViewの内容が消えるので、何かがそういう順番で格納されていると思われます。期待した動作をしない場合は、ご自分の環境に合わせて変えてみてください。 #htmlinsert(twitterbutton.html) RIGHT:Category: [[[NativeScript>日記/Category/NativeScript]]] - 07:07:03 ---- RIGHT:&blog2trackback(); #comment(above) #blog2navi()