0

AppceleratorTitaniumで開発したiOSアプリで修正が必要なバグがあります。

私はcustomTabBar(GitHubで入手可能)を使用して特注のtabBarを作成してきましたが、これはうまく機能します。

唯一の小さな問題は、アイコンをタブで移動してルートウィンドウに戻るオプションが削除されることです(適切なネイティブtabBarがiOSで行うように)。

したがって、アプリで3つまたは4つのウィンドウをドリルダウンしても、タブアイコンをタップしても何も起こらない場合は、複数回タップして最初に戻る必要があります。

これが私が使用している完全なcustomTabBar.jsスクリプトです:

CustomTabBar = function(settings) {
var tabBarItems = [];
var tabCurrent = 2;

var resetTabs = function() {
    for(var i = 0; i < tabBarItems.length; i++) {
        // Clear all the images to make sure only
        // one is shown as selected
        tabBarItems[i].image = tabBarItems[i].backgroundImage;
    }
};

var assignClick = function(tabItem) {
    tabItem.addEventListener('click', function(e) {
        // Just fetching the 'i' variable from the loop
        var pos = e.source.pos;

        if (tabCurrent == pos) {
            // TODO
            // Change back to root window, like the native tab action.

            // code must go in here



            return false;
        }       

        // Switch to the tab associated with the image pressed
        settings.tabBar.tabs[pos].active = true;
        tabCurrent = pos;


        // Reset all the tab images
        resetTabs();

        // Set the current tab as selected
        tabBarItems[pos].image = settings.imagePath + settings.items[pos].selected;     
    });
};

// Create the container for our tab items
var customTabBar = Ti.UI.createWindow({
    height: 48,
    backgroundImage:'images/tabbarbackground.png',
    bottom: 0
});


for(var i = 0; i < settings.items.length; i++) {
    // Go through each item and create an imageView
    tabBarItems[i] = Titanium.UI.createImageView({
        // background is the default image
        backgroundImage: settings.imagePath + settings.items[i].image,

        width: settings.width,
        height: settings.height,
        left: settings.width * i
    });

    // Pass the item number (used later for changing tabs)
    tabBarItems[i].pos = i;
    assignClick(tabBarItems[i]);

    // Add to the container window
    customTabBar.add(tabBarItems[i]);
}

// Display the container and it's items
customTabBar.open();

// Set the first item as current :)
resetTabs();
//tabBarItems[0].image = settings.imagePath + settings.items[0].selected;
tabBarItems[2].image = settings.imagePath + settings.items[2].selected;

return {
    hide: function() { customTabBar.hide(); },
    show: function() { customTabBar.show(); }
};
};

追加する必要のあるビットを含む関数はすでにマークアップされていますが、空です。ここにあります:

var assignClick = function(tabItem) {
    tabItem.addEventListener('click', function(e) {
        // Just fetching the 'i' variable from the loop
        var pos = e.source.pos;

        if (tabCurrent == pos) {
            // TODO
            // Change back to root window, like the native tab action.

            // code must go in here



            return false;
        }       

        // Switch to the tab associated with the image pressed
        settings.tabBar.tabs[pos].active = true;
        tabCurrent = pos;


        // Reset all the tab images
        resetTabs();

        // Set the current tab as selected
        tabBarItems[pos].image = settings.imagePath + settings.items[pos].selected;     
    });
};
4

1 に答える 1

3

customTabBarは、既存のタブバーの上にウィンドウ(実際にはビューのみ)を配置します。次に、通過するクリックを処理します。ただし、タブを切り替えるにはクリックイベントを処理する必要があり、前述のように、スタック上にあるすべてのウィンドウを追跡します。

しかし、あなたは何を知っていますか?あなたは一生懸命働いています。プラットフォームはすでにあなたのためにそれをすべて行います。

クリックイベントを(オーバーレイのタッチを無効にすることで)渡すと、基になるタブグループが独自の魔法を発揮します。次に、タブグループのフォーカスイベントでUIを更新するだけです(evt.indexはフォーカスされたタブで、evt.previousIndexはぼやけています)。

app.js:

Ti.include('overrideTabs.js');

/*
 This is a typical new project -- a tab group with three tabs.
 */

var tabGroup = Ti.UI.createTabGroup();

/*
 Tab 1.
 */
