UMG scrollbox and IOS and other touch screens

I have a scrollbox with buttons and on whilst I can scroll on iOS and other touch devices it is unwieldy scrolling with only the bar. I was wondering if it was possible to swipe over the buttons to scroll up or down and the press and release to click, like on a native iOS Table View? Is it possible to mimic this behavior in blueprints or C++?

I just stumbled upon this same problem. The scrollBox does not seem to have a touch-friendly operation mode, which is a big downer.

+1 I want to know the same thing. Is there an easy way for it to operate like most ‘shops’ you’ll find in mobile games?

I figured it out. It’s quite simple to modify the SScrollBox widget to support basic touch. The files are:

Engine\Source\Runtime\Slate\Public\Widgets\Layout\SScrollBox.h
Engine\Source\Runtime\Slate\Private\Widgets\Layout\SScrollBox.cpp

  • Add a a private boolean property to SScrollBox.h:

     /** Is the Widget being touched */
     bool bIsBeingTouched;
    
  • Override the three touch events in the public section of the .h:

     virtual FReply OnTouchStarted(const FGeometry& MyGeometry, const FPointerEvent& MouseEvent) override;
     virtual FReply OnTouchEnded(const FGeometry& MyGeometry, const FPointerEvent& MouseEvent) override;
     virtual FReply OnTouchMoved(const FGeometry& MyGeometry, const FPointerEvent& MouseEvent) override;
    
  • Go to the CPP file and implement the touch events:

    FReply STouchScrollBoxWidget::OnTouchStarted(const FGeometry& MyGeometry, const FPointerEvent& MouseEvent)
    {
    if (MouseEvent.GetTouchpadIndex() == 0)
    {
    bIsBeingTouched = true;
    this->InertialScrollManager.ClearScrollVelocity();

     	return FReply::Handled();
     }
    
     return FReply::Unhandled();
    

    }

    FReply STouchScrollBoxWidget::OnTouchEnded(const FGeometry& MyGeometry, const FPointerEvent& MouseEvent)
    {
    if (bIsBeingTouched && MouseEvent.GetTouchpadIndex() == 0)
    {
    bIsBeingTouched = false;
    return FReply::Handled();
    }

     return FReply::Unhandled();
    

    }

    FReply STouchScrollBoxWidget::OnTouchMoved(const FGeometry& MyGeometry, const FPointerEvent& MouseEvent)
    {
    if (bIsBeingTouched && MouseEvent.GetTouchpadIndex() == 0)
    {
    const float ScrollByAmount = GetScrollComponentFromVector(MouseEvent.GetCursorDelta());
    this->InertialScrollManager.AddScrollSample(-ScrollByAmount, FPlatformTime::Seconds());

     	const bool bDidScroll = this->ScrollBy(MyGeometry, -ScrollByAmount, false);
    
     	FReply Reply = FReply::Handled();
     	return Reply;
     }
    
     return FReply::Unhandled();
    

    }

  • Finally, to get inertial scrolling working, go to the function SScrollBox::Tick and change the first line from:

    if (!IsRightClickScrolling())

To this:

if (!IsRightClickScrolling() && !bIsBeingTouched)

There’s one flaw, that the inertial scrolling stops if you release the touch outside. That requires a bit more logic to work properly (probably input capture), but it should do for now.

Has anyone found a way of achieving this without modifying code?
I’d have thought there would have been some sort of option in the blueprint editor for this!

Hopefully this is on the list of things to do. Not having scroll boxes for mobile / touch seems like a big oversight in the UI design capabilities.

Has this been adressed so far? (Or maybe even fixed/implemented?)

I have the same problem right now, so it would be quite interesting to know any solutions (besides changing Engine Code, I’d like to avoid that :frowning: )

Thanks in advance :slight_smile:

Is there any way to get this into the master branch? This fix is not THAT complex and should be easy to add, right? Maybe any Unreal dev who reads this? (I mean … the code is here ( I assume it’s working, I didn’t try, as I’d like to stick with the binaries))

I’d like to throw my hat in for this feature request. This is quite an obvious addition to the base functionality of the scroll box and I would rather not use hacks to make this work in BP. I’m tempted to add this functionality into the main branch myself but not sure how long it would take me to figure out how to get stuff committed to it.

Epic devs, could we get an update on if this functionality is being looked into or not?

Massive +1 from me as well. Can someone from Epic comment on this?

For anyone who happens to come across this thread in the future (like I did on a couple of occasions), I didn’t think this was possible for the longest time. Today, I just happened to stumble across a solution for this in blueprints (in 4.10.0, I have NO idea if it existed before that!)

For the buttons nested inside your scrolling list, you need to adjust the ‘Click Method’ and ‘Touch Method’ property as below:

67228-scrollablelist.png

This will allow you to scroll the list by dragging on the buttons with a touch device. I tested this on an iPhone and it works perfectly.

I build a custom swipe detection event in blueprint for my android game menu. I’m confused when I have scrollbox behind my touch swipe event doesn’t work. Touch only work when I remove the scrollbox or make it hit test invisible or on other widgets. Please help if anyone has an idea where the problem is.

Jesus, searched so long for this solution and now i found it and it works - thanks a lot <3

Thank you, lifesaver!
I want to add one thing too. For people working on Windows the OS injects mouse events (often press AND release events) before the press event of the touch. In my case it means if I meant to scroll, a click-event was quickly injected before scroll.
For me it helped to set ‘Allow Right click drag’ to ‘false’ in the ScrollBox, this at least got rid of injected mouse events for touch and helped the logic.