(9)UI(容器)
1.基础容器

基础容器可以设置子容器布局、是否裁切子元素、填充颜色、背景图片资源等属性。
使用场景。
在官方示例中,大量使用了基础容器作布局管理,如下面的主界面中,用户名称,钻石和金币就使用了基础容器,以保证相对布局的统一:

场景1:如果不显示容器外的内容。
当容器上的控件有超出容器的部分时,可以通过属性“裁切内容”使超出部分将被隐藏,不予显示。
场景2:设置容器的背景填充和填充效果。
您可以为基础容器填充两种类型的背景色:纯色背景、渐变背景。您可以选择单色并设置背景的不透明度;当您选择渐变背景时,需要设置起始颜色和结束颜色,并且可以为这两个颜色分别设置不透明度。

场景3:快速添加子控件。
在画布中选中控件后右键,您可以添加所有类型控件作为他的子控件。

2.列表容器

列表容器是一个能够自动排列控件的容器。
注意:当一个控件被添加到列表容器后,它的坐标将无法修改。
使用场景。
列表容器常被用于游戏中关卡列表等具有列表效果的场景中。

场景1:如果不显示容器外的内容。
当容器上的控件有超出容器的部分时,可以通过属性“裁切内容”使超出部分将被隐藏,不予显示。
场景2:自定义列表容器显示方式。
列表容器实现列表效果只需要为列表容器添加子控件,通过设置列表滚动方向、子控件对齐方式、子控件间隔等属性可以决定列表容器对子控件布局的影响从而实现横向或纵向滚动的列表。
3.翻页容器

翻页容器是一个具有翻页效果的容器,只能添加基础容器。
使用场景。
翻页容器常被用于游戏中背包等具有翻页效果的场景中,在官方示例中,我们就在选择关卡界面,应用了翻页容器,来切换不同的关卡。

场景1:如果不显示容器外的内容。
当容器上的控件有超出容器的部分时,可以通过属性“裁切内容”使超出部分将被隐藏,不予显示。如上图,我们勾选属性后,效果如下:

场景2:如何添加翻页效果。
翻页容器实现翻页效果实际上是为其添加基础容器子控件,然后在子控件中设置内容,最后在实际运行中,翻页容器会自动将自己与子控件统一使用。要添加子控件,你在画布中选中控件后右键进行添加,或者手动将基础容器作为翻页容器的子控件,值得注意的是您只能添加基础容器作为他的子控件。
当一个控件被添加到滚动容器后,它的坐标、缩放、旋转、锚点、尺寸都会恢复默认并无法修改,也无法修改这个控件的布局方式。
4.滚动容器

滚动容器可以实现触屏上的滚动效果,能够设置滚动区域、滚动方向等属性。
使用场景。
在官方示例中,我们特意在任务选择界面(MissionSelect.csd)中,设置了滚动层容易,用来表示关卡的地图背景。我们将关卡背景设置为3个屏幕高度大小,实际运行中,用户可以上下滑动屏幕来查看整张地图。

场景1:如果不显示容器外的内容。
当容器上的控件有超出容器的部分时,可以通过属性“裁切内容”使超出部分将被隐藏,不予显示。如上图,我们勾选属性后,效果如下:

场景2:如何设置滚动容器的可滚动尺寸。

在使用滚动容器时A为滚动容器的尺寸,当设置滚动容器为裁切时,A以外的区域即B区域将不予显示,但B区域的内容可以通过滚动到A区域展示出来,内容尺寸是指所有通过滚动展示的内容,即B与A的范围,图中的文本有一部分在滚动内容外这部分即使通过滚动也无法展示。滚动内容尺寸不能比容器尺寸小。
您可以在这里选择需要的容器滚动方向:水平、垂直、水平与垂直。