var win1 = Ti.UI.createWindow({ title: 'Tab 1', backgroundColor: '#fff' });
var tab1 = Ti.UI.createTab({
    backgroundImage: 'appicon.png',
    window: win1
});
var button1 = Ti.UI.createButton({
    title: 'Open Sub Window',
    width: 200, height: 40
});
button1.addEventListener('click', function (evt) {
    tab1.open(Ti.UI.createWindow({ title: 'Tab 1 Sub Window', backgroundColor: '#fff' }));
});
win1.add(button1);
tabGroup.addTab(tab1);

/*
 Tab 2.
 */
tabGroup.addTab(Ti.UI.createTab({
    backgroundImage: 'appicon.jpg',
    window: Ti.UI.createWindow({ title: 'Tab 2', backgroundColor: '#fff' })
}));

/*
 Tab 3.
 */
tabGroup.addTab(Ti.UI.createTab({
    backgroundImage: 'appicon.png',
    window: Ti.UI.createWindow({ title: 'Tab 3', backgroundColor: '#fff' })
}));

/*
 Now call the overrideTabs function, and we're done!
 */
overrideTabs(
    tabGroup, // The tab group
    { backgroundColor: '#f00' }, // View parameters for the background
    { backgroundColor: '#999', color: '#000', style: 0 }, // View parameters for selected tabs 
    { backgroundColor: '#333', color: '#888', style: 0 } // View parameters for deselected tabs
);

tabGroup.open();

overrideTabs.js:

    /**
 * Override a tab group's tab bar on iOS.
 *
 * NOTE: Call this function on a tabGroup AFTER you have added all of your tabs to it! We'll look at the tabs that exist
 * to generate the overriding tab bar view. If your tabs change, call this function again and we'll update the display.
 *
 * @param tabGroup The tab group to override
 * @param backgroundOptions The options for the background view; use properties like backgroundColor, or backgroundImage.
 * @param selectedOptions The options for a selected tab button.
 * @param deselectedOptions The options for a deselected tab button.
 */
function overrideTabs(tabGroup, backgroundOptions, selectedOptions, deselectedOptions) {
    // a bunch of our options need to default to 0 for everything to position correctly; we'll do it en mass:
    deselectedOptions.top = deselectedOptions.bottom
        = selectedOptions.top = selectedOptions.bottom
        = backgroundOptions.left = backgroundOptions.right = backgroundOptions.bottom = 0;

    // create the overriding tab bar using the passed in background options
    backgroundOptions.height = 50;
    var background = Ti.UI.createView(backgroundOptions);

    // pass all touch events through to the tabs beneath our background
    background.touchEnabled = false;

    // create our individual tab buttons
    var increment = 100 / tabGroup.tabs.length;
    deselectedOptions.width = selectedOptions.width = increment + '%';
    for (var i = 0, l = tabGroup.tabs.length; i < l; i++) {
        var tab = tabGroup.tabs[i];

        // position our views over the tab.
        selectedOptions.left = deselectedOptions.left = increment * i + '%';

        // customize the selected and deselected based on properties in the tab.
        selectedOptions.title = deselectedOptions.title = tab.title;
        if (tab.backgroundImage) {
            selectedOptions.backgroundImage = deselectedOptions.backgroundImage = tab.backgroundImage;
        }
        if (tab.selectedBackgroundImage) {
            selectedOptions.backgroundImage = tab.selectedBackgroundImage;
        }
        if (tab.deselectedBackgroundImage) {
            deselectedOptions.backgroundImage = tab.deselectedBackgroundImage;
        }
        selectedOptions.visible = false;
        background.add(tab.deselected = Ti.UI.createButton(deselectedOptions));
        background.add(tab.selected = Ti.UI.createButton(selectedOptions));


    }

    // update the tab group, removing any old overrides
    if (tabGroup.overrideTabs) {
        tabGroup.remove(tabGroup.overrideTabs);
    }
    else {
        tabGroup.addEventListener('focus', overrideFocusTab);
    }

    tabGroup.add(background);
    tabGroup.overrideTabs = background;
}

function overrideFocusTab(evt) {
    if (evt.previousIndex >= 0) {
        evt.source.tabs[evt.previousIndex].selected.visible = false;
    }
    evt.tab.selected.visible = true;
}

https://gist.github.com/853935

于 2012-07-05T15:28:23.840 に答える