Changing the position of the scroll bars in a spark List
The default spark List skin wraps the the underlying DataGroup with a Scroller component to easily provide scrolling functionality. Custom skinning the Scroller component isn’t very flexible; you can custom skin each scrollbar to change the visuals on them, but you can’t easily reposition them. In these cases it usually makes more sense to get rid of the Scroller and hook up the scrollbars directly.
One example of this is when you want a List that provides the ability to scroll up and down but want to move the buttons away from the right side. For example, placing the scroll buttons above and below the List content:
This was the approach I followed to get this behavior:
- Copy the default ListSkin.mxml into CustomListSkin.mxml
- Remove the Scroller (apply its top/left/right/clipAndEnableScrolling to the DataGroup below it)
- Remove the references to the scroller in the script block at the top (see SDK-23653)
- Add a VScrollBar and set its viewport to the underlying DataGroup
- Position the VScrollBar to stretch to the entire size by setting top/left/bottom/right to 0
- Increase top/bottom on the DataGroup to allow some space for the buttons
- Copy the default VScrollBarSkin.mxml into CustomVScrollBarSkin.mxml
- Tweak the VScrollBar skin to get rid of the track and the thumb and make the buttons 100% width
- Change the minHeight on CustomListSkin to something smaller (optional: this is to allow for the following example)
Given this skin you can create a List that only shows one item at a time by setting requestedRowCount=1 on the layout:
Note: This sample requires Flex SDK 4.0.0.10957 or higher. You can get the latest SDK builds from opensource.adobe.com.
This is just what I needed. I wanted to have a iphone-style scrollbar on the right that is transparent until you hover over it with the mouse.
I couldn’t get the list items to go right up to the right hand side–they always left room for the scrollbar even if it was transparent. But with the code above, I was able to get it working just as I need.
Thanks!
@DenisH – Glad to hear this was useful for you
Hi
Brilliant post. I used the above example to create a stepped/paged horizontal list for a mobile application. I extended the code so that custom buttons can be used and placed anywhere in the app. I have packaged the app in such a way that it runs in the browser just like it would run on a mobile phone – with draggable functionality and all:), so that you can see the demo:
http://bbishop.org/blog/?p=529
Thanks again
Brian Bishop
@Brian Bishop – Thanks for the link. You might be interested in looking at the new item snapping features coming in Flex 4.6: http://opensource.adobe.com/wiki/display/flexsdk/Item+Snapping