[UnityUI]动态滑动列表

UI布局是这样滴:

具体的关于滑动列表的设置可以参考这里,其中Image的Scroll Rect组件的Content赋值为Content,在这里,我们的Content是一个空物体,它的大小就是上图那个方框的大小。这里有两点很重要:

1.Content的Pivot的Y必须设置为Y的最大值,就像这样:

这是为什么呢?其实动态滑动列表的原理主要就是动态改变Content的Height,当中心点处于最顶的位置时,就能保证顶部位置不变,只有下部的位置在变化。假如中心点处于中间位置,那么改变Height,两边都会变化。

2.列表项的设置,要注意列表项预制体的Anchor Presets和Pivot,因为它们都会影响预制体实例化的位置,这里为了方便计算,我设置Anchor Presets为top-center,Pivot为(0.5,1)

最后给出代码:

using UnityEngine;
using System.Collections;
using System.Collections.Generic;

public class TaskPanel : MonoBehaviour {

    public static TaskPanel instance;
    public List<GameObject> items = new List<GameObject>();

    public GameObject content;//内容
    public Vector2 contentSize;//内容的原始高度

    public GameObject item;//列表项
    public float itemHeight;
    public Vector3 itemLocalPos;

    void Awake()
    {
        if (!instance)
            instance = this;
        else
            Destroy(this);
    }

    void Start()
    {
        content = GameObject.Find("Content");
        contentSize = content.GetComponent<RectTransform>().sizeDelta;

        item = Resources.Load("Item") as GameObject;
        itemHeight = item.GetComponent<RectTransform>().rect.height;
        itemLocalPos = item.transform.localPosition;
    }

    //添加列表项
    public void AddItem()
    {
        GameObject a = Instantiate(item) as GameObject;
        a.transform.parent = content.transform;
        a.transform.localPosition = new Vector3(itemLocalPos.x, itemLocalPos.y - items.Count * itemHeight, 0);
        items.Add(a);

        if (contentSize.y <= items.Count * itemHeight)//增加内容的高度
        {
            content.GetComponent<RectTransform>().sizeDelta = new Vector2(contentSize.x, items.Count * itemHeight);
        }
    }

    //移除列表项
    public void RemoveItem(GameObject t)
    {
        int index = items.IndexOf(t);
        items.Remove(t);
        Destroy(t);

        for (int i = index; i < items.Count; i++)//移除的列表项后的每一项都向前移动
        {
            items[i].transform.localPosition += new Vector3(0, itemHeight, 0);
        }

        if (contentSize.y <= items.Count * itemHeight)//调整内容的高度
            content.GetComponent<RectTransform>().sizeDelta = new Vector2(contentSize.x, items.Count * itemHeight);
        else
            content.GetComponent<RectTransform>().sizeDelta = contentSize;
    }
}

效果图:

时间: 2024-11-08 23:55:16

[UnityUI]动态滑动列表的相关文章

unity UGUI动态滑动列表

步骤: 1.在SceneMail创建一个Panel 改名为ScrollRect,ScrollRect添加Mask和Scroll Rect组件,Scroll Rect组件勾选Vertical 只需要垂直滚动 2.在SceneMail创建一个Scrollbar控件 3.ScrollRect上添加子控件Panel 改名为ScorllView,ScorllView大小覆盖ScrollRect 4.ScorllView添加子控件Panel 改名为Content,Content大小覆盖ScorllView

[UnityUI]循环滑动列表

效果图: 使用的是UGUI和DOTween 其中比较关键的是循环滑动和层次排序: 1.循环滑动:这里先假设显示五张图片,分别标记为0,1,2,3,4,那么当向左滑动时,序列就变为1,2,3,4,0,这里先保存4的位置,然后从4开始,4的位置和大小向3渐变,3的位置和大小向2渐变,2的位置和大小向1渐变,1的位置和大小向0渐变,0的位置直接变为原来保存的4的位置.也就是说,当向左滑动时,最左端的那张图片特殊处理,其余的向左推进:当向右滑动时,最右端的那张图片特殊处理,其余的向右推进. 2.层次排序

清默网络——动态访问列表

动态访问列表 动态ACL,也被称为lock-and-key ACL,在1996年作为选项引入思科 IOS.动态ACL仅支持IP流量.动态ACL依赖于telnet连接,用户telnet路由器,并验证通过,此时telnet自动断开,并动态产生一条 临时ACL语句.当一段时间内,无该语句相关流量通过,临时的ACL语句消失.         动态访问表是对传统访问表的一种重要功能增强.我们从动态访问表的名称就可以看出,动态访问表是能够创建动态访问表项的访问表.传统的标准访问表和扩展 的访问表不能创建动态

Android用TabLayout实现类似网易选项卡动态滑动效果

此前我们用HorizontalScrollView也实现了类似网易选项卡动态滑动效果,详见 Android选项卡动态滑动效果这篇文章 这里我们用TabLayout来实现这一效果.TabLayout是Android Design Support Library库中的控件. Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给

Android MaoZhuaWeiBo 好友动态信息列表数据抓取 -3

前面2篇把大致的开发说的差不多了,接下来说说粉丝动态消息列表或时间线数据的抓取与解析显示,我将他全部写在了一个 类里,并以封装类对象的形式存储数据,下面看看主要的服务代码: 粉丝动态消息列表数据抓取: package com.neweriweibo.service; /** * 用户消息列表 * @author Engineer-Jsp * @date 2014.10.29 * */ import java.io.BufferedReader; import java.io.InputStrea

视频在滑动列表中的异步缓存和播放

视频在滑动列表中的异步缓存和播放,转自大量高质量游戏应用源码的众筹论坛 http://www.zccode.com/forum.php?mod=viewthread&tid=679&extra= 最近在Github上看到VideoPlayerManager这么一个项目,目的在是ListView和RecyclerView中播放小视频,模仿了Instagram中滑动到可见视频项时开始播放该视频,滑动至不可见时停止视频播放的功能 但是该项目存在几个问题: 快速上下滑动列表后,无法再播放视频,有时

实现移动端touch事件的横向滑动列表效果

要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)-->touchmove(手指移动多少,元素相应移动多少). 接下来讲讲实现逻辑: 其实就是手指拖动列表向哪个方向移动多少像素,并设置左右拖动的边界值. 附上代码及注释: <div id="common_wrap" class="common-wrap"> <h4 class="common-kit__

Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡

 <Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡> 之前基于github上的第三方开源控件ViewPagerIndicator的UnderlinePageIndicator(原文链接:http://blog.csdn.net/zhangphil/article/details/44752213),自己写了一个底部带有滑块.且当ViewPager页面切换时候选项卡也随之相应切换,且滑块也随之相应动态滑动效果得控件.但写的太过于紧耦合,不利于复用,所以现在重构

在可滑动列表(ListView &amp; RecyclerView)中实现视频播放

Facebook: Instagram: Magisto 这篇文章里的技术是基于VideoPlayerManager这个开源类库的. 类库包含所有的代码以及一个示例.我在这篇文章里会跳过一些东西,所以如果要搞清楚某个细节,那最好还是把源码导入IDE然后再看这篇文章吧.就算你不看源码,这篇文章还是可以让你理解我以何种方式解决了什么问题. 两个问题 要实现目标我们要解决两个问题: 我们要控制视频播放.在Android系统中我们可以使用MediaPlayer.class操作SurfaceView而且播