Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@aimoriu(u aimori)

BASE UI->Tag Groups（Titaniumの勉強メモ）

Last updated at Posted at 2012-12-26

###入門になったら、勉強がなかなか進まなくて、KitchenSinkのサンプルソースを追って勉強しようかと思っています。興味のある方は一緒に勉強しましょう。コミュニケーションの場になればなあと思います。

■ソースのURL：
https://github.com/appcelerator/KitchenSink/blob/master/Resources/examples/tab_groups.js

/Resources/examples/tab_groups.js
var win = Titanium.UI.currentWindow;

// get tab group object
var tabGroup = win.tabGroup;

//
//  ADD/REMOVE TAB
//
var addTabButton = Titanium.UI.createButton({
    title:'Add/Remove Tab',
    top:10,
    height:40,
    width:200
});

// create button event listener
// ===========================================================================
// addTab(tabObject)及びremoveTab(tabOjbect)によるTabの追加と削除のサンプルです。
// ===========================================================================
addTabButton.addEventListener('click', function(e)
{
    if (tabGroup.tabs.length == 5)
    {
        var win = Ti.UI.createWindow({title:'New Tab Window',barColor:'#000'});
        var newtab = Titanium.UI.createTab({  
            icon:'../images/tabs/KS_nav_mashup.png',
            title:'New Tab',
            win:win
        });
        tabGroup.addTab(newtab);
    }
    else
    {
        var newtab = tabGroup.tabs[5];
        tabGroup.removeTab(newtab);
    }
});

//
// ANIMATE TAB GROUP
//
var animateTabButton = Titanium.UI.createButton({
    title:'Animate Tab Group',
    top:60,
    height:40,
    width:200
});

var transformed = false;

// create button event listener
// ===========================================================================
// 2DMatrixによるアニメーション及びもとに戻すサンプルです。
// ===========================================================================
animateTabButton.addEventListener('click', function(e)
{
    if (transformed === false)
    {
        var transform = Ti.UI.create2DMatrix();
        transform = transform.scale(0.6);
        transform = transform.rotate(45);
        tabGroup.animate({transform:transform,duration:1000});

        transformed = true;
    }
    else
    {
        var transform = Ti.UI.create2DMatrix();
        tabGroup.animate({transform:transform,duration:1000});

        transformed = false;
    }
});


//
// CLOSE/OPEN TAB GROUP WITH ANIMATION 
// 
var closeTabGroupButton = Titanium.UI.createButton({
    title:'Close/Animate Tab Group',
    top:110,
    height:40,
    width:200
});
// ===========================================================================
// アニメーション実行後の処理としてTabGroupをcloseするサンプルです。
// ===========================================================================
closeTabGroupButton.addEventListener('click', function(e)
{
    tabGroup.animate({opacity:0,duration:1000}, function()
    {
        tabGroup.close();        
    });

});

//
// SET ACTIVE TAB (INDEX)
// 
var setActiveTabButton = Titanium.UI.createButton({
    title:'Set Active Tab (Index)',
    top:160,
    height:40,
    width:200
});
// ===========================================================================
// indexにより該当Tabをアクティブにするサンプルです。
// ===========================================================================
setActiveTabButton.addEventListener('click', function(e)
{
    tabGroup.setActiveTab(1);
});

//
// SET ACTIVE TAB (OBJECT)
// 
var setActiveTabObjectButton = Titanium.UI.createButton({
    title:'Set Active Tab (Object)',
    top:210,
    height:40,
    width:200
});
// ===========================================================================
// tabオブジェクトにより該当Tabをアクティブにするサンプルです。
// ===========================================================================
setActiveTabObjectButton.addEventListener('click', function(e)
{
    tabGroup.setActiveTab(tabGroup.tabs[1]);
});

