Author Topic: swipe + tap question  (Read 4613 times)

Tripwire

  • Full Member
  • ***
  • Thank You
  • -Given: 9
  • -Receive: 0
  • Posts: 163
    • View Profile
swipe + tap question
« on: March 20, 2014, 08:50:51 AM »
Hi,

I'm having some trouble figuring out how I should make a functionality which is available in iOS. The functionality i'm targetting is for instance, in the Mail app on iOS when you want to remove a mail, you swipe / drag over the email (button) and 2 new buttons appear (More and Archive). I want this feature in my GUI for buttons in a ScrollView. Any idea or hints how to approach this functionality?

Check out this video @0.37 seconds
https://www.youtube.com/watch?v=hZWrbCeuHMk

Tripwire

  • Full Member
  • ***
  • Thank You
  • -Given: 9
  • -Receive: 0
  • Posts: 163
    • View Profile
Re: swipe + tap question
« Reply #1 on: March 24, 2014, 05:10:26 AM »
Anyone?

BTW if it's way easier to do I could use tap + LongTap on the object. Just need some clarification on how to achieve this.

wallabie

  • Full Member
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 200
    • View Profile
Re: swipe + tap question
« Reply #2 on: March 24, 2014, 05:24:40 AM »
Basic IOS behaviour with the scrollview component is what I also need.

I think that the scrollview needs to know how to handle Drag/swipe gestures vs tap.  It should be something that's built-in to the scrollview.  Perhaps it's there but I cannot find it.


ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: swipe + tap question
« Reply #3 on: March 24, 2014, 04:49:05 PM »
I'm not seeing much of a question here. You want to detect press & drag (swipe)? So do just that. You know when you get a press event, and you know when you get a drag event. Check the dragged distance in OnDrag -- if you dragged far enough, do the sliding movement of your UI element. NGUI gives you all the tools in the form of events, so just use them.

Tripwire

  • Full Member
  • ***
  • Thank You
  • -Given: 9
  • -Receive: 0
  • Posts: 163
    • View Profile
Re: swipe + tap question
« Reply #4 on: March 26, 2014, 03:19:13 PM »
I'm not seeing much of a question here. You want to detect press & drag (swipe)? So do just that. You know when you get a press event, and you know when you get a drag event. Check the dragged distance in OnDrag -- if you dragged far enough, do the sliding movement of your UI element. NGUI gives you all the tools in the form of events, so just use them.

True, but when using OnClick and using OnDrag the click event always triggers and the OnDrag evens also triggers. Should I use OnPress then? Or just use a boolean value which is set when dragging so that the OnClick doesn't trigger.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: swipe + tap question
« Reply #5 on: March 26, 2014, 08:05:16 PM »
You can cancel eligibility for a click by setting UICamera.currentTouch.clickNotification = UICamera.ClickNotification.None;

Tripwire

  • Full Member
  • ***
  • Thank You
  • -Given: 9
  • -Receive: 0
  • Posts: 163
    • View Profile
Re: swipe + tap question
« Reply #6 on: March 28, 2014, 08:43:47 AM »
Awesome thx i'm going to try it out!

Tripwire

  • Full Member
  • ***
  • Thank You
  • -Given: 9
  • -Receive: 0
  • Posts: 163
    • View Profile
Re: swipe + tap question
« Reply #7 on: March 31, 2014, 02:39:14 AM »
So i've created this script on for each draggable object in a ScrollView:

  1. using UnityEngine;
  2. using System.Collections;
  3.  
  4. public class Dragger : MonoBehaviour {
  5.  
  6.         private bool dragged = false;
  7.  
  8.         private EventDelegate evi;
  9.  
  10.         private void Start()
  11.         {
  12.                 evi = new EventDelegate(this, "TurnOffDragged");
  13.                 evi.oneShot = true;
  14.         }
  15.  
  16.         private void OnDrag()
  17.         {
  18.                 if(UICamera.currentTouch.pos.x > 300)
  19.                 {
  20.                         TweenButtonDelete();
  21.                 }
  22.  
  23.                 if(UICamera.currentTouch.pos.x < 100)
  24.                 {
  25.                         TweenButtonBack();
  26.                 }
  27.                
  28.         }
  29.  
  30.         private void OnClick()
  31.         {
  32.                 if(dragged)
  33.                 {
  34.                         UICamera.currentTouch.clickNotification = UICamera.ClickNotification.None;
  35.                         TweenButtonBack();
  36.                 }
  37.                 else
  38.                 {
  39.                         UICamera.currentTouch.clickNotification = UICamera.ClickNotification.Always;
  40.                         Debug.Log ("Click!");
  41.                 }
  42.         }
  43.  
  44.         private void TweenButtonDelete()
  45.         {
  46.                 TweenPosition.Begin(gameObject, 0.1f, new Vector3(85, transform.localPosition.y, transform.localPosition.z));
  47.                 dragged = true;
  48.         }
  49.  
  50.         private void TweenButtonBack()
  51.         {
  52.                 TweenPosition.Begin(gameObject, 0.1f, new Vector3(0, transform.localPosition.y, transform.localPosition.z)).onFinished.Add(evi);
  53.         }
  54.  
  55.         private void TurnOffDragged()
  56.         {
  57.                 dragged = false;
  58.         }
  59. }
  60.  

So when dragging I tween to the correct position. Is it possible to set the position of the draggable object to the finger position just like on iOS? I've tried a few things but can't really figure it out.

EDIT:
Also these buttons are dynamically generated, see script below:
  1. //Adds a new button to the list
  2. private void AddNewButton()
  3. {
  4.         GameObject clone = NGUITools.AddChild(Grid, ButtonPrefab);
  5.         UIEventListener.Get (clone).onClick += TweenPanel;
  6.         buttonCounter++;
  7.         clone.name = buttonCounter.ToString();
  8.         CurrentButton = clone;
  9.         SetAnchors(clone);
  10.         Grid.GetComponent<UIGrid>().Reposition();
  11. }
  12.  

So now the following problem arises, when the button is tweened the clicknotification should be none but TweenPanel is still called when clicking on the button. What should happen is, when the button is tweened to x = 85 the clicknotification of the button should be none. When the button is tweened back to x = 0 the clicknotification should be always. How can this be done?
« Last Edit: March 31, 2014, 03:04:58 AM by Tripwire »

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: swipe + tap question
« Reply #8 on: March 31, 2014, 06:38:50 AM »
Why are you setting the click notification inside an OnClick? You're already getting the OnClick event, that won't do anything useful.

You need to cancel the event in your OnDrag, not OnClick.

I'm not sure what you mean by "Is it possible to set the position of the draggable object to the finger position just like on iOS?" -- if it's repositioning the object to be under the drag position, then yes -- and NGUI comes with a drag & drop example for that.