关于ugui布局(含scrollview)

本文介绍了在Unity中使用UGUI进行聊天系统UI布局的经验,重点讲解了Scrollview的配置,包括添加Scroll Rect和Mask组件,以及Content的Size Fitter和Layout Group的使用。强调了自动布局的重要性以及如何处理子物体的大小和位置,以确保在Scrollview中正确显示和滚动。同时提到了Element Layout在不受排序影响时的应用,并给出了布局注意事项。

  做的聊天系统,UI布局简直弄的头疼。特意记录下来。

scrollview:1. 首先给panel加上scroll rect组件,然后加上mask 2d组件(和mask区别是mask需要image组件,然后eventtriiger也需要image组件)

// 注意: panel的大小决定显示的大小。scroll rect的选项决定可以水平还是垂直拖拽,可决定到底后是否可以继续拖拽然后恢复(movement type :elastic)

              2. 在panel下面添加content空物体,添加自适应组件,content size fitter(必须加,否则后续克隆的物体无法进行拖拽显示)。添加自动排序组件gird或者水平垂直layout。(若物体数量是可定的,则不需要) // 子物体均在content下,同时想要控制子物体大小注意家element layout。

             3.content的大小决定能拖拽的滑动效果,物品itemguo小则无法拖拽,panel决定能显示的区域(加了遮罩)。

     4. 自动布局不是必须的,在有限的物品item下,可以改变item任意位置,仍然可以做到滑动,保证content size fitter。

 更多参考: http://www.2cto.com/kf/201604/498306.html 

     http://www.v8en.com/news/view/853


首先是纵向布局,一般的游戏基本上都是scroll rect的纵向布局,开始用的gird组件,发现很多时候不好用。

然后换成vertical layout group,可以很好的调整,然后这时候子物体被限制死,需要调整子物体就加element layout。


补充: 父物体加上Vertical Layout group,content size fitter(vertical fit 设置成为preferred size). 注意 ,子物体开始的时候就必须在父物体当中,他不不会动态的缩小父物体或者改变父物体的位置!!一定要子物体完全被父物体包容。

关于element layout

1.若一些图片或者非动态扩展的东西,若不想受排序影响,就需要加element layout然后将排序ignore。扩展的例如text ,加上element layout,将最大的宽度进行限制即可(一定要被父物体大小包容!!!)。

2. 整体父物体受content size fitter影响时,注意包容所有的子物体,否则在content中会造成排序重叠或者上下间距不等。 若多个子物体受排序影响,就每个子物体加个element layout进行微调(调试的Item需要添加content size fitte,放入有content size fitte的容器再删除)。



注意:1. 开始的时候布局一定要正确!!子物体的锚点特别是非扩展的组件的锚点和位置一定开始都包容在父物体中并且设置好!!!

2.注意最上层父物体包含content size fitter即可,但是其他父物体必须也有Vertical Layout group才会享受一样的动态增长(最底层的组件造成增长)。


最后子物体的动态增长方向,取决于父物体的中心点在哪里,在上面则向下扩展,在下面则向上扩展,和子物体的旋转点在哪无关!




Super ScrollView for UGUI提供基于UGUI ScrollRect的可轻松定制的ScrollView。它是一组C#脚本,可帮助您创建所需的ScrollView。这是非常强大的和高度优化的性能。 文件 Android演示应用程序 演示: - 聊天消息列表演示 - 水平画廊演示 - 垂直画廊演示 - GridView演示 - PageVew演示 - TreeVew演示 - 与稠粘头演示的TreeView - 旋转日期选择器 - 更改项目高度演示 - 下拉刷新演示 - 拉起来加载更多的演示 - 点击加载更多演示 - 选择并删除演示 - GridView删除项目演示 - 顶部到底部的演示 - 自下而上的演示 - 从左到右的演示 - 右侧演示 - 响应GridView演示 - TreeViewWithChildrenIndent演示 特征: - ListView和GridView和TreeView - 无限的项目 - 项目在不同的大小(高度/宽度) - 具有不同预制的物品 - 在初始时间大小未知的项目 - 垂直滚动视图(从上到下,从下到上) - 水平滚动视图(从左到右,从右到左) - 项目填充 - 滚动到指定的项目 - 滚动到具有偏移量的项目 - 项目计数在运行时更改 - 项目大小(高度/宽度)在运行时更改 - 物品捕捉到视口中的任何位置 - 项目循环,如微调 - 添加/删除项目 - 全部删除/删除所有项目 - 刷新并重新加载项目 - 使用池缓存项目,不要在运行时销毁项目 - 有效回收物品 - 平台无关 - UGUI支持 - 支持Unity平台(IOS / Android / Mac / PC / Console / Winphone / WebGL ...)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值