Блог

Главная - Вопросы по программированию - Измените Цвет выделения активной вкладки Titanium

Измените Цвет выделения активной вкладки Titanium

#javascript #iphone #mobile #titanium

#javascript #iPhone #Мобильный #titanium

Вопрос:

Как изменить синий цвет выделения вкладки, которая выбрана / активна в Titanium? Можно ли определить значок активного состояния для выбранных вкладок?

Комментарии:

1. Из быстрого поиска в G я вижу, что вам нужно будет создать свой собственный пользовательский модуль, чтобы сделать это за пределами Titanium с помощью SDK. Если команда Appcelerator не планирует это делать, в настоящее время он недоступен.

2. я думаю, что это еще сложнее, я думаю, что это проблема iOS, а не appcelerator.

3. Спасибо за ваш вклад. Я думаю, что нашел решение, я собираюсь полностью отказаться от вкладок и просто использовать кнопки в представлении, похожие на вкладки.

Ответ №1:

Идеальным решением является использование:

 Ti.UI.createTab({
    icon: '/images/inactive_icon.png',
    activeIcon: '/images/active_icon.png',
});

Требуется Ti SDK 3.1.0

Ответ №2:

Одним из вариантов было бы добавить элементы в саму группу вкладок. Затем, когда вкладка получает фокус, вы можете отобразить изображение поверх нее.

Это необходимо, потому что (как упоминалось в комментариях выше) iOS не позволяет нам настраивать цвета или стиль выделения вкладок.

Ниже приведен пример того, как вы могли бы достичь этого. Вы могли бы сделать что-то менее сложное, если все, что вы хотите, это, чтобы выбранное изображение отличалось.

Надеюсь, это поможет! -Доусон

 /**
 * 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) {

    // are we restyling the tab groups?
    if (tabGroup.overrideTabs) {
        tabGroup.remove(tabGroup.overrideTabs);
    }

    // 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);

    // and create our individual tab buttons
    var activeTab = null, increment = 100 / tabGroup.tabs.length;
    deselectedOptions.width = selectedOptions.width = String(increment)   '%';
    for (var i = 0, l = tabGroup.tabs.length; i < l; i  ) {
        (function(i) {
            var tab = tabGroup.tabs[i];
            selectedOptions.left = deselectedOptions.left = String(increment * i)   '%';

            // set the title of the button to be the title of the tab
            selectedOptions.title = deselectedOptions.title = tab.title;

            tab.selected = Ti.UI.createButton(selectedOptions);
            tab.deselected = Ti.UI.createButton(deselectedOptions);
            tab.deselected.addEventListener('click', function() {
                if (activeTab) {
                    activeTab.selected.visible = false;
                }
                tab.selected.visible = true;
                activeTab = tab;
                tabGroup.setActiveTab(i);
            });
            tab.selected.visible = false;
            background.add(tab.deselected);
            background.add(tab.selected);
        })(i);
    }

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

    // "click" the first tab to get things started
    tabGroup.tabs[0].deselected.fireEvent('click');
}

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

var tabGroup = Ti.UI.createTabGroup();
tabGroup.addTab(Ti.UI.createTab({
    title: 'Tab 1',
    window: Ti.UI.createWindow({ title: 'Tab 1', backgroundColor: '#fff' })
}));
tabGroup.addTab(Ti.UI.createTab({
    title: 'Tab 2',
    window: Ti.UI.createWindow({ title: 'Tab 2', backgroundColor: '#fff' })
}));
tabGroup.addTab(Ti.UI.createTab({
    title: 'Tab 3',
    window: Ti.UI.createWindow({ title: 'Tab 3', backgroundColor: '#fff' })
}));

/*
 Now call our overrideTabs function!
 */
overrideTabs(
    tabGroup,
    { backgroundColor: '#f00' },
    { backgroundColor: '#999', color: '#000', style: 0 },
    { backgroundColor: '#333', color: '#888', style: 0 }
);

tabGroup.open();

(Взято из моей оригинальной версии, доступной здесь:https://gist.github.com/853935 )