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

5.Content添加Vertical Layout Group和Content size Fitter组件,Vertical Layout Group组件设置好间隔和对其方式,会自动排列我们添加的控件,Content size Fitter用来调整显示内容

6.将ScorllView、Content和Scrollbar分别拖到ScrollRect里面 如图所示

 7.Scollbar组件属性Direction修改成 Bottom To Top(往下拉将ScorllRect底部隐藏部分拖出来)

8.制作Prefab Item

代码

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

public class SceneMail : MonoBehaviour
{
    public Button mItemPrefab;//要添加到列表的预设体按钮组件
    public Transform mContentTransform;//容器Content的transform
    public Scrollbar mScrollbar;//滑动条

    List<Button> lists = new List<Button>();//存放按钮组件

    float itemHeight;//单个按钮组件的height

    RectTransform rect;//容器content的rect

    public VerticalLayoutGroup group;//用于计算内容的高度

    // Use this for initialization
    void Start()
    {
        rect = mContentTransform.GetComponent<RectTransform>();
        itemHeight = mItemPrefab.GetComponent<RectTransform>().rect.height;

        ShowItems();
        mScrollbar.value = 1.0f;

    }

    /// <summary>
    /// 显示Item列表
    /// </summary>
    void ShowItems()
    {
        for (int i = 0; i < 20; i++)
        {
            AddItem();
        }
    }
    void Update()
    {
        //添加
        if (Input.GetKeyDown(KeyCode.Alpha0))
        {
            AddItem();
        }
        //使列表跳转到顶部
        if (Input.GetKeyDown(KeyCode.Alpha1))
        {
            ToTopFunc();
        }
        //清空列表
        if (Input.GetKeyDown(KeyCode.Alpha2))
        {
            ClearFunc();
        }
    }
    //添加组件
    void AddItem()
    {

        Button item = Instantiate(mItemPrefab, transform.position, transform.rotation);
        item.GetComponentInChildren<Text>().text = lists.Count.ToString();
        item.transform.parent = mContentTransform;
        lists.Add(item);

        //给每个按钮组件监听点击事件
        item.onClick.AddListener(
            () =>
            {
                onClickFunc(item);
            }
        );

        //rect.sizeDelta的x是width
        //rect.sizeDelta的y是height
        //rect.sizeDelta=new Vector2(rect.sizeDelta.x, lists.Count * itemHeight);
        rect.sizeDelta = new Vector2(rect.sizeDelta.x,
            group.padding.top + group.padding.bottom + lists.Count * itemHeight + (lists.Count - 1) * group.spacing);
        //rect.sizeDelta = new Vector2(rect.sizeDelta.x, lists.Count * itemHeight);
    }
    //使列表跳转到顶部
    void ToTopFunc()
    {

        //offsetMin 是vector2(left, bottom);

        //offsetMax 是vector2(right, top);

        rect.offsetMin = new Vector2(rect.offsetMin.x,-rect.sizeDelta.y);
        rect.offsetMax = new Vector2(rect.offsetMax.x,0);

    }
    //使列表跳转到底部
    void ToBottomFunc()
    {

        /*rect.offsetMin = new Vector2(rect.offsetMin.x, 0);
        rect.offsetMax = new Vector2(rect.offsetMax.x, rect.sizeDelta.y);*/
    }
    void onClickFunc(Button btn)
    {
        Debug.Log(btn.gameObject.GetComponent<Text>());
        removeItemFunc(btn);
    }
    //清空列表
    void ClearFunc()
    {
        for(int i = 0; i < lists.Count; i++)
        {
            Destroy(lists[i].gameObject);
        }
        lists = new List<Button>();
        rect.sizeDelta = new Vector2(rect.sizeDelta.x, lists.Count * itemHeight);
    }
    //删除单个按钮组件
    void removeItemFunc(Button _btn)
    {
        //因为Vertical Layout Group组件会自动排列添加上的控件,所以只需要移除场景中的物体模型和list中对象就行了
        //排列位置的任务就交给Vertical Layout Group 了

        Destroy(_btn.gameObject);

        int index = lists.IndexOf(_btn);
        lists.Remove(_btn);

        Debug.Log(lists.Count);

        //需要重置容器的height
        rect.sizeDelta = new Vector2(rect.sizeDelta.x,
            group.padding.top + group.padding.bottom + lists.Count * itemHeight + (lists.Count - 1) * group.spacing);

        //rect.sizeDelta = new Vector2(rect.sizeDelta.x, lists.Count * itemHeight);

        /*
        if (rect.sizeDelta.y > 1080)
        {

            rect.sizeDelta = new Vector2(rect.sizeDelta.x, lists.Count * itemHeight);
        }
        else
        {
            rect.sizeDelta = new Vector2(rect.sizeDelta.x, 1080);
        }*/

    }
}

