Google+ もご覧ください
ユーザーアイコン

Ti Weekly Clips++

Ti Weekly Clips++ – 2013/09/08~2013/09/15版

Donayama

Ti Weekly Clips++ – 2013/09/08~2013/09/15版

Spotlight - 小さな特集記事

iOS 7 Migration Guide - Titanium 3.X の内容から重要そうなところをピックアップする「iOS 7 移行ガイド ダイジェスト」を今回のSpotlightではお届けしようと思います。詳細は原文も併せてご覧頂ければと存じます。

ちなみにiOS 7への対応が正式にされるのは3.1.3からになります。(iOS 5.xについては 3.2.0以降サポート対象外となるので注意が必要です)

1. アイコン類

これまでのappicon.png、appicon@2x.pngとは別に以下の画像リソースを用意する必要があります。

対象のデバイス 目的 解像度 DPI ファイル名
iPhone/iPod retina アプリアイコン 120 x 120 72 appicon-60@2x.png
iPad non-retina アプリアイコン 76 x 76 72 appicon-76.png
iPad retina アプリアイコン 152 x 152 72 appicon-76@2x.png
Universal non-retina Spotlight & 設定 40 x 40 72 appicon-Small-40.png
Universal retina Spotlight & 設定 80 x 80 72 appicon-Small-40@2x.png

2. 新しいWindowアーキテクチャ

2.1 LightweightなWindow

iOS 7以降ではルート表示されるWindowを含めて、透明なステータスバー+フルスクリーンで表示されます。そのためWindowの最上部に存在するオブジェクトは全般的に透明なステータスバーの背後に表示されます。このため、topプロパティでレイアウト調整をしている場合、透明なステータスバーの高さ20pxを考慮した再調整を必要とするでしょう。

なお、NavigationWindowかTabGroupに含まれていない場合、Navigationコントロールのない状態で表示されます。

LightweightなWindow
LightweightなWindow

左は何もしていないデフォルト表示、真ん中はfullscreenプロパティをtrueに設定した場合、右は下記ソースのようにtop = 20とプロパティ設定したものとなります。

Ti.UI.setBackgroundColor('purple');
var win = Ti.UI.createWindow({
    top: 20
});
var button = Ti.UI.createButton({top: 0, title: 'BLAH BLAH BLAH'});
win.add(button);
win.open();

2.2 ステータスバー

3.1.3以降ではアプリケーション配下にステータスバー描画がされ、Window.fullscreenプロパティを指定しない限り、常に表示されます。

3.1.3で新たに追加されるWindow.statusBarStyleプロパティにより、外観制御を行えます。このプロパティの効果はトップレベルコンテナにあたるもの(ルートWindow、NavigationWindow、SplitWindow、TabGroup)に含まれ、効果を発します。

ただし、fullscreenプロパティは対象となるWindowなどが表示されるまでに設定される必要があります。表示するスタイルについても同様であり、iOS 7以前では正常動作していたTitanium.UI.iPhone.setStatusBarStyleTitanium.UI.iPhone.setStatusBarHiddenに関しては表示中のWindowに対して効果がなくなります。

また暗色の背景に対するステータスバー表示をするにあたり、新たに Titanium.UI.iPhone.StatusBar.LIGHT_CONTENTという定数が追加されています。これを利用するにはtiapp.xmlに以下の記載をしてください。(訳注:新APIなのにこの名前空間なんですよね…)

<ios>
    <plist>
        <dict>
            <key>UIStatusBarStyle</key><string>UIStatusBarStyleLightContent</string>
        </dict>
    </plist>
</ios>

2.3 回転方向制御

3.1.3以降ではfullscreenプロパティ同様にorientationModesプロパティもWindowを開く前に設定しなくてはいけません。setOrientationModesメソッドは無効になりました。

また、強制的に回転方向を設定する際にはopen/close時の遷移アニメーションは発生しなくなります。

2.4 モーダルWindow

3.1.3以降のモーダルWindowでは標準でナビゲーションバーが提供されません。titleControlやleftNavButtonなどのプロパティを設定するためには次のようにNavgationWindowオブジェクトに対するmodalプロパティ設定を行う形となります。

var win = Ti.UI.createWindow({
    backgroundColor: 'blue',
    titleControl: Ti.UI.createLabel({
        text: 'Enable feature?',
        shadowColor: 'gray',
        shadowOffset: {x: 2, y: 2}
    })
});

var navWin = Ti.UI.iOS.createNavigationWindow({
    modal: true,
    window: win
});
navWin.open();

またこのモーダルWindowは呼出し元のorientationModeを引き継ぎませんので、回転方向を制御する必要がある場合は、明示的にopenするまえに設定しておく必要があります。

2.5 他のWindowプロパティについて

  • barColor
    • NavigationBarの背景色設定。デフォルトはnull。
  • navTintColor (新しいAPI)
    • NavigationBarのTintカラー設定。デフォルトはnull。iOS 7以降のみ有効。
  • barImage
    • Background image for navigation bar. Defaults to NULL.
  • translucent
    • NavigationBarの透過設定。iOS 7以降はデフォルトがtrue、以前のバージョンではfalseとなる。
  • tabBarHidden
    • デフォルトはfalse
  • navBarHidden
    • デフォルトがfalseに。

次のページでは新しいAPIおよび非推奨になるAPIなどについて取り上げます。

Tiweeklyclips

記事をリクエストする

関連記事

コメント