Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-15450

iOS7: Can't style more-tab same as other tabs

    Details

    • Sprint:
      2014 Sprint 09 Tooling, 2014 Sprint 10 SDK

      Description

      I try to style a tab group's navigation bar background- and tint colors in such a way that both the 4 showing tabs as well as the the automatic More tab holding any other tabs look exactly the same. This seems impossible.

      Run the following code:

      Ti.UI.backgroundColor = '#0F0';
       
      var tabGroup = Titanium.UI.createTabGroup({
          barColor: '#F00',
          // Doesn't do anything     navTintColor: '#FFF',
          // Doesn't do good         tintColor: '#FFF'
      });
       
      function createTab(nr) {
       
          var win = Titanium.UI.createWindow({
              backgroundColor: '#fff',
              barColor: '#f00',
              title: 'Window ' + nr,
              navTintColor: '#FFF'
          });
       
          var label = Titanium.UI.createLabel({
              text: 'Label ' + nr
          });
       
          win.add(label);
       
          var tab = Titanium.UI.createTab({
              icon: 'KS_nav_views.png',
              title: 'Tab ' + nr,
              window: win
          });
       
          return tab;
      }
       
      for (var i = 1; i <= 20; i++) {
          tabGroup.addTab(createTab(i));
      }
       
      tabGroup.open();
      

      More-Tab extendEdges

      When you're on one of the first 4 tabs you'll see the green of Ti.UI.backgroundColor shine through the tab bar, like shown in screenshot A. But on the More tab, the tab bar is grey-ish like shown in screenshot B. It looks like this window has extendEdges for bottom enabled by default and setting extendEdges to NONE on the TabGroup doesn't change this.

      More-Tab barColor

      The above is also true for the nav bar, which is clear red instead of translucent like on the other tabs (screenshots A and B).

      More-Tab edit-dialog barColor

      When you press the Edit button on the More tab, you will see that the nav bar for the modal window that pops up is grey-ish (screenshot C), instead of the red I've set on the tab group. Again, I could not find a way to change this.

      More-Tab navTintColor

      If you go to one of the tabs you find under the More tab, you'll see the back arrow is white (screenshot D) because I've set the navTintColor of all windows to green. Now when you return to the More tab by pressing that arrow, you'll notice the Edit button of the More tab now also changed to white (screenshot E and compare B)! You would think you can set navTintColor on the TabGroup as well, but this has no effect. On the other hand, when you set tintColor it does change the Edit button's color, but also the color of the active tab's icon, all icons in the Edit window that are currently not in the tab bar, as well as the Done button on that window (screenshot F). And since we cannot change the barColor of that Edit window, this leaves you with a lot of white-on-white.

      More-Tab title

      The color of the nav bar titles nicely changes to white when you set UIStatusBarStyle to UIStatusBarStyleLightContent. However, only on the More tab the title will still be black and I cannot see how to change this (screenshot G).

        Attachments

        1. ScreenshotA.png
          ScreenshotA.png
          31 kB
        2. ScreenshotB.png
          ScreenshotB.png
          58 kB
        3. ScreenshotC.png
          ScreenshotC.png
          40 kB
        4. ScreenshotD.png
          ScreenshotD.png
          32 kB
        5. ScreenshotE.png
          ScreenshotE.png
          58 kB
        6. ScreenshotF.png
          ScreenshotF.png
          25 kB
        7. ScreenshotG.png
          ScreenshotG.png
          44 kB

          Activity

            People

            • Assignee:
              vduggal Vishal Duggal (Inactive)
              Reporter:
              fokkezb Fokke Zandbergen
              Reviewer:
              Sabil Rahim
            • Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-17621
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Source Code