用的时候只要把这个脚本随便绑到场景中就行

另外,在重置容器的height时,两种方法我觉得都差不多,而且在添加和删减组件时好像都还是有些问题的,这一点在用的时候要注意

其中group关联的是

PS:

rect是RectTransform
rect.sizeDelta的x是width
rect.sizeDelta的y是height

rect.offsetMin 是vector2(left, bottom);

rect.offsetMax 是vector2(right, top);

原文地址:https://www.cnblogs.com/lingLuoChengMi/p/10000360.html

时间: 2024-10-03 00:06:48

unity UGUI动态滑动列表的相关文章

[UnityUI]动态滑动列表

UI布局是这样滴: 具体的关于滑动列表的设置可以参考这里,其中Image的Scroll Rect组件的Content赋值为Content,在这里,我们的Content是一个空物体,它的大小就是上图那个方框的大小.这里有两点很重要: 1.Content的Pivot的Y必须设置为Y的最大值,就像这样: 这是为什么呢?其实动态滑动列表的原理主要就是动态改变Content的Height,当中心点处于最顶的位置时,就能保证顶部位置不变,只有下部的位置在变化.假如中心点处于中间位置,那么改变Height,两

Unity UGUI 分页滑动

2016-10-04 13:45:21 1 using UnityEngine; 2 using System.Collections; 3 using UnityEngine.EventSystems; 4 using System; 5 using UnityEngine.UI; 6 public class LevelButtonScrollRect : MonoBehaviour, IBeginDragHandler, IEndDragHandler 7 { 8     private

Unity UGUI —— 无限循环List

还记得大学毕业刚工作的时候是做flash的开发,那时候看到别人写的各种各样的UI组件就非常佩服,后来自己也慢慢尝试着写,发现其实也就那么回事.UI的开发其实技术的成分相对来说不算多,但是一个好的UI是绝对少不了底层组件的支持的.我个人认为UI组件中相对比较复杂的就是List了,所以,这两天实现了一个UGUI的list,写了好几个版本,最终这个版本是相对比较好用的,在这我介绍一下大概思路,一是巩固一下知识做个记录,二是发扬一下分享精神.嘿嘿,大家多多赐教. 写List有两个重点是需要考虑的: 1.

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

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

使用Unity创造动态的2D水体效果

者:Alex Rose 在本篇教程中,我们将使用简单的物理机制模拟一个动态的2D水体.我们将使用一个线性渲染器.网格渲染器,触发器以及粒子的混合体来创造这一水体效果,最终得到可运用于你下款游戏的水纹和水花.这里包含了Unity样本源,但你应该能够使用任何游戏引擎以相同的原理执行类似的操作. 设置水体管理器 我们将使用Unity的一个线性渲染器来渲染我们的水体表面,并使用这些节点来展现持续的波纹. unity-water-linerenderer(from gamedevelopment) 我们将

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

Unity的动态加载简单使用

Unity的动态加载简单使用Unity可以快速,轻量化的实现IOC,不用自已写类似反射代码来动态加载类或dll了使用Unity先要用nuget获取相关引用文件Unity可通过代码或config文件来配置要加动态加载的内容 使用示例 static void Main(string[] args) { Console.WriteLine("'Y' use Config Register Type,Otherwise use Code Register Type"); bool isUseC

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

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