Unity3d—做一个年月日选择器(Scroll Rect拖动效果优化)— 无限滚动 + 锁定元素...

效果图

 

用的是UGUI

我先说思路

通过判断元素的位置信息来改变Hierarchy的顺序 实现无限滚动

改变位置的同时也要不断的调整Content的位置防止乱跳

元素锁定就是直接锁死的元素的移动范围 当只有拖动大于一定程度时才会发生改变

 

然后是面板设置

整体结构是这样子的

需要注意的是Content需要的两个组件

Content的爸爸只需要一个脚本

大小改变曲线(大致就行)

颜色渐变曲线

 

最后是脚本

  1 using System;
  2 using System.Collections;
  3 using System.Collections.Generic;
  4 using UnityEngine;
  5 using UnityEngine.EventSystems;
  6 using UnityEngine.UI;
  7 
  8 public class DateControl : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {
  9 
 10     public enum ItemType { _year, _month, _day }
 11 
 12     public ItemType _itemtype;
 13 
 14     RectTransform conentRect;
 15 
 16     RectTransform targetRec;
 17 
 18     Vector3 oldDragPos;
 19 
 20     Vector3 newDragPos;
 21 
 22     public AnimationCurve curve_scale;//改变大小曲线
 23     public AnimationCurve curve_color;//渐变效果曲线
 24 
 25 
 26     List<Text> textList = new List<Text>();
 27 
 28     Button testBtn;
 29 
 30     float 
 31         itemHeight,             //子项item的高
 32         contentParentHeight,    //Content爸爸的高
 33         itemNum,                //子项数量
 34         itemHeight_min,         //子项最小发生改变位置
 35         itemHeight_max,         //子项最大发生改变位置
 36         conentLimit,            //Conent纠正位置
 37         conentSpacing;          //子项间隔大小
 38 
 39     float deltaX, deltaY;
 40 
 41     [HideInInspector]
 42     public static int _year, _month, _day;
 43 
 44     [HideInInspector]
 45     int dateItemNum;
 46 
 47     Color itemColor_hig = new Color32(255, 255, 255, 255);
 48 
 49     void Awake() {
 50         conentRect = transform.FindChild("Content").GetComponent<RectTransform>();
 51         targetRec = transform.parent.FindChild("HighlightTarget").GetComponent<RectTransform>();
 52 
 53     }
 54 
 55     void OnEnable() {
 56         ItemList();
 57     }
 58 
 59     void Start() {
 60         switch (_itemtype) {
 61             case ItemType._year: InstantiateData(15, 2017); break;
 62             case ItemType._month: InstantiateData(12, 12); break;
 63             case ItemType._day: InstantiateData(31, 31); break;
 64         }
 65 
 66         itemNum = transform.FindChild("Content").childCount - 1;
 67 
 68         contentParentHeight = conentRect.parent.GetComponent<RectTransform>().sizeDelta.y;
 69 
 70         conentSpacing = conentRect.GetComponent<VerticalLayoutGroup>().spacing / 2;
 71 
 72         itemHeight = textList[0].rectTransform.sizeDelta.y + conentSpacing;
 73 
 74         if (itemNum % 2 == 0) conentLimit = (itemHeight + 5) / 2;
 75 
 76         else conentLimit = 0;
 77 
 78         conentRect.anchoredPosition = new Vector2(conentRect.anchoredPosition.x, conentLimit);
 79 
 80         deltaX = textList[0].GetComponent<RectTransform>().sizeDelta.x;
 81         deltaY = textList[0].GetComponent<RectTransform>().sizeDelta.y;
 82 
 83         Invoke("ItemList", 0.05f);
 84 
 85     }
 86 
 87     /// <summary>
 88     /// 生成子项item
 89     /// </summary>
 90     /// <param name="itemNum">子项数量</param>
 91     /// <param name="dat">子项最大值</param>
 92     void InstantiateData(int itemNum, int dat) {
 93         GameObject go;
 94         Text testObj = conentRect.FindChild("Text").GetComponent<Text>();
 95         for (int i = dat - itemNum + 1; i <= dat; i++) {
 96             go = Instantiate(testObj.gameObject, conentRect);
 97             go.GetComponent<Text>().text = i.ToString();
 98             go.name = i.ToString();
 99             textList.Add(go.GetComponent<Text>());
100             ShowItem(true);
101         }
102         Destroy(conentRect.FindChild("Text").gameObject);
103     }
104 
105     /// <summary>
106     /// 是增加或减少
107     /// </summary>
108     /// <param name="isIncreaseOrdecrease"></param>
109     void ShowItem(bool isIncreaseOrdecrease) {
110         itemHeight_min = -itemHeight;
111 
112         if (_itemtype == ItemType._day) itemHeight_max = -itemHeight * itemNum - 95;
113         else itemHeight_max = -itemHeight * itemNum;
114 
115         if (isIncreaseOrdecrease) {
116             foreach (Text rectItem in textList) {
117                 if (rectItem.GetComponent<RectTransform>().anchoredPosition.y > itemHeight_min) {
118                     print("+");
119                     rectItem.transform.SetSiblingIndex((int)itemNum);
120                 }
121             }
122             print(itemHeight_min);
123         } else {
124             foreach (Text rectItem in textList) {
125                 if (rectItem.GetComponent<RectTransform>().anchoredPosition.y < itemHeight_max) {
126                     print("-");
127                     rectItem.transform.SetSiblingIndex(0);
128                 }
129             }
130             print(itemHeight_max);
131 
132         }
133     }
134 
135     /// <summary>
136     /// 渐变效果,改变大小,高亮显示
137     /// </summary>
138     void ItemList() {
139         foreach (Text item in textList) {
140             float indexA = Mathf.Abs(item.GetComponent<RectTransform>().position.y - targetRec.position.y);
141             float indexSc_scale = Mathf.Abs(curve_scale.Evaluate(indexA / contentParentHeight));
142             float indexSc_color = Mathf.Abs(curve_color.Evaluate(indexA / contentParentHeight));
143             if (indexA < 15) {
144                 item.color = itemColor_hig;
145                 switch (_itemtype) {
146                     case ItemType._year: _year = int.Parse(item.text); break;
147                     case ItemType._month: _month = int.Parse(item.text); break;
148                     case ItemType._day: _day = int.Parse(item.text); break;
149                 }
150             } else item.color = new Color(0, 0, 0, 1 - indexSc_color);
151 
152             item.GetComponent<RectTransform>().localScale = new Vector3(1 - indexSc_scale, 1 - indexSc_scale * 3, 1 - indexSc_scale);
153             //item.GetComponent<RectTransform>().sizeDelta = new Vector2(deltaX - (deltaX * indexSc), deltaY - (deltaY * indexSc));
154         }
155 
156     }
157 
158     /// <summary>
159     /// 获取int类型日期,并转换为指定格式
160     /// </summary>
161     /// <returns></returns>
162     public static string GetDateInfo() { return _year + "-" + _month + "-" + _day; }
163 
164     /// <summary>
165     /// 纠正Conent位置
166     /// </summary>
167     void UpdateEx() {
168         if (conentRect.anchoredPosition.y > conentLimit) {
169             ShowItem(true);
170             conentRect.anchoredPosition = new Vector2(conentRect.anchoredPosition.x, conentRect.anchoredPosition.y - itemHeight);
171         }
172         if (conentRect.anchoredPosition.y < conentLimit) {
173             ShowItem(false);
174             conentRect.anchoredPosition = new Vector2(conentRect.anchoredPosition.x, conentRect.anchoredPosition.y + itemHeight);
175         }
176     }
177 
178     /// <summary>
179     /// 获取拖拽信息并改变Conent位置
180     /// </summary>
181     /// <param name="eventData"></param>
182     void SetDraggedPosition(PointerEventData eventData) {
183         if (RectTransformUtility.ScreenPointToWorldPointInRectangle(conentRect, eventData.position, eventData.pressEventCamera, out newDragPos)) {
184             newDragPos = eventData.position;
185             if (Mathf.Abs(newDragPos.y - oldDragPos.y) >= itemHeight) {
186                 if (newDragPos.y > oldDragPos.y) {
187                     conentRect.anchoredPosition = new Vector2(conentRect.anchoredPosition.x, conentRect.anchoredPosition.y + itemHeight);
188                     oldDragPos += new Vector3(0, itemHeight, 0);
189                     ItemList();
190                 } else {
191                     conentRect.anchoredPosition = new Vector2(conentRect.anchoredPosition.x, conentRect.anchoredPosition.y - itemHeight);
192                     oldDragPos -= new Vector3(0, itemHeight, 0);
193                     ItemList();
194                 }
195             }
196         }
197     }
198 
199     /// <summary>
200     /// 当开始拖拽
201     /// </summary>
202     /// <param name="eventData"></param>
203     public void OnBeginDrag(PointerEventData eventData) {
204         oldDragPos = eventData.position;
205     }
206 
207     public void OnDrag(PointerEventData eventData) {
208         SetDraggedPosition(eventData);
209         UpdateEx();
210     }
211 
212     public void OnEndDrag(PointerEventData eventData) {
213         SetDraggedPosition(eventData);
214         UpdateEx();
215     }
216 }

 

