Skip to main content
Sandy.Dahl
Associate III
September 2, 2019
Question

How to scroll a scrollist where the elements are buttons?

  • September 2, 2019
  • 1 reply
  • 2714 views

Hello!

I want to have a menu and I want it to be a scrollist with the elements in the list being buttons. I have tried it in the designer. I made the custom container first, a small element with an image, a textarea and togglebutton. Then added a scrollist to my screen, using the buttoncontainer.

But when I simulate it, it turns out it's not very easy to scroll the list since the buttons is covering every element. So when I try to scroll I instead end up pushing the buttons.

What is the best solution to this issue? Is it possible to differentiate between a touch and a drag/swipe? Or is it easier to change the size of the button to not cover the element entirely?

Thanks in advance!

This topic has been closed for replies.

1 reply

Martin KJELDSEN
Principal III
September 2, 2019

Hi @Sandy.Dahl​,

You can get around this, but at some point whether something is a button click or the beginning of a drag or swipe is not something TouchGFX can detect - This is probably something that needs to be handled through UI design. What you can do, though, is to override the handleClick/Drag event methods of your view and evaluate what to do. You can then forward events to the view itself (to be automatically handled, as usual), or send events to concrete widgets manually.

But i'm not totally clear on what you're trying to achieve here. Just to show you part of what we're talking about here, imagine a swipe container with buttons inside. The nature of the swipe container is to react to click and drag, which means that elements inside (Like buttons, or even a smaller swipe container) will not receive anything. For the sake of being pendantic, we're just evaluating a single button, myButton inside a SwipeContainer, myContainer.

void MyView::handleClickEvent(const ClickEvent& evt)
{
 // The recipient of the initial touch is impossible to determine. Are we trying to drag but accidentally started on the same position as a button? Logic dictates that we're trying to press the button, so check for intersection and issue event manually.
	if(myButton.getRect().intersect(evt.getX(), evt.getY()) && evt.getType() == ClickEvent::PRESSED)
	{
		myButton.handleClickEvent(evt);
	} 
	else
	{
		mySwipeContainer.handleClickEvent(evt);
	}
 
	// && no longer intersects OR the swipe container is swiping. What should the functionality be? If you're dragging but are within the button rect, should it receive a release event to trigger a callback or not?
	if (wasDragging && evt.getType() == ClickEvent::RELEASED) 
	{
		//In this casesend a cancel event. we do not want the button to send a released event
		myButton.handleClickEvent(ClickEvent(ClickEvent::CANCEL, 0, 0));
	}
}
 
void MyView::handleDragEvent(const DragEvent& evt)
{
	//Here if we start dragging, we should send a CANCEL event to the currently PRESSED item, and start dragging the swipecontainer.
	mySwipeContainer.handleDragEvent(evt);
}

Sandy.Dahl
Associate III
September 3, 2019

Thank you for your reply, @Martin KJELDSEN​ !

What I want to achieve is a scrollable list of buttons, for example like the settings in a smartphone. That is usually a scrollable list and the elements are buttons going to separate screens. So the button doesn't trigger until release. =) Do you understand what I mean?