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

[导读]最近.....废话不多说上效果图用的是UGUI我先说思路通过判断元素的位置信息来改变Hierarchy的顺序 实现无限滚动改变位置的同时也要不断的调整Content的位置防止乱跳元素锁定就是直接锁死的元素的移动范围 当只有拖动大于一定程度时

最近.....

废话不多说上效果图

1176379-20170612223836821-839466076.gif

用的是UGUI

我先说思路

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

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

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

1176379-20170612224250431-1825163802.gif

然后是面板设置

整体结构是这样子的

1176379-20170612224915368-256964478.png

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

1176379-20170612225117900-683708447.png

Content的爸爸只需要一个脚本

1176379-20170612225208196-1658570451.png

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

1176379-20170612225301306-1867155414.png

颜色渐变曲线

1176379-20170612225313071-1706028318.png

最后是脚本using System;

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.EventSystems;

using UnityEngine.UI;

public class DateControl : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler {

public enum ItemType { _year, _month, _day }

public ItemType _itemtype;

RectTransform conentRect;

RectTransform targetRec;

Vector3 oldDragPos;

Vector3 newDragPos;

public AnimationCurve curve_scale;//改变大小曲线

public AnimationCurve curve_color;//渐变效果曲线

List textList = new List();

Button testBtn;

float

itemHeight,             //子项item的高

contentParentHeight,    //Content爸爸的高

itemNum,                //子项数量

itemHeight_min,         //子项最小发生改变位置

itemHeight_max,         //子项最大发生改变位置

conentLimit,            //Conent纠正位置

conentSpacing;          //子项间隔大小

float deltaX, deltaY;

[HideInInspector]

public static int _year, _month, _day;

[HideInInspector]

int dateItemNum;

Color itemColor_hig = new Color32(255, 255, 255, 255);

void Awake() {

conentRect = transform.FindChild("Content").GetComponent();

targetRec = transform.parent.FindChild("HighlightTarget").GetComponent();

}

void OnEnable() {

ItemList();

}

void Start() {

switch (_itemtype) {

case ItemType._year: InstantiateData(15, 2017); break;

case ItemType._month: InstantiateData(12, 12); break;

case ItemType._day: InstantiateData(31, 31); break;

}

itemNum = transform.FindChild("Content").childCount - 1;

contentParentHeight = conentRect.parent.GetComponent().sizeDelta.y;

conentSpacing = conentRect.GetComponent().spacing / 2;

itemHeight = textList[0].rectTransform.sizeDelta.y + conentSpacing;

if (itemNum % 2 == 0) conentLimit = (itemHeight + 5) / 2;

else conentLimit = 0;

conentRect.anchoredPosition = new Vector2(conentRect.anchoredPosition.x, conentLimit);

deltaX = textList[0].GetComponent().sizeDelta.x;

deltaY = textList[0].GetComponent().sizeDelta.y;

Invoke("ItemList", 0.05f);

}

/// 

/// 生成子项item

/// 

/// 子项数量

/// 子项最大值

void InstantiateData(int itemNum, int dat) {

GameObject go;

Text testObj = conentRect.FindChild("Text").GetComponent();

for (int i = dat - itemNum + 1; i <= dat; i++) {

go = Instantiate(testObj.gameObject, conentRect);

go.GetComponent().text = i.ToString();

go.name = i.ToString();

textList.Add(go.GetComponent());

ShowItem(true);

}

Destroy(conentRect.FindChild("Text").gameObject);

}

/// 

/// 是增加或减少

/// 

/// 

void ShowItem(bool isIncreaseOrdecrease) {

itemHeight_min = -itemHeight;

if (_itemtype == ItemType._day) itemHeight_max = -itemHeight * itemNum - 95;

else itemHeight_max = -itemHeight * itemNum;

if (isIncreaseOrdecrease) {

foreach (Text rectItem in textList) {

if (rectItem.GetComponent().anchoredPosition.y > itemHeight_min) {

print("+");

rectItem.transform.SetSiblingIndex((int)itemNum);

}

}

print(itemHeight_min);

} else {

foreach (Text rectItem in textList) {

if (rectItem.GetComponent().anchoredPosition.y 

print("-");

rectItem.transform.SetSiblingIndex(0);

}

}

print(itemHeight_max);

}

}

/// 

/// 渐变效果,改变大小,高亮显示

/// 

void ItemList() {

foreach (Text item in textList) {

float indexA = Mathf.Abs(item.GetComponent().position.y - targetRec.position.y);

float indexSc_scale = Mathf.Abs(curve_scale.Evaluate(indexA / contentParentHeight));

float indexSc_color = Mathf.Abs(curve_color.Evaluate(indexA / contentParentHeight));

if (indexA 

item.color = itemColor_hig;

switch (_itemtype) {

case ItemType._year: _year = int.Parse(item.text); break;

case ItemType._month: _month = int.Parse(item.text); break;

case ItemType._day: _day = int.Parse(item.text); break;

}

} else item.color = new Color(0, 0, 0, 1 - indexSc_color);

item.GetComponent().localScale = new Vector3(1 - indexSc_scale, 1 - indexSc_scale * 3, 1 - indexSc_scale);

//item.GetComponent().sizeDelta = new Vector2(deltaX - (deltaX * indexSc), deltaY - (deltaY * indexSc));

}

}

/// 

/// 获取int类型日期,并转换为指定格式

/// 

/// 

public static string GetDateInfo() { return _year + "-" + _month + "-" + _day; }

/// 

/// 纠正Conent位置

/// 

void UpdateEx() {

if (conentRect.anchoredPosition.y > conentLimit) {

ShowItem(true);

conentRect.anchoredPosition = new Vector2(conentRect.anchoredPosition.x, conentRect.anchoredPosition.y - itemHeight);

}

if (conentRect.anchoredPosition.y 

ShowItem(false);

conentRect.anchoredPosition = new Vector2(conentRect.anchoredPosition.x, conentRect.anchoredPosition.y + itemHeight);

}

}

/// 

/// 获取拖拽信息并改变Conent位置

/// 

/// 

void SetDraggedPosition(PointerEventData eventData) {

if (RectTransformUtility.ScreenPointToWorldPointInRectangle(conentRect, eventData.position, eventData.pressEventCamera, out newDragPos)) {

newDragPos = eventData.position;

if (Mathf.Abs(newDragPos.y - oldDragPos.y) >= itemHeight) {

if (newDragPos.y > oldDragPos.y) {

conentRect.anchoredPosition = new Vector2(conentRect.anchoredPosition.x, conentRect.anchoredPosition.y + itemHeight);

oldDragPos += new Vector3(0, itemHeight, 0);

ItemList();

} else {

conentRect.anchoredPosition = new Vector2(conentRect.anchoredPosition.x, conentRect.anchoredPosition.y - itemHeight);

oldDragPos -= new Vector3(0, itemHeight, 0);

ItemList();

}

}

}

}

/// 

/// 当开始拖拽

/// 

/// 

public void OnBeginDrag(PointerEventData eventData) {

oldDragPos = eventData.position;

}

public void OnDrag(PointerEventData eventData) {

SetDraggedPosition(eventData);

UpdateEx();

}

public void OnEndDrag(PointerEventData eventData) {

SetDraggedPosition(eventData);

UpdateEx();

}

}

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

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

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

他们分别为

itemHeight_min

1176379-20170612225917556-1946493637.png

itemHeight_max

1176379-20170612225955915-1636366617.png

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值