照着来的话基本没什么问题

因为赶时间所以很多地方写的简单粗暴请谅解

如果调整元素大小或者间隙大小 需要改变itemHeight_min 和 itemHeight_max 的值

他们分别为

itemHeight_min 

itemHeight_max 

也就是元素的最顶层和最底层的Y值

 

以上就是年月日选择器的具体步骤

 

转载于:https://www.cnblogs.com/sangblog/p/6995534.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/488148.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2020年虚拟现实和增强现实的发展趋势将会如何|0glasses低调分享

来源&#xff1a;AR工业应用2019年是虚拟现实和增强现实&#xff08;VR / AR&#xff09;增长的一年-统称为扩展现实&#xff08;XR&#xff09;。这些突破性技术的出现开始使人们远离最初流行的游戏和娱乐领域&#xff0c;用户可以戴上耳机并完全沉浸在计算机生成的环境中&…

qpaint 居中画图像_用AI画建筑分析图的好技巧。

今天给大家推送一期AI的技巧&#xff0c;有快捷键技巧&#xff0c;也有一些其他技巧&#xff0c;大家往下看&#xff0c;看有没有自己能用得到。AI技巧视图操作将图像显示为边框模式(切换) 【Ctrl】【Y】对所选对象生成预览(在边框模式中) 【Ctrl】【Shift】【Y】放大视图 【Ct…

