Unity UI表格布局组件+滑动组件组合使用

这篇具有很好参考价值的文章主要介绍了Unity UI表格布局组件+滑动组件组合使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

组件介绍:

Grid Layout Group:表格(网格)布局组件,可以让数据按表格的形式排列。

Padding:控制所有子物体的整体的外边距。

Cell Size:子物体尺寸;

Spacing:子物体之间的间距;

Start Corner:子物体开始的角度位置;

Start Axis:子物体开始的轴向;

Child Alignment:子物体对其方式;

Constraint:约束方式,灵活--灵活列数--灵活行数;

ScrollRect:滑动组件

Content:ScrollRect 控制的数据区域;

Horizontal:控制数据是否可以横向拖动;

Vertical:控制数据是否可以纵向拖动;

Movement Type:三种运动类型;[不限制 -- 弹性 -- 不动]

Mask遮罩组件:

  Unity UI表格布局组件+滑动组件组合使用
Unity UI表格布局组件+滑动组件组合使用

 勾选Show Mask Graphic则子物体 只会显示 当前物体大小区域的内容;

取消勾选则不显示 当前物体的内容 与 子物体超出范围的内容。

Unity UI表格布局组件+滑动组件组合使用

可滑动背包Demo:

层级结构:
Image + ScrollRect + Mask [背景图片,滑动组件,区域遮罩]
---Grid Layout Group [表格布局组件]
---Item [N 个同级别的子物体]

Unity UI表格布局组件+滑动组件组合使用

 ①先创建一个名为BG的Image为背景,在Image上添加ScrollRect滑动组件,再添加一个Mask遮罩组件

Unity UI表格布局组件+滑动组件组合使用

②创建一个名为Grid的空物体作为容器,添加Grid Layout Group表格布局组件,添加Content Size Fitter组件自动控制UI的滑动范围的宽高(因为当前是上下滑动,所以设置Vertical Fit垂直属性为Preferred Size);

Unity UI表格布局组件+滑动组件组合使用

 ③将Grid整个物体拖拽到Grid Layout Group组件的Content数据控制区域完成绑定,并取消勾选Horizontal,将不支持水平拖动功能,只可以垂直拖动。

Unity UI表格布局组件+滑动组件组合使用

 Unity UI表格布局组件+滑动组件组合使用Unity UI表格布局组件+滑动组件组合使用

 ④如果想让子物体从上往下,从左到右的顺序依次出现,则可以修改Grid容器的九宫定位为top的其中一个布局并调整Pivot锚点即可。

Horizontal Layout Group:横向布局组件

Vertical Layout Group:纵向布局组件

表格布局组件是功能最全的一个布局组件,可以实现表格,横向,纵向布局;

而横向布局组件可以理解成是表格布局组件功能的一部分。

横向布局组件与纵向布局组件的属性完全一样。

属性:

Child Controls Size:子物体的大小。

|---勾选 Width:自动缩放所有子物体的宽度,让子物体横向占满空间.

|---勾选 Height:自动缩放所有子物体的高度,让子物体竖向占满空间.

Child Force Expand:子物体的扩展。

如果要使用上方的“子物体的大小”属性,这里的属性必须勾选。

上方的属性依赖该属性。

可滑动背包Demo2:

与表格布局的做法完全一致就不细说了,直接上图看设置吧。

Horizontal Layout Group:横向布局组件

Unity UI表格布局组件+滑动组件组合使用

 Unity UI表格布局组件+滑动组件组合使用

 文章来源地址https://www.toymoban.com/news/detail-441717.html

Vertical Layout Group:纵向布局组件

Unity UI表格布局组件+滑动组件组合使用
Unity UI表格布局组件+滑动组件组合使用

 

