I have a ScrollPane in my scene and would like to add a series of Nodes to it. The exact amount must be dynamic. I've been testing the concept with Label nodes and can successfully add as many Labels as I want to the content of the ScrollPane (currently a VBox).
My problem is figuring out how to allow the user to scroll normally through the ScrollPane full of Nodes. The content matches pace with the scrollbar; that is, when I scroll down, the content moves down. I scroll up, the content scrolls up. So if I have 10 Labels, only five of which are currently visible, the instinctive action to see the other five would be to scroll down. Unfortunately, this just moves the entire content down, exposing empty space up top and hiding more of the Labels.
I can post some sample code if that helps, but the gist of my plan of attack is this:
ScrollPane sp = new ScrollPane();
VBox content = new VBox();
sp.setContent(content);
for (int i = 0; i < 10; i++)
{
Label label = new Label("Label " + i);
content.setPrefHeight(content.getPrefHeight() + label.getPrefHeight());
content.getChildren().add(label);
}
Because I use a VBox, the Labels are stacked (in the Y axis) atop one another, which is what I want. As more Labels are added, the ScrollBar needs to reflect the increased size of the VBox.
I've tried a few approaches to get this to work, including ScrollPane.setVmax() method, which is ok, but I still have the issue of the scroll direction moving the content in the wrong direction. I've also tried an EventHandler and EventFilter to modify values accordingly, still without solving the problem of scrolls not moving the content in the right direction.
The answer seems so simple, yet the it continues to evade me, even after many long hours messing around with the code.
EDIT:
jewelsea's suggestion of using a ListView solved my problem. However, I remain curious as to why using a ScrollPane did not fare so well. Additionally, I've run into odd behavior with the ListView implementation: I use a button to manually add a new Label to the view. Every now and then, the view will freeze up after adding a new Label. It locks up for a few seconds before either updating the scroll position or displaying the newly added Label. I don't know if this is because there are about 20 or so Label instances being managed by the view or if something more insidious is at play.
In regards to the scrollpane issues, I know what you're looking to do is possible because I'm doing something very similar. Based on the code snippet you gave above I would suggest trying few things...
Give the ScrollPane a preferred height and width to follow.
Don't give the content VBox any height sizing preference as it will grow with its contents. There should be no need to update its height after adding content either.
Use the VBox's setAlignment method to align its contents either TOP_LEFT, TOP_CENTER, or TOP_RIGHT.
Be cautious when using the getPrefHeight() method because if you haven't used setPrefHeight() beforehand I believe it will return -1.
Hope this helps you out!
Related
I'm implementing a login screen. It has a centred Column containing a TextField for entering an email address and a number of buttons for social sign-in. When a button is pressed, the Column is rebuilt with a CircularProgressIndicator (spinner) added at the bottom. I've wrapped the spinner in a custom widget that manages a ScaleTransition animation. That works OK, but the Column grows and shifts up to accommodate the final full size of the spinner immediately instead of moving smoothly with the animation.
I also wrapped the Column in an AnimatedSize widget using the same curve and duration as the ScaleTransition, but it hasn't helped. The root of the tree is a Consumer of the state that triggers the addition of the spinner so the animations should both be starting together. Maybe the the spinner needs to be permanent for this to work, but it doesn't seem desirable because its API doesn't provide a way to pause the animation. It would presumably constantly use some power to animate itself even when it isn't visible. I'm fussy about that sort of thing.
It looks like I might have to use an AnimatedList, but it doesn't seem semantically correct because the contents aren't really a list. So is there a more generic way to animate the size (and position) of parent widgets like Column and Center to track an animated size change of their children?
So, when I have some items with html content in it, and the fx = scroll, direction = left, the first item scrolls left, the container remains empty, then quickly the second item appears.
If I use images only, one image is one scrollable item, the items follow each other smoothly, so when the first item moves left, right after the second item also comes in from the right side.
Any idea what should I set, to make the plugin work properly?
My guess is its something with the width settings of an item, but I tried several settings, no one was good.
Thank you
Maybe your item is to big for the container? or someting with position absolute/relative? Coudl you show me some of your code (and images/div sizes?)
I found the solution (in stackoverflow). I have to use float:left on the div elements I want to scroll. Now they follow nicely each other.
#subdesign,
As nicely quoted by #RunningFusion may your item be too big for the container.
Try width: "100%" instead of specifying the width in px.
My application has a row of buttons across the bottom of the screen (a Linear Layout, oriented horizontally), and naturally the buttons all have different labels. My issue is that some of the labels are 2 lines and some are one, and between that and the fact that layout_height is set to "wrap_content", they're not all the same height, which just looks weird.
Now, without simply pinning all the heights to some value, is there a simple way for me to convince the buttons all to show up the same size? Can I set their heights to fill_parent without making full-screen sized buttons??
Edit: Okay, I apologize, that was a stupid question that I really could've (and did) answer on my own... I set the button heights to fill_parent and it looks fine. I probably should've tested THEN posted. Who knew??
You can simply create a table layout inside that linear layout like this
TableRow tr = new TableRow(this);
tr.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));
Button b = new Button (this);
b.setTextSize(10.0f);
tr.addView(b,47,47);
this way the size of button remains same
I have a UIScrollView (managed by a view controller) which I am using both full screen and as a subview. The full screen version works fine - the subview does not.
The subview is positioned so that it takes up about the bottom half of the screen, with a small - 20 pixels or so - margin at the bottom.
Initially it displays in the correct position but overwrites the bottom margin - even though the scrollview's frame is set to leave the margin.
When I scroll the view up by dragging it, the whole view moves upwards and obscures the top of the window. The frame stops moving when it hits the navigation bar at the top and starts scrolling like a normal scrollview. If I scroll it enough it eventually reveals the margin at the bottom of the screen.
I am at a loss to know what to do - I've tried every spring combination I can think of. I'm now looking at subview clipping.
Images below. The first shows the scrollview on initial page load, positioned correctly aside from lower margin overwrite. The scroll view has a white background.
The second image shows it scrolled up toward the top:
The third image shows it scrolled all the way up to the top - note that the lower margin has become visible.
I'm not 100% sure on this one, but worthy the shot: my guess is you're likely not setting the Bounds property correctly on your table.
To solve this issue, the easiest way would be to set myscrollview.clipsToBounds = true.
Something is definitely wrong here. I think what happens is that you are adding the same instance of scrollview as a subview on itself. So basically what you are left with, is one instance alone. Anything you add to the "subview", is basically added on the superview, since it is the same object.
For example, this is what I think you are doing in the view controller:
//...
private UIScrollView myScrollView;
public override void ViewDidLoad()
{
this.myScrollView = new UIScrollView();
this.View = this.myScrollView;
this.View.AddSubview(this.mySrcollView); // same instance
this.myScrollView.AddSubview(aUIButton); // "aUIButton" will be added in View also, since it is the same object
}
If this is the case, it is wrong. I suggest not changing the controller's view at all. If you want to have a controller that has a fullscreen UIScrollView, just create it and add it as a subview, making sure the AutoSizesSubviews property to true.
That's my understanding at least.
I have a grid/canvas that has an element (say an icon with an image and text overlayed) added to it dynamically via code.
Most of the time it renders correctly when added (content is aligned properly inside it),
but sometimes all the content sits in one corner.
I can remove/add/remove/add/remove/add and it will eventually do it
After a movement of the parent canvas, the element corrects itself as if the layout has been updated.
I have tried the following on Loaded and OnApplyTemplate for both the element and the element parent but it still seems to happen occasionally
InvalidateMeasure()
InvalidateArrange()
UpdateLayout()
Any ideas on why the content wouldn't arrange would be appreciated cause its driving me nuts
I'm not sure why it works for you sometimes but not others. But a grid has the inherent ability to dynamically resize itself and its contents. A canvas doesn't (you'd have to handle that manually in code).
If you change your canvas to a grid does it work? A grid has slightly more overhead than a canvas but it sounds to me like you need its functionality anyway.