{"id":1519,"date":"2016-06-21T14:18:30","date_gmt":"2016-06-21T06:18:30","guid":{"rendered":"http:\/\/www.clonefactor.com\/wordpress\/?p=1519"},"modified":"2016-06-21T14:21:32","modified_gmt":"2016-06-21T06:21:32","slug":"ugui","status":"publish","type":"post","link":"https:\/\/www.clonefactor.com\/wordpress\/program\/unity3d\/1519\/","title":{"rendered":"UGUI nest ScrollView drag event passer"},"content":{"rendered":"<p>For the first time using UGUI to develop the nest layout, very easy to arrange the basic UI elements,<br \/>\nsimply click &amp; drag..etc<br \/>\nand study some article on :\u00a0<a href=\"http:\/\/k79k06k02k.com\/blog\/542\/unity\/unity-ugui-%E5%8E%9F%E7%90%86%E7%AF%87%E4%BA%94%EF%BC%9Aauto-layout-%E8%87%AA%E5%8B%95%E4%BD%88%E5%B1%80\">http:\/\/k79k06k02k.com\/blog\/542\/unity\/unity-ugui-%E5%8E%9F%E7%90%86%E7%AF%87%E4%BA%94%EF%BC%9Aauto-layout-%E8%87%AA%E5%8B%95%E4%BD%88%E5%B1%80<\/a><\/p>\n<p>here is the first problem that I meet, the ScrollRect (ScrollView) within another ScrollRect will\u00a0not pass the drag event to their parent(s)<\/p>\n<p><iframe loading=\"lazy\" title=\"UGUI nest layout scrollview element #log 1\" width=\"1260\" height=\"945\" src=\"https:\/\/www.youtube.com\/embed\/4XzNlEEIl3U?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><br \/>\nwell, it not a bug but I insist developer should able to easier design which event can\u00a0bubble up to their parent.<br \/>\nfor that reason I did some research on unity forum and\u00a0realize the Event System limitation and behavior.<br \/>\nref:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.unity3d.com\/ScriptReference\/EventSystems.EventTrigger.html\">https:\/\/docs.unity3d.com\/ScriptReference\/EventSystems.EventTrigger.html<\/a><\/li>\n<li><a href=\"http:\/\/answers.unity3d.com\/questions\/902929\/scroll-not-working-when-elements-inside-have-click.html\">http:\/\/answers.unity3d.com\/questions\/902929\/scroll-not-working-when-elements-inside-have-click.html<\/a><\/li>\n<\/ul>\n<p>and created follow script to redirect the drag event to another specified ScrollRect (ScrollView)<\/p>\n<p><strong>UIDragPasser.cs<\/strong><\/p>\n<pre class=\"brush:csharp\">using UnityEngine;\r\nusing UnityEngine.UI;\r\nusing UnityEngine.EventSystems;\r\n\r\nnamespace Kit.UI\r\n{\r\n\t[RequireComponent(typeof(ScrollRect))]\r\n\tpublic class UIDragPasser : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler\r\n\t{\r\n\t\tpublic ScrollRect m_Scroll;\r\n\t\tpublic ScrollRect m_OtherScroll;\r\n\r\n\t\t[Range(0f, 1f)]\r\n\t\tpublic float m_MinThrehold;\r\n\t\t[Range(0f, 1f)]\r\n\t\tpublic float m_MaxThrehold;\r\n\r\n\t\tprivate bool m_Allow = false;\r\n\r\n\t\tvoid OnValidate()\r\n\t\t{\r\n\t\t\tif (m_Scroll == null)\r\n\t\t\t\tm_Scroll = GetComponent&lt;ScrollRect&gt;();\r\n\r\n\t\t\tif (m_OtherScroll == m_Scroll)\r\n\t\t\t\tm_OtherScroll = null;\r\n\t\t}\r\n\r\n\t\tpublic void OnBeginDrag(PointerEventData eventData)\r\n\t\t{\r\n\t\t\tm_Allow = IsAllow(eventData);\r\n\t\t\tif (m_Allow)\r\n\t\t\t{\r\n\t\t\t\tm_OtherScroll.OnBeginDrag(eventData);\r\n\t\t\t\tm_OtherScroll.SendMessage(\"OnBeginDrag\", eventData, SendMessageOptions.DontRequireReceiver);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tpublic void OnDrag(PointerEventData eventData)\r\n\t\t{\r\n\t\t\tif (m_Allow)\r\n\t\t\t{\r\n\t\t\t\tm_OtherScroll.OnDrag(eventData);\r\n\t\t\t\tm_OtherScroll.SendMessage(\"OnDrag\", eventData, SendMessageOptions.DontRequireReceiver);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tpublic void OnEndDrag(PointerEventData eventData)\r\n\t\t{\r\n\t\t\tif (m_Allow)\r\n\t\t\t{\r\n\t\t\t\tm_OtherScroll.OnEndDrag(eventData);\r\n\t\t\t\tm_OtherScroll.SendMessage(\"OnEndDrag\", eventData, SendMessageOptions.DontRequireReceiver);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tprivate bool IsAllow(PointerEventData eventData)\r\n\t\t{\r\n\t\t\tif (!m_Scroll.vertical &amp;&amp; !m_Scroll.horizontal)\r\n\t\t\t{\r\n\t\t\t\treturn true;\r\n\t\t\t}\r\n\t\t\telse if (m_Scroll.horizontal)\r\n\t\t\t{\r\n\t\t\t\treturn\r\n\t\t\t\t\t(Mathf.Abs(eventData.delta.y) &gt; Mathf.Abs(eventData.delta.x)) || \/\/ Main direction\r\n\t\t\t\t\t(eventData.delta.x &lt; 0f &amp;&amp; m_Scroll.horizontalNormalizedPosition &lt; m_MinThrehold) || \/\/ Left\r\n\t\t\t\t\t(eventData.delta.x &gt; 0f &amp;&amp; m_Scroll.horizontalNormalizedPosition &gt; m_MaxThrehold); \/\/ Right\r\n\t\t\t}\r\n\t\t\telse \/\/ if (m_Scroll.vertical)\r\n\t\t\t{\r\n\t\t\t\treturn\r\n\t\t\t\t\t(Mathf.Abs(eventData.delta.x) &gt; Mathf.Abs(eventData.delta.y)) || \/\/ Main direction\r\n\t\t\t\t\t(eventData.delta.y &gt; 0f &amp;&amp; m_Scroll.verticalNormalizedPosition &lt; m_MinThrehold) || \/\/ Bottom\r\n\t\t\t\t\t(eventData.delta.y &lt; 0f &amp;&amp; m_Scroll.verticalNormalizedPosition &gt; m_MaxThrehold); \/\/ Top\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}<\/pre>\n<p>by attach this script on ScrollRect (ScrollView) you can define which ScrollRect can receive the drag event<br \/>\nfeature : when current Scroll are reaching the limit, the event should pass to its parents<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1520\" src=\"http:\/\/www.clonefactor.com\/wordpress\/wp-content\/uploads\/2016\/06\/UIDragPasser.png\" alt=\"UIDragPasser\" width=\"376\" height=\"125\" srcset=\"https:\/\/www.clonefactor.com\/wordpress\/wp-content\/uploads\/2016\/06\/UIDragPasser.png 376w, https:\/\/www.clonefactor.com\/wordpress\/wp-content\/uploads\/2016\/06\/UIDragPasser-300x100.png 300w\" sizes=\"auto, (max-width: 376px) 100vw, 376px\" \/><\/p>\n<p>as example 0.1f(Min) is bottom\/left, 0.9f(Max) is top\/right, well the direction was a little bit confuse me.<br \/>\nits not perfect, and still require developer to manually setup the UIDragPasser.cs, but at least we have a way to do it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1521\" src=\"http:\/\/www.clonefactor.com\/wordpress\/wp-content\/uploads\/2016\/06\/UIDragPasser_setup.png\" alt=\"UIDragPasser_setup\" width=\"774\" height=\"253\" srcset=\"https:\/\/www.clonefactor.com\/wordpress\/wp-content\/uploads\/2016\/06\/UIDragPasser_setup.png 774w, https:\/\/www.clonefactor.com\/wordpress\/wp-content\/uploads\/2016\/06\/UIDragPasser_setup-300x98.png 300w, https:\/\/www.clonefactor.com\/wordpress\/wp-content\/uploads\/2016\/06\/UIDragPasser_setup-768x251.png 768w\" sizes=\"auto, (max-width: 774px) 100vw, 774px\" \/><\/p>\n<p>and then the result for apply this script.<\/p>\n<p><iframe loading=\"lazy\" title=\"UGUI nest layout scrollview element #log 2\" width=\"1260\" height=\"709\" src=\"https:\/\/www.youtube.com\/embed\/0CgG7WIkV0s?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p>and now I&#8217;m thinking about to implement the\u00a0Infinitely loop content during scrolling Scrollview, any suggestion ?!<\/p>\n<p>Study:<\/p>\n<ul>\n<li><a href=\"http:\/\/forum.unity3d.com\/threads\/infinite-scroll-with-scrollrect.265345\/\">http:\/\/forum.unity3d.com\/threads\/infinite-scroll-with-scrollrect.265345\/<\/a><\/li>\n<\/ul>\n<p><iframe loading=\"lazy\" title=\"Unity3D, Game UI, NGUI Endless Infinite Circular Scroll View Test #1\" width=\"1260\" height=\"945\" src=\"https:\/\/www.youtube.com\/embed\/eFMBCPujmCQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p>seem someone did it before~<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For the first time using UGUI to develop the nest  &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[67,43],"class_list":["post-1519","post","type-post","status-publish","format-standard","hentry","category-unity3d","tag-ugui","tag-unity3d-2"],"_links":{"self":[{"href":"https:\/\/www.clonefactor.com\/wordpress\/wp-json\/wp\/v2\/posts\/1519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clonefactor.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.clonefactor.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.clonefactor.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clonefactor.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1519"}],"version-history":[{"count":0,"href":"https:\/\/www.clonefactor.com\/wordpress\/wp-json\/wp\/v2\/posts\/1519\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.clonefactor.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1519"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.clonefactor.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1519"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.clonefactor.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}