cancel
Showing results for 
Search instead for 
Did you mean: 

How to scroll a scrollist where the elements are buttons?

Sandy.Dahl
Associate II

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!

7 REPLIES 7
Martin KJELDSEN
Chief III

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);
}

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?

Hi Sandy,

I understand. Here are some observations:

  1. If a user puts his/her finger on a button, but intends to initiate a scroll, there's no way to get around that, so you should always forward the handleClickEvent (View::handleClickEvent(evt); )
  2. If the user starts dragging (handleDragEvent() is called) then you can evaluate in this handler if a button is being pressed or not and then send a CANCEL event to the button like i did in the code snippet above.

So, in essence:

  1. The scroll list will steal click events from underlying elements, but you can override handleClickEvent() and forward events to underlying
  2. Send cancel events to buttons that are pressed instantly when you start dragging (handleDragEvent() is called).

That should work.

/Martin

Hi Martin,

I'm in the same situation. About number one observation, is there a way to put ButtonClickEvent in the Release action?

About the code, how can I enable MyView::handleClickEvent() in the screen (by default is not enabled).

Regards.

Hi @eng23​,

Just add/define the method in your inherited view class. I'm not sure i understand your first question. The handleClickEvent is called with a ClickEvent argument. It supports both CLICKED and RELEASED.

/Martin

@Martin KJELDSEN​ 's snippet sounds a good start.

My next question would be:

when the ScrollList has multiple buttons, how to identify which button(itemIndex) to use in:

if(myButton.getRect().intersect(evt.getX(), evt.getY()) && evt.getType() == ClickEvent::PRESSED)