*

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

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


スポンサードリンク



Titanium MobileのAlloyにおけるUIコンポーネントの配置【前編】 に引き続き
Titanium MobileのAlloyにおけるUIコンポーネントの配置【後編】のエントリーとなります。

後編ではUIコンポーネントのlayoutプロパティの利用方法を取り扱います。

詳細な情報についてはTitaniumの公式ページの「Titanium.UI.View」
でご覧いただけます。

本エントリーの内容は以下の通りとなります。

  1. layoutプロパティとは
  2. verticalをTitanium Alloyアプリで説明
  3. horizontalをTitanium Alloyアプリで説明
  4. compositeをTitanium Alloyアプリで説明
  5. 2つの値を同時に利用する例を説明

 

layoutプロパティとは

layoutプロパティはWindowとViewコンポーネントで指定可能です。
指定可能な値は以下の通りです。詳細は順番に説明させていただきます。

概要
vertical 含まれる(Viewの配下)のコンポーネントが縦に並ぶようにしたいときに指定します。上に並ぶコンポーネントが存在しない場合は親コンテナのtopからの相対位置となります。
horizontal 含まれる(Viewの配下)のコンポーネントを横並びにしたいときに指定します。左に並ぶコンポーネントが存在しない場合は親コンテナのleftからの相対位置となります。
composite/absolute

 

verticalをTitanium Alloyアプリで説明

Titanium MobileのAlloyにおけるUIコンポーネントの配置【前編]で利用したプロジェクトを変更して説明します。

まずはWindowコンポーネントのlayoutに”vertical”を指定し、Windowコンポーネントの配下に2つのViweコンポーネントが存在する例を説明します。

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

 

tssにレイアウトの情報を記載します。
tssの記載方法ですが”.container”の様にドットから始まるのはXMLの要素のclass=”container”に対する定義となります。

tssの記載内容のポイントは
.containerでlayout:”vertical”を指定し
“View”でtop: “90dp”を指定することです。

index.tssは以下のようになります。

この指定によってView(id=”viewFirst”)とView(id=”viewSecond”)が90dpの間隔で縦に並びます。
なおView(id=”viewFirst”)のtopはWindowのtop+90dpの位置となります。

詳細な配置イメージは以下のようになります。ポイントのlayoutは黒地に白文字の90dpです。
スクリーンショット 2013-11-26 12.44.48

当然ですが、layoutプロパティを利用しなくても同じUIレイアウトを実現することは可能です。
1つ例としては、以下のtssとなります。
なお”#”+文字列でXMLの要素のid指定でのスタイルが指定が可能です。

tss内にコメントを記載していますが、topの絶対位置に足し算で計算した値をセットしないといけなくなります。今の例ですと1つの計算ですが、複雑なレイアウトになってくると大変ですし、動的に表示内容が変更される場合はもっと大変です。

horizontalをTitanium Alloyアプリで説明

次にWindowコンポーネントのlayoutに”horizontal”を指定し、Windowコンポーネントの配下に2つのViweコンポーネントが存在する例を説明します。

index.xmlの変更はありません。

tssの記載内容のポイントは
.containerでlayout:”horizontal”を指定し
“View”でleft: 110dp””を指定することです。

と言っても.containerのlayoutを”horizontal”に変更しただけです。
index.tssは以下のようになります。

この指定によってView(id=”viewFirst”)とView(id=”viewSecond”)が110dpの間隔で横に並びます。
なおView(id=”viewFirst”)のleftはWindowのleft+110dpの位置となります。

詳細な配置イメージは以下のようになります。ポイントのlayoutは黒地に白文字の110dpです。
スクリーンショット 2013-11-26 13.08.39

compositeをTitanium Alloyアプリで説明

次にWindowコンポーネントのlayoutに”composite”を指定し、Windowコンポーネントの配下に2つのViweコンポーネントが存在する例を説明します。

と言っても説明することはほとんどないです。結局”composite”を指定することはlayoutを指定しないことと同じだからです。

実行結果の画面は以下のようになります。
スクリーンショット 2013-11-26 13.23.02

2つの値を同時に利用する例を説明

最後に”vertical”と”horizontal”の両方を指定する例の説明を行います。

index.xmlを以下のように修正しました。

index.tssを以下のように修正しました。

赤いViewは「verticalをTitanium Alloyアプリで説明」での記載の通り縦に並びます。
黒いViewと青いViewは赤いViewの子要素としてxmlで定義してあり、かつViewタグのlayoutプロパティにはhorizontal”が指定されているので横に並びます。
横に並ぶときの間隔は”.view1″のleftと”.view2″のleftで定義されています。

視覚的に表すと以下のようになります。
スクリーンショット 2013-11-26 14.17.08

Titanium MobileのAlloyにおけるUIコンポーネントの配置【後編]は以上です。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Titanium Mobile応用【JasmineとTiShadowでBDD編:15桁入力処理】

前回の続きで、「BDD編その3」です。 「BDD編その1」 「BDD編その2」をまずはご参照くだ

記事を読む

Titanium Mobile入門【導入編 on Mac】

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

記事を読む

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

Titanium MobileでAlloyフレームワークを利用する時に避けて通れないのがUIコンポー

記事を読む

no image

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

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

記事を読む

Titanium Mobile入門【CLI激闘編】

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

記事を読む

no image

Titanium Mobile入門【TiShadow活用編】

「Titanium Mobile入門【TiShadow導入編】」ではTiShadowの導入と接続用の

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

no image

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

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 ↑