Search Unity

  1. Check out the Unite LA keynote for updates on the Visual Effect Editor, the FPS Sample, ECS, Unity for Film and more! Watch it now!
    Dismiss Notice
  2. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  3. Improved Prefab workflow (includes Nested Prefabs!), 2D isometric Tilemap and more! Get the 2018.3 Beta now.
    Dismiss Notice
  4. Improve your Unity skills with a certified instructor in a private, interactive classroom. Watch the overview now.
    Dismiss Notice
  5. Want to see the most recent patch releases? Take a peek at the patch release page.
    Dismiss Notice

Unity UI Screen Swipe/Scroll Snap

Discussion in 'Unity UI & TextMesh Pro' started by Brogan89, Oct 21, 2017.

  1. Brogan89

    Brogan89

    Joined:
    Jul 10, 2014
    Posts:
    79
    Update: Have created a public Github repo for updates and improvements.


    I've been trying to perfect the screen swiping feature in Unity. For a while I was using Unity-UI-Extensions' HorizontalScrollSnap which is really good and it did the trick for a while. However, I always felt it was a little off. I couldn't figure out the threshold values to get it stop skipping screen and sometimes the screens would get stuck, etc. So I have attempted to make my own screen/page snapping with swipe gestures and also button control. The pagination toggles can also change screen/page upon click.

    I can't take all the credit for my script though as a good chunk of it is code from Unity's ScrollRect and hugely inspired by UI-Extensions version. I guess its my attempt at trying to fix what isn't really broken.

    The tween animations between screens is done with the free tween asset iTween which I have included in the package as it has a slight tweak which I don't think is part of the official script from the asset store.

    I invite anyone to have a go using it, I would really like some feedback on this, and if there is anything else that may be missing or could be added on to. Let me know what you think.
    ScreenSwipeInspector.PNG
     
    Last edited: Oct 22, 2017
    edencakir likes this.
  2. UDN_165a1249-a0c9-4099-8ba0-53daf2789359

    UDN_165a1249-a0c9-4099-8ba0-53daf2789359

    Joined:
    Nov 1, 2016
    Posts:
    5
    Hi, public Github repois dead link, could u send another link please, love to try ur version. thank you
     
  3. Brogan89

    Brogan89

    Joined:
    Jul 10, 2014
    Posts:
    79
    The should work now.
     
  4. UDN_165a1249-a0c9-4099-8ba0-53daf2789359

    UDN_165a1249-a0c9-4099-8ba0-53daf2789359

    Joined:
    Nov 1, 2016
    Posts:
    5
  5. rizawerx

    rizawerx

    Joined:
    May 30, 2013
    Posts:
    29
    thank you, greatly helped me
     
  6. Ibukii

    Ibukii

    Joined:
    Jun 23, 2016
    Posts:
    45
    Hi, can you check the scroll snap's interactions with images that have "preserve image aspect" on. It seems to make the page skew off centre.
     
  7. Brogan89

    Brogan89

    Joined:
    Jul 10, 2014
    Posts:
    79
    No problem. There have been updates I've made a long the way, but haven't had time to update my repo (because im using it in a production project) and also because I use Odin serializer now and .Net 4.6 and I can't really be bothered changing the .net4.6 stuff to .net3.5 syntax. but someday i may or ill just make the project .net4.6 only. :)


    I'm not quite sure what you mean sorry, but if i understand you correctly, i would try using the image as a child of the main page gameobjects and have the alpha at 0, that way your child images can still be the correct ratio and the parent objects will still act as they should.
     
  8. Ibukii

    Ibukii

    Joined:
    Jun 23, 2016
    Posts:
    45
    Yep, that fixes the page changing its width height!
     
  9. Mr_DarkShot

    Mr_DarkShot

    Joined:
    Jan 19, 2018
    Posts:
    5
    Am I doing something wrong? This errors out my Unity when I try to Android/iOS Build. It doesn't like serialized fields and the UnityEditor namespace.
    upload_2018-7-30_22-43-48.png
     
  10. Brogan89

    Brogan89

    Joined:
    Jul 10, 2014
    Posts:
    79
    Looks like an issue with the `#if` defines. for some reason it's trying to build Editor only code. I use this script (a modified version of it anyway) everyday for android/iOS so it should work. Let me get back to you ina few hours. Its about time I updated the repo anyway.

    What version of Unity are you using?
     
  11. Mr_DarkShot

    Mr_DarkShot

    Joined:
    Jan 19, 2018
    Posts:
    5
    2017.3.1
     
  12. Mr_DarkShot

    Mr_DarkShot

    Joined:
    Jan 19, 2018
    Posts:
    5
    Looks like that update did it! Those error messages went away.
     
  13. Brogan89

    Brogan89

    Joined:
    Jul 10, 2014
    Posts:
    79
    Well that's good. I didn't actually do anything. But ill take it :cool:. Enjoy.
     
  14. edencakir

    edencakir

    Joined:
    May 26, 2017
    Posts:
    6
    Hi @Brogan89, awesome work.

    Is there a way to make this script work with a full-screen scroll view in one of the screens? Currently, we have a list of items and trying to change the screen isn't working. Your script functions are not being triggered.

    What should we do?

    Thanks.
     
  15. Brogan89

    Brogan89

    Joined:
    Jul 10, 2014
    Posts:
    79
    Thanks, I'm glad it's being of use to people.

    Unfortunately Unity's SrollRect class is a little selfish and doesn't pass its event information to its parents, BUT you can indeed have another scroller on top of the ScreenSwipe screens. You have two options:

    1. Create your own script that extends Unity's ScrollRect class and pass the `OnDragBegin`, `OnDrag`, and `OnDragEnd` events through to the ScreenSwipe script.

    2. Use what someone has already done to a very high standard (which is what we use all the time now) called ScrollRectEx which I would highly recommend using. It is exactly the same as Unity's ScrollRect component, but it allows the event data to be shared so you can have multiple scrollers on top of each other.

    Best of luck.
     
  16. ehdeekay

    ehdeekay

    Joined:
    Nov 9, 2012
    Posts:
    17
    Was looking for something before writing one, thanks for sharing, much appreciated :)
     
    Brogan89 likes this.
  17. robertonunez

    robertonunez

    Joined:
    Oct 1, 2018
    Posts:
    1
    I looks great Thanks for sharing
     
    Brogan89 likes this.
  18. Noukta

    Noukta

    Joined:
    Apr 22, 2018
    Posts:
    1
    Great Asset!
    Thanks for sharing!
     
    Brogan89 likes this.