//
// CUSTOMIZATION SWITCH - this allows or disables the ability for users to re-order tabs
//
var customizationButton = Titanium.UI.createButton({
    title:'Switch customization off',
    top:260,
    height:40,
    width:200
});
// ===========================================================================
// tabGroup.allowUserCustomizationで何の動きをするか不明なサンプルです。
// ===========================================================================
customizationButton.addEventListener('click', function(e)
{
    var text = 'Switch customization ';
    if (tabGroup.allowUserCustomization) {
        tabGroup.allowUserCustomization = false;
        text += 'on';
    }
    else {
        tabGroup.allowUserCustomization = true;
        text += 'off';
    }
    customizationButton.title = text;
});


//
// CURRENT TAB GROUP
//
// ===========================================================================
// Labelを作成するサンプルです。
// ===========================================================================
var openLabel = Titanium.UI.createLabel({
    text:'Tab Group has ' + Titanium.UI.currentTabGroup.tabs.length + ' tabs',
    color:'#999',
    font:{
        fontFamily:'Helvetica Neue',
        fontSize:15
    },
    textAlign:'center',
    top:310,
    width:'auto',
    height:'auto'
});

// add views based on platform
// ===========================================================================
// Titanium.Platform.nameにより処理を分けるサンプルです。
// ===========================================================================
if (Titanium.Platform.name == 'iPhone OS')
{
    win.add(addTabButton);
    win.add(animateTabButton);
    win.add(closeTabGroupButton);
    win.add(customizationButton);
}

win.add(setActiveTabButton);
win.add(setActiveTabObjectButton);
win.add(openLabel);

##サンプルから勉強になった内容：
###下記の内容を上記のソースから探すことが出来れば、上記のソースがもう理解できた証だと思います。後はどのように組み合わせて自分のソースの中に入れれば良いかを考えればよいと思います。

  • currentWindowの取得の仕方
  • Buttonの作成の仕方
  • Buttonへclickイベントの追加の仕方
  • Windowの作成の仕方
  • Tabの作成の仕方
  • TabとTabGroupの依存関係
  • TabGroupはさいだ５つのTabを表示することができ、６以上になると最後のTabに応じたWindowの中で、TableViewのTableViewRowの形で表示される。

  • tabGroup.tabs.lengthでTabGroupのTabの個数を取得する
  • tabGroup.tabs配列のindexを使いtabGroupからTabを取得する方法
  • tabGroup.removeTab(tabObject)でtabGroupから該当のTabを削除する方法。
  • 2DMatrixオブジェクトの作成の仕方
  • transform(scaleとrotateを指定した2DMatrixオブジェクト)とduration(アニメーションの継続時間)属性を持つオブジェクトをTabGroupのanimateメソッドの引数として渡し、TabGroupのアニメーションをする方法と新たに2DMatrixオブジェクトを生成し、そのままTabGroupのanimateメソッドの引数として渡したら、もとに戻すアニメーションの仕方。
  • TabGroupのanimateメソッドに{opacity:0,duration:1000}オブジェクトとfunction()を渡し、アニメーションした後にfunction()の中に定義された処理を実行する方法。
  • tabGroup.setActiveTab(index)のように直接Tabのindexを指定し、indexに応じたタブをアクティブにする方法。
  • tabGroup.setActiveTab(tabGroup.tabs[index])のようにindexを使い、tabGroup.tabs配列から取得したindexに応じたタブをアクティブにする方法。
  • button.title=textの形でbuttonのテキストを設定する方法。
  • Labelの作成の仕方。
    　text,color:'#999',font:{fontFamily:'',fontSize:15},textAlign:'center',top:310,width:'auto',height:'auto'
  • Platformの名前の取得の仕方、及びPlatformのな前により処理を切り替える方法。

###不明点：
####分かる方はぜひコメントをお願いします。

  • tabGroup.allowUserCustomization = trueは何の動きをするのですか？
  • tabGroup.allowUserCustomization = falseは何の動きをするのですか？
1
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?