skimemo

• 追加された行はこの色です。
• 削除された行はこの色です。
• skimemo - 日記/2019-06-12/NativeScriptで画面の転回に合わせてTabViewの表示を切り替える へ行く。
• skimemo - 日記/2019-06-12/NativeScriptで画面の転回に合わせてTabViewの表示を切り替える の差分を削除

#blog2navi()
*NativeScriptで画面の転回に合わせてTabViewの表示を切り替える [#e7bb1863]

NativescriptでTabViewを消したり表示したりする方法です。~
~
例えば動画再生や画像表示をフルスクリーンで行う場合、TabViewのタブを消したい場合があります。~
ここでは、デバイスの向き（縦、横）によってTabViewの表示・非表示を切り替えます。~
~
回転検出は [[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');
	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()