skimemo


skimemo - 日記/2019-06-12/NativeScriptで画面の転回に合わせてTabViewの表示を切り替える

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

Category: [NativeScript] - 07:07:03



 
Last-modified: 2019-06-12 (水) 07:29:06 (97d)