Skip navigation
sb_2012
Currently Being Moderated

Accordion navigation pane for mobile apps

Nov 20, 2012 2:39 PM

Tags: #android #navigator #4.6 #accordion #pane

Hey,

       Is there a way to create an accordion pane in a android mobile app using Flash Builder? I know you could do it flash web pages. But, for mobile app, I am not sure. I apologize if this is a stupid or redundant question.

 

Any direction is greatly appreciated.

 
Replies
  • Currently Being Moderated
    Nov 29, 2012 2:58 PM   in reply to sb_2012

    The mx:Accordion control is not supported for mobile as mx: controls have been replaced by Spark for mobile.

     

    You could probably build one quite simply from all the stuff available in Spark, but...

     

    Accordion layout is not great for mobile as a _lot_ of screen area is used up (wasted) by the huge numbers of buttons. If you had four or five categories in an accordion, allowing 40 pixels for each one to make it clickable, then you have wasted 200 pixels of screen height _just_ in the heading buttons. 

     

    I would be inclined to think up a better control and to build that rather than trying to build an Accordion.

     

    G

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 1, 2012 2:13 PM   in reply to sb_2012

    I was thinking about this, for no reason other than I was meant to be doing something else.

     

    My initial idea was that you could probably achieve something that would give you reasonable flexibility in an accordion like control by creating a custom item renderer for an s:List. EG: Override public function set selected(b:Boolean):void; in the item renderer to add the display clip when selected and remove it when deselected. You could then supply your item elements as an IList with an Array of IVisualElement as its source. I knocked up a quick test and bar resizing the renderer (which I would need to think about a bit) it worked pretty effectively.

     

    Then, although it is a bit less elegant, it occurred to me you could use a simple s:VGroup swapping the relevant child elements in and out of the display list based on clicks on the label buttons.

     

    [code]

    <?xml version="1.0" encoding="utf-8"?>

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

                        xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" xmlns:accordion="accordion.*">

              <fx:Script>

                        <![CDATA[

                                  import mx.core.IVisualElement;

                                  protected function setClipIndex(selectThis:int):void

                                  {

                                            for(var i:int=0;i<listOfClips.length;i++) {

                                                      var ive:IVisualElement = listOfClips.getItemAt(i) as IVisualElement;

                                                      if(i==selectThis) {

                                                                if(!accordionVG.containsElement(ive)) {

                                                                          // Add at item position plus one to allow for the button

                                                                          accordionVG.addElementAt(ive,i+1);

                                                                }

                                                      } else {

                                                                if(accordionVG.containsElement(ive)) accordionVG.removeElement(ive);

                                                      }

                                            }

                                  }

                        ]]>

              </fx:Script>

              <fx:Declarations>

                        <!-- Place non-visual elements (e.g., services, value objects) here -->

                        <s:ArrayCollection id="listOfClips">

                                  <fx:Array>

                                            <s:Scroller width="100%" height="100%" toolTip="A group..." id="defaultGroup" >

                                                      <s:VGroup >

                                                                <s:Button /><s:Label text="Some text in some buttons..." /><s:Button />

                                                                <s:Button /><s:Label text="Some text in some buttons..." /><s:Button />

                                                                <s:Button /><s:Label text="Some text in some buttons..." /><s:Button />

                                                                <s:Button /><s:Label text="Some text in some buttons..." /><s:Button />

                                                      </s:VGroup>

                                            </s:Scroller>

     

                                            <s:Scroller width="100%" height="100%" toolTip="A different group..." >

                                                      <s:VGroup width="{width}">

                                                                <s:Button />

                                                                <s:Label text="Different text in some other buttons..." />

                                                                <s:Button />

                                                      </s:VGroup>

                                            </s:Scroller>

     

                                            <s:Scroller width="100%" height="100%" toolTip="Yet another group..." >

                                                      <s:VGroup width="{width}">

                                                                <s:Button />

                                                                <s:Label text="Some other stuff..." />

                                                                <s:Button />

                                                      </s:VGroup>

                                            </s:Scroller>

                                  </fx:Array>

                        </s:ArrayCollection>

              </fx:Declarations>

              <s:VGroup id="accordionVG" top="0" left="0" right="0" bottom="0" creationComplete="setClipIndex(0)">

                        <s:Button width="100%" label="{listOfClips.getItemAt(0).toolTip}" click="setClipIndex(0)" />

                        <s:Button width="100%" label="{listOfClips.getItemAt(1).toolTip}" click="setClipIndex(1)" />

                        <s:Button width="100%" label="{listOfClips.getItemAt(2).toolTip}" click="setClipIndex(2)" />

              </s:VGroup>

    </s:View>

    [/code]

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points