Codename One：BorderLayout下onTitleScrollAnimation失效问题求助

Hey there, I’ve run into this exact quirk with Codename One’s toolbar scroll animations before—super frustrating when you need BorderLayout but don’t want to lose that nice scroll effect! Let’s break down why this happens and how to fix it.

Why the Animation Fails with BorderLayout #

The core issue is that Codename One’s onTitleScrollAnimation relies on the form detecting scroll events from its direct scrollable child. When you nest your scrollable container inside a BorderLayout.CENTER slot, the form doesn’t automatically listen to scroll events from that nested container. The scroll events stay trapped in the inner container, never reaching the form’s animation manager.

Solution 1: Manually Forward Scroll Events #

The simplest fix is to add a scroll listener to your scrollable container and update the animation progress directly. This bypasses the form’s automatic event detection and gives you full control over the animation.

Here’s how to modify your existing code:

Form hi = new Form("Title", new BoxLayout(BoxLayout.Y_AXIS));
EncodedImage placeholder = EncodedImage 
.createFromImage(Image.createImage(hi.getWidth(), hi.getWidth() / 5, 0xffff0000), true);
URLImage background = URLImage.createToStorage(placeholder, "400px-AGameOfThrones.jpg", "http://awoiaf.westeros.org/images/thumb/9/93/AGameOfThrones.jpg/400px-AGameOfThrones.jpg");
background.fetch();
Style stitle = hi.getToolbar().getTitleComponent().getUnselectedStyle();
stitle.setBgImage(background);
stitle.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
stitle.setPaddingTop(15);

// Switch to BorderLayout as needed
hi.setLayout(new BorderLayout()); 

Container contentContainer = new Container(BoxLayout.y());
contentContainer.setScrollableY(true);
// Add elements to enable scrolling
for (int i = 0; i < 50; i++) {
    contentContainer.add(new Label("Entry " + i));
}

// Add the scroll listener to drive the animation
ComponentAnimation anim = hi.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
contentContainer.addScrollListener(e -> {
    // Calculate scroll progress (adjust 200 to tweak animation speed)
    float scrollProgress = Math.min(1.0f, (float) contentContainer.getScrollY() / 200.0f);
    anim.setProgress(scrollProgress);
});

hi.add(BorderLayout.CENTER, contentContainer); 
hi.show();

Solution 2: Use LayeredLayout to Keep Scrollable Container as Direct Child #

If you prefer to keep using the form’s built-in onTitleScrollAnimation logic, you can restructure your form with LayeredLayout. This lets you keep the scrollable container as a direct child of the form while still using BorderLayout for other UI elements.

Form hi = new Form("Title", new LayeredLayout());
EncodedImage placeholder = EncodedImage 
.createFromImage(Image.createImage(hi.getWidth(), hi.getWidth() / 5, 0xffff0000), true);
URLImage background = URLImage.createToStorage(placeholder, "400px-AGameOfThrones.jpg", "http://awoiaf.westeros.org/images/thumb/9/93/AGameOfThrones.jpg/400px-AGameOfThrones.jpg");
background.fetch();
Style stitle = hi.getToolbar().getTitleComponent().getUnselectedStyle();
stitle.setBgImage(background);
stitle.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
stitle.setPaddingTop(15);

// Create BorderLayout container for fixed UI elements (e.g., headers/footers)
Container borderContainer = new Container(new BorderLayout());
// Add fixed elements to borderContainer here if needed

// Create scrollable content container
Container contentContainer = new Container(BoxLayout.y());
contentContainer.setScrollableY(true);
for (int i = 0; i < 50; i++) {
    contentContainer.add(new Label("Entry " + i));
}

// Add both containers to the layered form
hi.add(borderContainer);
hi.add(contentContainer);

// Set up the default scroll animation
ComponentAnimation anim = hi.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
hi.getAnimationManager().onTitleScrollAnimation(anim);

hi.show();

Final Notes #

• For Solution 1, adjust the 200 value to control how quickly the animation completes as you scroll—smaller values mean the animation finishes faster.
• Solution 2 is great if you have fixed UI elements (like a footer) that need BorderLayout positioning, while keeping the scrollable content as a direct form child.

Either approach will let you use BorderLayout while retaining the toolbar scroll animation you want!

内容的提问来源于stack exchange，提问作者Lequi