新基建深度报告:七大领域十大龙头分析

来源&#xff1a;华泰证券稳增长、促转型&#xff0c;把握新基建浪潮中的七大产业机遇七大领域&#xff1a;5G、数据中心、云计算、工业互联网、物联网、人工智能、传 统基础设施数字化改造新基建担负着不一样的历史使命。传统基建稳需求、注重补短板&#xff0c;新基建关注新兴…

新版IDEA中Git的使用(三)

说明&#xff1a;前面介绍了在新版IDEA中Git的基本操作、分支操作&#xff0c;本文介绍一下在新版IDEA中&#xff0c;如何回滚代码&#xff1b; 分以下三个阶段来介绍&#xff1a; 未Commit的文件&#xff1b; 已经Commit&#xff0c;但未Push的文件&#xff1b; 已经Push的…

与微信、APP正面刚?三大运营商联合发布5G消息白皮书

来源&#xff1a;数据观综合4月8日&#xff0c;中国移动、中国电信、中国联通联合发布《5G消息白皮书》&#xff0c;宣布推出全新的信息交互服务——“5G消息”和生态建设构想&#xff0c;这意味着我国基础短信业务进入全面升级通道&#xff0c;传统短信将被5G消息(RCS业务)逐步…

tensorflow如何取平均_【他山之石】利用Tensorflow构建CNN图像多分类模型及图像参数、数据维度变化情况实例分析...

“他山之石&#xff0c;可以攻玉”&#xff0c;站在巨人的肩膀才能看得更高&#xff0c;走得更远。在科研的道路上&#xff0c;更需借助东风才能更快前行。为此&#xff0c;我们特别搜集整理了一些实用的代码链接&#xff0c;数据集&#xff0c;软件&#xff0c;编程技巧等&…

华为AR地图正式发布:每平方公里40亿三维信息点,1:1还原世界

来源&#xff1a;M数码4月8日晚&#xff0c;华为P40系列发布会上&#xff0c;余承东介绍了全新的华为AR地图&#xff0c;官方称实现了每平方公里40亿三维信息点&#xff0c;1:1还原真实世界。官方称华为AR地图是厘米级3D地图&#xff0c;每平方公里40亿三维信息点&#xff0c;1…

《全球创新观察》研究报告3月刊下发布

来源&#xff1a; 资本实验室大疫之下&#xff0c;全球产业格局有哪些变动&#xff1f;5G竞赛&#xff0c;又为哪些行业带来新风口&#xff1f;一起来看本期《全球创新观察》▼关于《全球创新观察》本报告是由国创会创新院&#xff08;中国科学院国家创新与发展战略研究会创新驱…

学自动化必知:20个传感器原理及应用动图

来源&#xff1a;工业机器人1.探伤仪2.氧浓度传感器3.电容传感器4.差压式液位计&#xff08;负迁移&#xff09;5.差压式液位计&#xff08;无迁移&#xff09;6.差压式液位计&#xff08;正迁移&#xff09;7.料位计&#xff08;称重式&#xff09;8.电位式传感器9.电子吊称10…

解析|一文读懂AGV的关键技术——激光SLAM与视觉SLAM的区别

