Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
urbanglowcam
Posts: 148
Registered: ‎10-30-2010
My Device: Bold 9930
My Carrier: Verizon
Accepted Solution

Overlapping Positioning

[ Edited ]

So I have two containers, one with a LoadIndicator and the other with a ListView (Both working). If I want the LoadIndicator to overlap the ListView and just show until the ListView loads, what is the best way to do this? Right now I'm using a Translation Y on the ListView to bring it up (and under the LoadIndicator), but it seems to show an animation of the ListView moving up when the LoadIndicator clears. I think it's just trying to fill in the space that the LoadIndicator Container did above it.

 

Is there a way to disable this animation and just have the ListView appear? Or is there a better way of doing this form of positioning? Thanks.

 

                    Container {
                        Container {
                            horizontalAlignment: HorizontalAlignment.Center
                            ActivityIndicator {
                                id: dataLoadIndicator
                                horizontalAlignment: HorizontalAlignment.Center
                                preferredWidth: 230.0
                                preferredHeight: 230.0
                                minWidth: 230.0
                                maxWidth: 230.0
                                minHeight: 230.0
                                maxHeight: 230.0
                            }
                        }
                        ListView {
                            visible: segmentedDrivers.selectedOption != biography
                            translationY: -230.0
                            preferredHeight: 920.0
                            minHeight: 920.0
                            maxHeight: 920.0
                            topPadding: 30.0
                            leftPadding: 30.0
                            rightPadding: 30.0
                            bottomPadding: 30.0
                            dataModel: dataModel
                            listItemComponents: [
                                ListItemComponent {
                                    StandardListItem {
                                        title: ListItemData.statTitle
                                        status: ListItemData.statNumbers
                                    }
                                }
                            ]
                        }

 

Please use plain text.
Developer
jasoncheung
Posts: 67
Registered: ‎09-01-2012
My Device: Dev Alpha
My Carrier: Bell

Re: Overlapping Positioning

Can you use the AbsoluteLayout layout and set their positions? Then you can use FadeTransition to change the opacity or if you don't need animation, just change the visible property.
Please use plain text.
Developer
kylefowler
Posts: 526
Registered: ‎05-17-2009
My Device: 9900
My Carrier: ATT

Re: Overlapping Positioning

I would use a dock container, which allows overlapping. use HorizontalAlignment.Center for the activityindicator and Fill for the listview. Make sure to put the activityindicator container below the listview in the qml file since it stacks based on that order.
Like all of my posts
Please use plain text.
Developer
urbanglowcam
Posts: 148
Registered: ‎10-30-2010
My Device: Bold 9930
My Carrier: Verizon

Re: Overlapping Positioning

Thank you both for the help. I think I had to set the visible: segmentedDrivers.selectedOption != biography to the whole container instead of just the ListView. The layout: DockLayout {} did help as well with overlapping.

 

What I forgot to show is that this was all prompted from a SegmentedControl too. That's why I had to set the visible: property. Thanks!

Please use plain text.