Titanium MobileでiPadでのフォトギャラリーの表示位置を指定する

Titanium MobileでPhoto Gallery(カメラロールなど画像の選択画面)を使用する際、iPhoneでは全画面にサムネイル表示されますが、iPadでは小画面がポップアップされる表示形式になります。

20121008-pgipad1.png

iPhoneの場合はフォトギャラリーは全画面表示されますので何も考えずにそのまま使えばいいんですが、iPadではそのままだと中央上部にポップアップされてしまいます。iPadは画面が大きいですので、場合によっては指の移動距離が長くなって不便になります。

そんなわけで、今回は iPadでPhoto Galleryの位置を指定する方法についてです。

フォトギャラリーの使い方

まず、Ti.Media.openPhotoGallery() を使用してフォトギャラリーを開きます。画面左下にbtnLoadというボタンを作成して、そのclickイベントの中で実行されるようにしています。

var self = Ti.UI.createView();
var btnLoad = Ti.UI.createButton({
title:'LOAD',
left: 10,
bottom: 10,
height:'auto',
width:'auto'
});
self.add(btnLoad);
btnLoad.addEventListener('click', function(e) {
    Ti.Media.openPhotoGallery({
success: function(e) {
// カメラロールから写真読込成功
},
mediaTypes: [Ti.Media.MEDIA_TYPE_PHOTO, Ti.Media.MEDIA_TYPE_VIDEO]
});
});

実行するとこんな感じです。

20121008-pg.png

上はiPhone 4/4Sシミュレータを使った場合ですが、iPadも同様です。

 20121008-pgiphone1.png

iPhoneではLOADボタンを押しても全画面表示になりますが、iPadは冒頭の絵のように、中央上部に表示されてしまいます。

 

iPad専用のpopoverViewとarrowDirection

openPhotoGalleryにはiPad専用の popoverViewとarrowDirectionというオプションが用意されており、iPad時のみ処理を追加するようにします。

以下のようにarrowDirectionとpopoverView用の変数定義を行い、osname="ipad"の場合だけViewと矢印の方向(POPOVER_ARROW_DIRECTION_DOWN、下向き)を指定するようにします。

// 追加
var direction;
var target;
if (Ti.Platform.osname == 'ipad') {
direction = Ti.UI.iPad.POPOVER_ARROW_DIRECTION_DOWN;
target = btnLoad;
}
btnLoad.addEventListener('click', function(e) {
Ti.Media.openPhotoGallery({
success: function(e) {
// カメラロールから写真読込成功
},
arrowDirection: direction, // 追加
popoverView: target, // 追加
mediaTypes: [Ti.Media.MEDIA_TYPE_PHOTO, Ti.Media.MEDIA_TYPE_VIDEO]
});

openPhotoGallery内のオプションにarrowDirectionとpopoverViewを指定するのを忘れないようにしてください。なお、Ti.UI.ButtonクラスはTi.UI.Viewからの派生クラスですのでpopoverViewに指定することができます。

なお、iPad以外のデバイスでは、これらのプロパティに値が設定されていても無視されます。

20121008-pgipad2-1.png

無事、LOADボタンのそばにポップアップしてくれるようになりました。これならボタンを押してからの指の移動量も少なくて済みますね。

 

arrowDirectionに指定できる値について

arrowDirectionをPOPOVER_ARROW_DIRECTION_DOWN以外にした時にどんな見え方になるか調べてみました。

20121008-arrowdirection.png

arrowDirectionに指定できる値は以下のようになっています。

  • POPOVER_ARROW_DIRECTION_UP … 上向き矢印
  • POPOVER_ARROW_DIRECTION_DOWN … 下向き矢印
  • POPOVER_ARROW_DIRECTION_LEFT … 左向き矢印
  • POPOVER_ARROW_DIRECTION_RIGHT … 右向き矢印
  • POPOVER_ARROW_DIRECTION_ANY … 自動判別?
  • POPOVER_ARROW_DIRECTION_UNKNOWN … 不明?

LEFTとRIGHTは個人的にはあまりかっこよくない気がしますね。使うならUPかDOWNな感じです。

ANYはpopoverViewの画面上の位置から適切に配置してくれるようです。あまりいい使い方がイメージできないんですが、トリガとなるボタン等の位置が動的に変わるような場合は、ANYにお任せすればいいんでしょうか。

UNKNOWNは指定したところ、矢印以前にポップアップ自体されなくなりました。僕は使いどころがまだよくわかってないです、UNKNOWNだけに。どういう時に使うといいんでしょうね。

レイアウト固定配置の場合は、基本的にUPまたはDOWNを定義しておくようにすればいいかな、と思いました。