egret.eui皮肤与组件(2)

* 使用egret EUI扩展库使用

1. 自定义组合组件(Button和ProgressBar)的制作:

* 需要EUI自带Button和ProgressBar皮肤

* Button组件由三个子组件构成: image, label(labelDisplay), image(iconDisplay)

* ProgressBar由三个子组件构成: image(track) 轨道, image(thumb) 滑块, label(labelDisplay) 文字

* 按照EUI自带Button和ProgressBar皮肤结构写自定义皮肤(如ButtonType1Skin.exml和ProgressBarType1.exml)

* 在需要使用自定义Button和Progress的皮肤上先引入EUI自带Button和ProgressBar皮肤组件, 把该组件使用的皮肤设置为对应的自定义皮肤ButtonType1Skin.exml或ProgressBarType1.exml

* Button组件对应三种状态(states=up, down, disabled), ButtonType1Skin.exml在设计模式中分别创建三种状态, 并修改对应ui

* ProgressBar组件需要注意皮肤初始的thumb宽度会被默认为100%进度, 因此thumb宽度需要拉宽至期望设计的100%宽度处

2. 布局

* 常见的Group, List和ViewStack都支持自定义布局

使用布局可以方便的控制无法固定长或宽的元素排列, 一种Group布局常见使用如下

而list常使用的有HorizontalLayout, VerticalLayout

3. 子组件分组

一个皮肤上可以同时包含很多子组件, 为了使层次和规则清晰, 可以将功能相近或逻辑上有关联的子组件划分为一组并用Group包裹起来

======================================================================================

当皮肤上子组件较多,而且某些子组件功能与其他逻辑上可以独立的话, 可以考虑使用多个皮肤

egret.eui皮肤与组件(2)相关推荐

Egret eui.TextInput组件输入后未清掉焦点，微信浏览器切换后台再切回，点击会一直唤醒输入法的Bug
如题,碰到的情况呢,是egret发布为HTML5,在点击eui.TextInput组件进行输入时,如果切换到后台,再切回后,除非再点击其他eui.TextInput组件,不然点击屏幕其他地方,都会不停 ...
Egret eui.Scroller扩展
支持任意位置索引的增加和删除支持移动到顶部,底部以及任意索引位置支持官方eui.Scroller item填不满可视视图不能滑动的问题新增支持下拉刷新只会显示可视区域item以及缓冲item, ...
Html5 Egret游戏开发成语大挑战（六）游戏界面构建和设计
Html5 Egret游戏开发成语大挑战(六)游戏界面构建和设计本篇将主要讲解游戏界面的构建和设计,会应用到egret.eui的自定义组件,可以很直观的构建一个游戏整体,这里我们仍然只需要使用Eg ...
Egret 生成自带EUI 的微信小游戏踩坑！
1. 首先,再次被网上一大堆屎一样的资料搞得浪费了我一天时间.各种坑. 2. 本文先讲一种正确的方式,然后再列举坑. 去www.egret.com下载最新的引擎,我的最新版本是5.2.2. 然后就会被 ...
Html5 Egret游戏开发成语大挑战（二）干净的eui项目和资源准备
Html5 Egret游戏开发成语大挑战(二)干净的eui项目和资源准备现在我们使用egret来起步开发一个名叫<成语大挑战>的小游戏,关于egret的开发环境就不在这里啰嗦了,直接去 ...
EUI库 - EXML
EXML是可以运行时加载解析的 <e:Skin class="skins.ButtonSkin" states="up,down,disabled" ...
手把手教你架构3d游戏引擎pdf_白鹭引擎团队即将发布 Egret Pro，并公布后续路线图...
各位开发者好. 春节前,白鹭引擎团队发布了 Egret3D 1.4,引入了大量新特性.上周,白鹭引擎团队发布了 5.2.14 版本,修复了多个白鹭引擎2D渲染器相关的 BUG,接下来我们会在下周继续发 ...
八 EUI高级制作 ① 初认识
简介 EUI是一套基于Egret核心显示列表的扩展库,它封装带大量的UI常用组件,可以实现快速的需要. EUI扩展类图开始新建一个项目可视化编辑器(EXML文件) Egret Wing里面提供了 ...
egret 吸附_egret-ui-editor
Egret UI Editor 简介 Egret UI Editor是一款独立的UI编辑器,其主要功能是针对 Egret 项目中的 Exml 皮肤文件进行可视化编辑. 其与您看到的大多数编辑器一样,左 ...

egret.eui皮肤与组件(2)

egret.eui皮肤与组件(2)相关推荐

最新文章

热门文章