Androidの画面構成を理解すべし!

あたらしいTitaniumの本が登場しました

Titanium SDK API 解説書ページを表示する


Androidの画面構成を理解すべし!資料
TS_Android_2.pdf
PDFファイル 954.3 KB

画面を構成するUIオブジェクト

単純な画面構成

ここまでの完成ソース

■ app.js


// 画面の背景色
Titanium.UI.setBackgroundColor('#000');

// Windowの作成
var win1 = Titanium.UI.createWindow({
        title: 'ウィンドウ1',
        backgroundColor:'#fff'
});

// Labelの作成
var label1 = Titanium.UI.createLabel({
        color:'#999',
        text:'ハロー!文字を表示するラベルです。',
});

// WindowにLabelを追加
win1.add(label1);

// Windowを表示
win1.open();


Windowのフルスクリーンモードとメニュー設定

ここまでの完成ソース

■ app.js


// 画面の背景色
Titanium.UI.setBackgroundColor('#000');

// Windowの作成
var win1 = Titanium.UI.createWindow({
        title: 'ウィンドウ1',
        backgroundColor:'#fff',
        fullscreen: true
});

// Labelの作成
var label1 = Titanium.UI.createLabel({
        color:'#999',
        text:'ハロー!文字を表示するラベルです。',
});

// WindowにLabelを追加
win1.add(label1);

// Menuの設定
win1.activity.onCreateOptionsMenu = function(e) {
    var menu = e.menu;
    var login = menu.add({ title: "Login" });
    var logout = menu.add({ title: "Logout" });
}

// Windowを表示
win1.open();


TabGroupを使用した画面構成

完成ソース

■ app.js


// 画面の背景色
Titanium.UI.setBackgroundColor('#000');

// TabGroupの作成
var tabGroup = Titanium.UI.createTabGroup();

// win1の作成(Tab作成の前に作成する)
var win1 = Titanium.UI.createWindow({
        title: 'タブ1',
        backgroundColor: '#fff'
});

// tab1の作成
var tab1 = Titanium.UI.createTab({
        title: 'タブ1',
        window: win1
});

// label1の作成
var label1 = Titanium.UI.createLabel({
        color: '#999',
        text: 'ハロー!文字を表示するラベルです。'
});

// win1にlabel1を追加する
win1.add(label1);

// win2の作成
var win2 = Titanium.UI.createWindow({
        title: 'タブ2',
        backgroundColor: '#fff'
});

// tab2の作成
var tab2 = Titanium.UI.createTab({
        title: 'タブ2',
        window: win2    
});

// view2の作成
var view2 = Titanium.UI.createView({
        backgroundColor: 'blue',
        height: 200
});

// label2の作成
var label2 = Titanium.UI.createLabel({
        color: '#fff',
        text: 'ビューに追加されたラベルです。'
});

view2.add(label2);
win2.add(view2);

// Menuの設定
win1.activity.onCreateOptionsMenu = function(e) {
        var menu = e.menu;
        var login = menu.add({ title: 'Login' });
        var logout = menu.add({ title: 'Logout' });
}
win2.activity.onCreateOptionsMenu = function(e) {
        var menu = e.menu;
        var login = menu.add({ title: 'Login' });
        var logout = menu.add({ title: 'Logout' });
}

// TabをTabGroupに追加
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);

// TabGroupをオープン
tabGroup.open();


オブジェクトの階層構造と記述順序

コメントをお書きください

コメント: 2
  • #1

    神宮司 薫 (月曜日, 19 11月 2012 21:34)

    とても丁寧な解説でわかりやすかったです。
    初めてTitaniumに触れましたが、ほとんど迷わずサンプルを実行することができました。
    今後も期待しています。
    ありがとうございました。

  • #2

    だらだらお (日曜日, 11 5月 2014 23:37)

    最新版のTitaniumSDKですと、この記事で記載されているコードではメニューが出なくなっているようです。

    解決法については私もまだ見つけることができていません。