场景3:如何设置回弹效果。
当滚动容器滑至屏幕边界时,继续滑动,界面会有一个反弹效果。为达到这一效果,您只需要勾选滚动容器控件的属性“回弹效果”,系统就会为您在游戏中实现这个效果。
(9)UI(容器)的更多相关文章
- 基于Unity·UGUI实现的RecycleList循环列表UI容器
在UI功能开发实践中,列表UI容器是我们经常使用一种UI容器组件.这种组件就根据输入的数据集合生成对应数据项目.从显示的方向来说,一般就分为水平排布和垂直排布的列表容器两种.列表容器为了在有限的界面空 ...
- 微信小程序 | 51,live新课“小程序UI容器组件”的课堂计划
零基础前端自学入门:小程序UI容器组件 这是一节以UI布局.容器组件的使用为主题的live,专注于布局与容器这一个点,努力把这一点讲透.这是继4月22日整体入门live“零基础周末学习小程序开发”之后 ...
- Activity中UI框架基本概念
Activity中UI框架基本概念 Activity 是应用程序的基本组成部分,提供了可视的界面,UI容器, 与用户进行交互: 具体Acitivity是怎么样显示这些事视图元素以及响应事件交互的. 一 ...
- WPF中实现自定义虚拟容器(实现VirtualizingPanel)
WPF中实现自定义虚拟容器(实现VirtualizingPanel) 在WPF应用程序开发过程中,大数据量的数据展现通常都要考虑性能问题.有下面一种常见的情况:原始数据源数据量很大,但是某一时刻数据容 ...
- 自动化测试 | UI Automator 进阶指南
UI Automator 相关介绍: 跨应用的用户界面自动化测试 包含在 AndroidX Test(https://developer.android.com/training/testing) 中 ...
- Epic Games工程师分享:如何在移动平台上做UE4的UI优化?
转自:https://blog.csdn.net/debugconsole/article/details/79281290 随着技术的不断升级,高性能的引擎逐渐受到越来越多研发商的青睐,UE4就是其 ...
- wpf企业应用之UI模块解耦
关于UI模块的解耦,说简单点,首先需要配置菜单与对应操作类的映射关系(或存放于配置文件,或继承接口直接写死在模块代码中,或存放到数据库,原理都一样),然后在菜单加载时,读取配置项动态生成菜单或是其他控 ...
- android利用apkplug框架实现主应用与插件通讯(传递随意对象)实现UI替换
时光匆匆,乍一看已半年过去了,经过这半年的埋头苦干今天最终有满血复活了. 利用apkplug框架实现动态替换宿主Activity中的UI元素.以达到不用更新应用就能够更换UI样式的目的. 先看效果图: ...
- WPF之路——实现自定义虚拟容器(实现VirtualizingPanel)
原文:WPF之路--实现自定义虚拟容器(实现VirtualizingPanel) 源码下载地址: http://download.csdn.net/detail/qianshen88/6618033 ...
- 基于 SailingEase WinForm Framework 开发客户端程序(3:实现菜单/工具栏按钮的解耦及状态控制)
本系列文章将详细阐述客户端应用程序的设计理念,实现方法. 本系列文章以 SailingEase WinForm Framework 为基础进行设计并实现,但其中的设计理念及方法,亦适用于任何类型的客 ...
随机推荐
- Maven(一)简介和基本安装使用
简介 如今用于项目管理和自动化构建的东东用的比较多的,比如: eclipse中用到的ant 现今流行的android studio中用到的gradle 这里将介绍另一种工具——maven (也可以用来 ...
- php 接收表单 方法的区别
在php中用于接收表单数据的方法有$_REQUEST.$_POST和$_GET.他们作用都是类似的,下面来看一下他们的区别. 一.$_REQUEST能够用于接收post与get方法提交的数据,但是$_ ...
- 【niubi-job——一个分布式的任务调度框架】----框架设计原理以及实现
引言 niubi-job的框架设计是非常简单实用的一套设计,去掉了很多其它调度框架中,锦上添花但并非必须的组件,例如MQ消息通讯组件(kafka等).它的框架设计核心思想是,让每一个jar包可以相对之 ...
- Linq 中查询一个表中指定的字段
//Linq中查询一个表中指定的几个字段: ); // FindAllItems()为查询对应表的所有数据的方法: // Where 里面为查询条件 // Select 为查询的筛选条件 new{} ...
- SequoiaDB 系列之二 :SequoiaDB的简单CRUD操作
上一篇通过一系列的操作,终于把SequoiaDB的集群部署到单台机器上了. 建议去安装体验一下吧. 在整个环境的部署的体验来看,并没有MongoDB的部署简单,但是比MongoDB的部署要清晰.Mon ...
- iOS--隐藏和显示TabBar的方法
1.隐藏TabBar: - (void)hideTabBar { if (self.tabBarController.tabBar.hidden == YES) { return; } UIView ...
- 自定义EL
1.建一个类 package com.zh.util; public class GetInFo { public static String eval(String infix){ //注意的是这里 ...
- u1-nav-html
<header id="masthead" class="masthead" role="banner"> <nav cl ...
- OC基础--构造方法
OC语言中类的构造方法学了两种: 一.方法一:[类名 new] 例:[Person new] 缺点:可扩展性不强,假如在Person类中有_age 成员变量,在初始化时想让_age 中的值为20,ne ...
- 知道了grunt怎么用了
第一步: //如何安装指定grunt的插件,安装后自动在当前cmd目录下新建node_modules文件夹,文件夹里面包含了下载完成的插件 npm install <module> - ...