*

Titanium MobileのAlloyにおけるUIコンポーネントの配置【前編】

公開日: : 最終更新日:2014/05/12 Titanium ,


スポンサードリンク



Titanium MobileでAlloyフレームワークを利用する時に避けて通れないのがUIコンポーネントの配置です。非Alloyでも同様に避けては通れません。

今回のエントリーの内容は、以下の通りです。

  1. UIコンポーネントの配置時に指定可能な単位
  2. UIコンポーネントの配置の基本

 

なお、UIコンポーネントのlayoutプロパティの利用方法については
「Titanium MobileのAlloyにおけるUIコンポーネントの配置【後編】」
で取り扱います。

UIコンポーネントの配置時に指定可能な単位

UIコンポーネントを画面上に配置するときに指定できる値は以下の通りです。

単位 日本語名 備考
dp/dip 密度に依存しないピクセル iOSの標準単位、Density Independent Pixelの略でデバイスや解像度により大きさが変わる
px ピクセル Androidの標準単位です
% パーセント 対象コンテナが表示されるView(親コンテナ)を100%とする
mm ミリメートル
cm センチメートル
in インチ

 

UIコンポーネントの配置の基本

動作確認を行うプロジェクトの作成

実際にどのように動作するかを確認するためのプロジェクトを作成します。

なお、Titanium Mobileのインストールや各種設定については
お使いの環境がWindowsの場合は「Titanium Mobile入門【導入編】」
Macの場合は「Titanium Mobile入門【導入編 on Mac】」
を参照ください。

Titanium Studioでプロジェクトを作成する

Titaniumのメニューの「File」→「New」→「Mobile Project」を選択すると以下の画面が表示されますのでなにも変更しないでNextをクリックします。
スクリーンショット 2013-12-10 14.42.37

Project Nameにlayouttest、App idにcom.layouttestを指定して「Finish」ボタンをクリックします。

コンポーネントの配置の基本

配置時に指定する基本的なプロパティはtop,leftです。
具体的な例としてWindowにViewを配置してみます。

現状のindex.xmlの確認と実行

まずはindex.xmlをTitanium Studioで表示します。
index.xmlは左ペインのapp/viewsに存在しますのでクリックして表示します。
スクリーンショット 2013-12-10 14.44.58

プロジェクト生成時の内容な以下のようになっているはずです。

 

Windowが定義されており、その下にラベルが定義されています。
とりあえず一回実行して、どんな感じになっているか確認してみます。
Titanium Studioの以下の画像の赤枠部分をクリックしてください。
スクリーンショット 2013-11-24 16.51.47

すると以下のようなメニューが表示されます。Windowsの場合はiOS系のメニューは表示されません。
2c1e0ad0ab6211c51df3af594fc76c8a-300x228

Androidのシュミレータで実行してみると実行結果は以下のようになります。
スクリーンショット 2013-12-10 14.54.09

viewの定義を追加

index.xmlに存在するLabelを除去し、Viewを新規追加します。
Viewの詳細仕様は公式HPを参照ください。

なお追加したViewは

  • borderRadius=”10″:半径10の円で角を丸める
  • backgroundColor=”red”:背景色を赤に指定
  • width=”50″:横幅を50
  • height=”50″:高さを50

との設定を行っています。見ていただいて分かるとおりCSSによくにていますよね。
本来はapp/styles/index.tss(index.xmlに対応するCSSファイルのようなもの)で指定すべきですが、とりあえず直書きしています。

Viewを追加したindex.xmlは以下のようになります。

 

この状態でiPhoneシュミレータで実行すると以下の結果となりました。
スクリーンショット 2013-11-24 17.14.36

同じくAndroidでエミューレータで実行すると以下の結果となりました。
スクリーンショット 2013-11-24 17.32.47

配置情報(top,left)を指定しないと真ん中に表示されますね。
でもwidthやheightは指定していますが、単位は?ツッコミたくなりませんか?

これは既に「UIコンポーネントの配置時に指定可能な単位」ででも言及していますが
単位を指定しない場合は、iOSではdp、Androidではpxと解釈されます。
iOSとAndroidの両方で動作させたい場合はdpもしくは%を指定する必要があります。

viewのプロパティをtssに移動

先ほども少し触れましたがview.xmlで指定していた各種プロパティをtssファイルに移動します。tssファイルはCSS(スタイルシート)とほぼ同じですが異なるところもあります。

1つ目の相違点はプロパティ名のハイフンの扱いです。
index.xmlで利用しているプロパティのborderRadiusですがCSSではborder-radiusとのプロパティ名です。
もっと端的に説明すると、CSSのプロパティ名が「abc-def」の場合Titaniumのtssのプロパティは「abcDef」となると言うことです。

2つ目の相違点はtssファイルの行の終端の記号です。
CSSではセミコロンを行の終端に記載しますがtssではカンマを記載します。