到了这里,关于Unity UI表格布局组件+滑动组件组合使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue使用element-ui/plus组件布局容器container失效解决方法

    这个错我遇到了好几次,每一次都花了很长时间解决,还是决定写个笔记记录一下。 在使用elementu官网的布局容器时,他是这样的。 我在确定elementui引入正确的情况下是这样写的。 注意,我在SideNav,Header,Main,Footer组件套了el-aside,el-header... 然后暴露出来在Home中引用。 当然错

    2024年02月11日
    浏览(48)
  • Compose 自定义 - 数据转UI的三阶段(组合、布局、绘制)

    Compose 通过三个阶段把数据转化为UI:组合(要显示什么)、布局(要显示在哪里)、绘制(如何渲染)。 组合阶段 Compisition 界面首次渲染时会将可组合函数转化为一个个布局节点 Layout Node, 使用多叉树的数据结构构建一个UI树。 布局阶段 Layout 多叉树中父节点会测量他们的子

    2024年02月20日
    浏览(39)
  • Vue中使用Element UI的Table组件实现嵌套表格(最简单示例)

    以下是一个简单的示例代码,演示如何在Vue中使用Element UI的Table组件实现嵌套表格: 上面的代码通过type=\\\"expand\\\"设置了一个展开按钮,点击该按钮会显示与当前行关联的子表格内容。 在上面的示例中,我们定义了一个包含姓名和年龄的主表格,以及一个展开列用于显示与每行

    2024年02月02日
    浏览(76)
  • HarmonyOS应用开发学习笔记 UI布局学习 创建轮播(Swiper) artTS 轮播组件 简单使用

    官方文档 Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件,当设置了多个子组件后,可以对这些子组件进行轮播显示。通常,在一些应用首页显示推荐的内容时,需要用到轮播显示的能力。 loop 控制是否循环 this.swiperController.showNext(); // 通过controller切换到后一页

    2024年02月02日
    浏览(83)
  • Element-UI实现的下拉搜索树组件(el-select、el-input、el-tree组合使用)

    1、子组件封装 注意使用:正常使用 // 子组件使用 父组件调用

    2024年02月11日
    浏览(87)
  • vue3 组合式 ant.design组件Table嵌套表格,从后端获取数据并动态渲染

    在根据官方文档使用ant.design中的嵌套表格时,发现官方文档很多地方都不够详细。在过程中踩了不少坑,例如: 子表如何获取父表的数据? 如何获取子表的行索引? 如何让子表的数据源来自父表该行的数据? 总之,最后还是磕磕绊绊做完了功能,于是第一时间把代码整理

    2024年02月15日
    浏览(46)
  • 第四十四章 Unity 滑动条 (Slider) UI

    本章节我们介绍滑动条 (Slider),它允许用户通过拖动鼠标从预定范围中选择数值。首先,我们点击菜单栏“GameObject”-“UI”-“Slider”,调整其位置,最终效果如下   我们发现滑动条 (Slider)下面有三个子游戏对象Background,Fill Area和Handle Slide Area。他们分别代表了横条背景,以

    2024年02月13日
    浏览(85)
  • vant UI 轮播组件swiper 滑动时触发click点击事件

    问题描述:  如图 我是用轮播图做了一个答题卡分页 但是 出现了 滑动轮播图时自动触发了数字点击的事件 解决办法: 1.在van-swipe标签添加 lazy-render属性,实现图片懒加载,懒加载模式下,只会渲染当前页和下一页。 2..在van-swipe标签添加 :stop-propagation=\\\"false\\\" 属性,阻止滑动

    2024年02月07日
    浏览(46)
  • Unity UI自动拓展布局

    首先文字自动拓展很简单,只需要在Text物体里增加个ContentSizeFItter组件,选择你需要的拓展方式(横向和纵向)将其选择 PreferredSize 选项就可以了。 那么再往上,如果需要文字拓展带动上层拓展的话,就需要在文字父物体上加上两个组件,第一个是 LayoutGroup 组件,这个组件

    2024年02月06日
    浏览(62)
  • Unity开发使用DOTween插件实现ui组件慢慢消失和慢慢出现

    有时候做游戏提示的话,需要一个慢慢出现慢慢消失的效果,Unity开发使用DOTween插件实现ui组件慢慢消失和慢慢出现非常的方便。 做一个简单的小笔记,也分享在csdn上,直接上步骤 这里需要导入DOTween插件(简单提一嘴)。  注意点来了,提示Text文本依托一个image做为父类(这

    2024年02月12日
    浏览(82)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包