LoginSignup
2

More than 5 years have passed since last update.

タブ無しおよびタブ有りアプリにおいて、同じコードでWindowを開く方法(Titanium Alloy, iOS/Android)

Posted at

問題点

iOSにおいて開いたWindowから戻りたい時は、一般的にタイトルバー左端のナビゲーションで戻ります。Androidにおいて開いたWindowから戻りたい時は、バックキーで戻ります。
これらの遷移を利用したい場合、タブの有無によって次のようなトップレベルビューを使い分けなければいけません。

各種アプリケーションのトップレベルビュー

- iOS Android
no tabbed application NavigationWindow(*1) Window
tabbed application TabGroup TabGroup

*1: iOSではtabBarHiddenプロパティをtrueとすると、代わりにTabGroupが使用できます。

補足:TabGroupに揃えられればいいのですが、残念ながらAndroidではTagGroupを使用してtabBarHiddenプロパティをtrueに設定しても不自然なスペースが表示されてしまいます。

例えばWindow AからWindow Xを開く場合を考えてみます。単にWindow Xを開きたいだけなのに、単純に呼び出すと次のようにコードを書き分けないといけなくなります。
Windowを開くのに、このような断片化したコードは書きたくありません。

- iOS Android
no tabbed application navWin.openWindow(winX) winX.open()
tabbed application activeTab.open(winX) activeTab.open(winX)

解決方法

裏技でTabGroupで統一する方法も有るのですが、SDKのバージョンが変わると動かなくなるなど安定しておらず、コードも複雑となりメンテナンス性が落ちます。そこで上記テーブルのトップレベルビューを素直に使用したままで、同じコードでWindowを開く方法を考えました。
index.jsファイルにAlloy.Globals.UI.openWindowというメソッドを用意し、Alloy.Globals.UI.openWindow('winX');といったコードでウィンドウを開けるようにしました。これによって次の4パターンにおいてWindowを開くコードが同じとなり、ソースがメンテナンスしやすくなり、iOS/Android両対応もスムーズとなります。

  • iOS タブ無しアプリ
  • iOS タブ有りアプリ
  • Android タブ無しアプリ
  • Android タブ有りアプリ

補足1:Alloy.Globals.UI.openWindowの中身は4パターンで違うのですが、ここはアプリが変わっても内容は変わりません。別Windowを開くコードはアプリ内で複数有ることが多く、今回のようにしてここが統一されるメリットは大きいです。

補足2:Alloy.Globals.openWindowでもいいのですが、他にもiOSとAndroidで同じように呼べるUIを増やして整理したいのでUIを付けています。

コード

具体的なサンプルコードについてはタブ無しとタブ有りに分けて、GitHubで公開しています。

サンプル動作動画


(English)

How to open a window in same code on a tabbed or no tabbed application(Titanium Alloy, iOS/Android)

Problem

Here are top level views on a tabbed or no tabbed application.

- iOS Android
no tabbed application NavigationWindow Window
tabbed application TabGroup TabGroup

If I open Window X from Window A, I have to write these code.
I don't want to write these fragmented code!!!

- iOS Android
no tabbed application navWin.openWindow(winX) winX.open()
tabbed application activeTab.open(winX) activeTab.open(winX)

Solution

So I made Alloy.Globals.UI.openWindow in index.js. And I can open a window in the same code on the four pattern.
Alloy.Globals.UI.openWindow('winX');

  • no tabbed iOS application
  • tabbed iOS application
  • no tabbed Android application
  • tabbed Android application

It's easy to maintenance and portable between iOS and Android.

Code

Codes are on GitHub.

Sample movie

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2