変更後のindex.xmlは以下のようになります。

タグViewに対してindex.xmlで指定していたプロパティを設定するように変更します。
index.tssは以下のようになります。

iPhone、Android共に修正前と同じ実行結果になりましたので画面イメージは省略いたします。

top,leftを指定してみる

前置きが大変長くなりましたがいよいよ本題です。

index.tssでtop=”10″,left=”100″の値を設定してみます。
設定追加後のindex.tssは以下のようになります。

Androidエミューレータでの実行結果は以下のようになりました。
スクリーンショット 2013-11-24 18.08.11

iPhoneシュミレータでの実行結果は以下のようになりました。
スクリーンショット 2013-11-24 18.07.08

両方とも予想通りです。iPhoneは上のステータスバーと重なっていますが、これはiOS7からの仕様変更による影響です。iOS7からステータスバーの位置にもコンポーネントを配置できるのでそれを考慮しないとこうなります。

と書いたのですが、実際はiOSが重ならないように制御をしてくれるようです。Titaniumでその制御がうまく働かないような設定や実装を行っていることが本質的な問題です。

もう1つ2つの実行結果を見比べて不思議に思うことがないでしょうか?、そう!そうです。四角の左端がかなり違いますよね。これはiOSはleft=”100dp”でAndroidはleft=”100px”となっているからです。

視覚的にこの違いを表現すると以下の図のようになります。
クリックすると大きくなりますのでご覧ください。
スクリーンショット 2013-11-24 18.48.44

最後に、各種値の単位にdpを指定した時の実行結果を示します。
Androidエミューレータでの実行結果
スクリーンショット 2013-11-24 18.52.13

iPhoneシュミレータでの実行結果
スクリーンショット 2013-11-24 18.52.38

両方とも同じような見た目になりました。変更後のindex.tssは以下のようになります。

さらなる詳細な情報についてはTitaniumの公式ページの「UI Composite Layout Behavior Spec」
でご覧いただけます。

「Titanium MobileのAlloyにおけるUIコンポーネントの配置【後編】」に続く。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Titanium MobileのAlloyにおけるUIコンポーネントの配置【後編】

Titanium MobileのAlloyにおけるUIコンポーネントの配置【前編】 に引き続き T

記事を読む

TitaniumのTableViewを試してみる【何故か前編】

Mac miniの環境が完成したので、新たなTitaniumを利用したBDDシリーズを開始する予定で

記事を読む

Titanium Mobile入門【CLI激闘編】

Titanium Studioの環境できたので、次はCLI!、と思いCLIでビルドするとうまくいかな

記事を読む

no image

Titanium mobileでiPhoneのNavigationBarを利用する。

Titanium mobileで基本的な画面遷移を試そうと思い、画面遷移のイベントを仕込むボタンをど

記事を読む

Titanium Mobile入門【導入編 on Mac】

いよいよTitanium Mobile入門【導入編 on Mac】です。 Titanium Mob

記事を読む

no image

Titanium Mobile応用【JasmineとTiShadowでBDD編:テストが時々失敗する理由】

前回の最後に残った問題点の解決方法が分かりましたので 「BDD編その5」として記載させていただきま

記事を読む

TitaniumのTableViewを試してみる【何故か後編】

「TitaniumのTableViewを試してみる【何故か前編】」では、予想に反してiOSシュミレー

記事を読む

Titanium Mobile応用【JasmineとTiShadowでBDD編:最大桁入力と閾値テスト】

前回の続きで、「BDD編その4」 「BDD編その1」と 「BDD編その2」 「BDD編その3」

記事を読む

no image

Titanium mobileでAndroidのActionBarを利用する。

Titanium mobileで基本的な画面遷移を試そうと思い、画面遷移のイベントを仕込むボタンをど

記事を読む

Titanium Mobile入門【導入編】

スマホでアプリを開発すべくTitanium Studioの動作環境を作成し、Default Allo

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

動画で英語を学習できるiOSの無料アプリCapTubeをリリースいたしました。

個人では初となるiOSアプリをリリースいたしました。 何度もリジ

no image
Ruby on rails4系でBootstrapを利用するためのtips

MacでRuby on rails4系のBootstrapを利用しよう

no image
Java、Eclipse、JUnit関連のエントリーの移行のお知らせ

Java、Eclipse、JUnit関連のエントリーは http:/

iOS8開発者向けお勧め本紹介[詳細! Swift iPhoneアプリ開発 入門ノート Swift 1.1+Xcode 6.1+iOS 8.1対応]

iOS7開発者向けお勧め本紹介を以前に紹介させていただきまいたが、今回

Swift入門(Xcode6のXCTestフレームワークで学ぶ) 第二回「関数(メソッド)とクロージャーの利用方法」

前回はSwiftの概要をザックリと説明させていただきました。 今

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