来源&#xff1a;新机器视觉移动机器人(AGV)是工业机器人的一种。它由计算机控制&#xff0c;具有移动、自动导航、多传感器控制、网络交互等功能&#xff0c;在实际生产中最主要的用途是搬运&#xff0c;可以说只要有搬运需求的地方&#xff0c;就有移动机器人的应用可能。近年…

远程服务器端口是否开放(审计)

定期对服务器进行扫描&#xff0c;将危险端口有开放的服务器记录日志或通过邮件、微信告警出来先定义服务器列表 iplist&#xff1a;10.10.0.5010.10.0.5110.10.0.52....检查端口过程如下&#xff1a; #!/bin/bashfor i in awk {print $1} iplist; do if [[ $(nmap $i -p 22 |g…

深度揭秘硅片产业,巨大潜力成就半导体材料之王

来源&#xff1a;智东西硅片是半导体材料的基石&#xff0c;它是先通过拉单晶制作成硅棒&#xff0c;然后切割制作成的。由于硅原子的价电子数为4&#xff0c;序数适中&#xff0c;所以硅元素具有特殊的物理化学性质&#xff0c;可用在化工、光伏、芯片等领域。特别是在芯片领域…

vr软件测试,如何进行VR可用性测试?

本文主要介绍如何进行VR可用性测试以及其与其他平台的测试有什么不同&#xff0c;帮助VR产品相关设计者快速进行可用性测试&#xff0c;提升产品质量及体验。一、可用性测试是什么简单说&#xff0c;可用性测试就是在不知道或者想确认产品问题点的情况下&#xff0c;通过用户测…

短信升级为5G消息?三大运营商联合发布的《5G消息白皮书》说了啥?

来源&#xff1a;帮尼资讯5G时代来临&#xff0c;基础消息服务迎来全新变革。4月8日上午10时许&#xff0c;中国电信、中国移动、中国联通联合举行线上发布会&#xff0c;发布《5G消息白皮书》。《5G消息白皮书》的发布&#xff0c;意味着三大运营商齐推出与以往短信完全不同的…

计算机会考咋查成绩,2019会考成绩查询网址入口 高中会考怎么查成绩

会考是高中生们在参加高考之前的一道基础的考试环节&#xff0c;只有通过了会考的考生才有资格参加高考。下文有途网小编给大家整理了会考成绩的查询入口及查询方式&#xff0c;供参考&#xff01;会考成绩查询网址及查询方式普通高中的会考成绩也就是学业水平考试的成绩&#…

疫情影响全景图:疫情对各行业短中期影响!

来源&#xff1a; 中智科博海外大厂纷纷宣布停产&#xff0c;美国单周失业人数创新高。疫情使得海外大厂纷纷宣布停产&#xff0c;已宣布停产计划的知名企业涉及汽车、半导体、消费电子、飞机制造、奢侈品等行业&#xff0c;关联地区包括北美、欧洲、印度、东南亚等。美国三大汽…

我们为什么要探索人脑的奥秘?

来源&#xff1a;脑科学与智能技术卓越创新中心 4月5日21:30&#xff0c;4月11日9:00&#xff0c;CCTV-2央视财经频道《中国经济大讲堂》特邀中国科学院脑科学与智能技术卓越创新中心学术主任蒲慕明院士深度解读《我们为什么要探索人脑的奥秘&#xff1f;》未来智能实验室的主要…

DuiVision开发教程(19)-菜单

DuiVision菜单类是CDuiMenu。有两种显示的位置&#xff0c;一种是在窗体顶部某个button点击后能够下拉一个菜单&#xff0c;还有一种是托盘图标的右键菜单。 窗体中的菜单定义方式是xml文件里设置某个button的action属性&#xff0c;以menu:开头。后面是菜单的XML文件名称或XM…

值得收藏!深度报告解读NB-IoT

来源&#xff1a;物联传媒2019年NB-IoT行业获得了快速发展&#xff0c;用户数有望较2018年提升3倍以上&#xff0c;预计随着2020年基站数的大幅提升&#xff0c;为行业发展提供更进一步的支撑&#xff0c;加速技术成熟度提升&#xff0c;用户数有望保持快速增长。NB-IoT是万物互…

我的世界中国版服务器无限夜视,我的世界服务器游戏技巧 无限夜视的方法

来源&#xff1a;游戏园日期&#xff1a;2019-06-12 04:03:49我的世界服务器游戏技巧 无限夜视的方法。那下面给大家分享的是一些大家可能不知道的游戏技巧&#xff0c;那下面就一起来看看都是些什么技巧吧&#xff01;对了&#xff0c;里面还有关于服务器无限夜视的方法哦&…