3 Replies Latest reply on Oct 17, 2011 5:19 PM by Shongrunden

    Scrollable Tabbar in Mobile App

    MrCAnderson

      I'm working on putting together a small proof of concept mobile app for my company using Flex and Air.

       

      I've hit a small sticking point when trying to set up a TabbedViewNavigator with 7 tabs.  The tabs all get squashed together, and I can't read any of the titles.  Is there a way to make the tabbar scrollable so that the full size tabs can be seen and additional tabs can be scrolled to?

        • 1. Re: Scrollable Tabbar in Mobile App
          Shongrunden Adobe Employee

          You should be able to do this with a custom ButtonBar skin.  Here's an example with attached custom skins:

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                          xmlns:s="library://ns.adobe.com/flex/spark">

             

              <fx:Style>

                  @namespace s "library://ns.adobe.com/flex/spark";

                  s|TabbedViewNavigator #tabBar {

                      skinClass: ClassReference("ScrollingTabBarSkin");

                  }

                  s|TabbedViewNavigator #tabBar s|Scroller {

                      skinClass: ClassReference("NoScrollBarScrollerSkin");

                  }

              </fx:Style>

             

              <s:TabbedViewNavigator id="tvn" width="100%" height="100%" >

                  <s:ViewNavigator  label="AAAAAAA" width="100%" height="100%"/>

                  <s:ViewNavigator label="BBBBBBB" width="100%" height="100%"/>

                  <s:ViewNavigator label="CCCCCCC" width="100%" height="100%"/>

                  <s:ViewNavigator label="DDDDDDD" width="100%" height="100%"/>

                  <s:ViewNavigator label="EEEEEEE" width="100%" height="100%"/>

              </s:TabbedViewNavigator>

          </s:Application>

          • 2. Re: Scrollable Tabbar in Mobile App
            MrCAnderson Level 1

            Thank you very much.

             

            The ScrollingTabBarSkin worked perfectly.

             

            I still get a warning for the tabbar scroller style that says:

            CSS type selectors are not supported in components: 'spark.components.TabbedViewNavigator *#tabBar spark.components.Scroller'

            But I can live with the scroller bar showing up when the user scroll.

            • 3. Re: Scrollable Tabbar in Mobile App
              Shongrunden Adobe Employee

              Make sure the CSS is in your main Application file, not in a View or custom component.