ExMobi UI容器设计

此课程旨在帮助开发者了解ExMobi中UIXML标签的布局容器特征。UIXML分为顶级容器,绝对定位容器和普通布局容器。 在ExMobi的UIXML中,会用到很多布局,ExMobi中的容器都采用的是弹性盒子模型,其容器的大小默认会随着容器内的内容多少而伸缩。这节课我们以div这个布局容器,来帮助大家理解ExMobi的盒子模型。

课件下载

开始学习并下载课件
课程小节

  • 页面结构布局

    一个UIXML窗口页面会被顶级容器中的header、leftcontainer、body、rightcontainer和footer分割,这些容器所占的空间大小就是整个页面的大小。其中body是必须存在的,body的区域大小为其余容器所占空间在页面中剩余的部分。

  • 容器的盒子模型

    在容器里面最具代表性的就是div,这里我们就以div这个布局容器,来帮助大家理解ExMobi的盒子模型,div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记div,那么该标签的作用会变得更加有效。div是一个块级元素。这意味着它的内容自动地开始一个新行。

  • 容器大小像素计算

    在ExMobi里面,用dp代替了px, 这样可以让布局自动适应多种分辨率,dp单位是ExMobi所特有的,它是根据屏幕密度来计算最终多少像素点。

  • 容器内外间距样式

    ExMobi容器大小=外边距大小(padding) 内边距大小(margin) 边界线大小(border) 实际放置内容大小

  • header顶部容器布局

    header区域是固定在顶部的,可以设置高度,如果不设置高度是根据内部控件的高度自适应的,但是不建议在顶部区域放置太多内容,因为不支持滚动。当header标签不存在时候该区域消失。

  • footer底部容器布局

    footer区域是固定在底部的区域,和header区域一样可以设置高度,如果不设置高度是根据内部控件的高度自适应的

  • 左右侧容器布局

    leftcontainer是左侧容器,需要设置宽度,上下内容超出,会出现滚动条,一般左侧容器和右侧容器用在pad上居多,pad屏幕比较大,会大篇幅的使用左侧右侧容器。

  • 三大引擎混合布局

    前面介绍的都是基于ExMobi的UIXML原生组件的布局,由于现有的原生能力和UIXML封装的程度,不可能满足所有的布局场景。所以ExMobi也支持在UIXML中通过webview使用H5进行布局,以及对UIXML原生组件的扩展能力。开发者可以通过UIXML引擎、webview引擎和nativecomponent引擎进行混合布局。

培训建议

ExMobi中,UIXMLCSS样式和标准的HTML在布局上是有一些区别的,如果不加任何样式的控制UIXMLHTML一样,在div容器布局上都采用垂直方向上排列盒子。

对应HTML如果想让div具有弹性,需设置拥有子盒子的盒子的display的属性值为box(或inline-box)。

对于UIXML如果想让div在一行显示,只需要对div的宽度进行百分比设置,多个div的宽度加起来小于等于100%,即可实现一行显示。

建议开发者可以将UIXMLHTML自己做一个对比,帮助消化。

知识体系

课程信息

  •   课程难度: 初级
  •   课程时长: 60分钟
  •   学习人数: 185
未学习

前置课程