专栏名称: UI头条
原iconfans,UI中国-专业界面交互设计平台的官方账号。官方消息发布,分享优秀设计文章,UI招聘相关信息,行业消息,服务UI设计师群体!
目录
相关文章推荐
51好读  ›  专栏  ›  UI头条

UI的骨骼 章节一•盒式模型

UI头条  · 公众号  ·  · 2017-08-22 17:53

正文

请到「今天看啥」查看全文



盒子通过布局属性来控制内容的显示效果,每种布局容器都有自己的布局属性,其中有一部分是相同的,先来讲讲这些通用的布局属性。




上图是android平台的盒式模型图(与标准 w3c 盒式模型有差异),一共有10个通用的布局属性。


height(盒子高度):
盒子的高度=内容区高度+顶部内间距+底部内间距。可以设置为具体数值、与内容高度一致(动态)或与父容器高度一致(动态)。

width(盒子宽度):
盒子的宽度=内容区宽度+左侧内间距+右侧内间距。可以设置为具体数值、与内容宽度一致(动态)或与父容器宽度一致(动态)。

padding-top(顶部内间距):
盒子内的顶部隔离区,内容无法显示在此区内。属于盒子高度的一部分,只能设置为“具体数值”。

padding-bottom(底部内间距):
盒子内的底部隔离区,内容无法显示在此区内。属于盒子高度的一部分,只能设置为“具体数值”。

padding-left(左侧内间距):
盒子内的左侧隔离区,内容无法显示在此区内。属于盒子宽度的一部分,只能设置为“具体数值”。

padding-right(右侧内间距):
盒子内的右侧隔离区,内容无法显示在此区内。属于盒子宽度的一部分,只能设置为“具体数值”。

margin-top(顶部外间距):
盒子外的顶部隔离区,使盒子的上边界与相邻盒子保持固定的距离。属于盒子实占区的一部分,只能设置为“具体数值”。

margin-bottom(底部外间距):
盒子外的底部隔离区,使盒子的下边界与相邻盒子保持固定的距离。属于盒子实占区的一部分,只能设置为“具体数值”。

margin-left(左侧外间距):
盒子外的左侧隔离区,使盒子的左边界与相邻盒子保持固定的距离。属于盒子实占区的一部分,只能设置为“具体数值”。

margin-right(右侧外间距):
盒子外的右侧隔离区,使盒子的左边界与相邻盒子保持固定的距离。属于盒子实占区的一部分,只能设置为“具体数值”。

在10个属性的定义中,还提到了两个名词:内容区与实占区。

内容区:
盒子内实际可显示内容的区域,高度=盒子高度-顶部内间距-底部内间距,宽度=盒子宽度-左侧内间距-右侧内间距。

实占区:
盒子实际占用父容器的区域,高度=盒子高度+顶部外间距+底部外间距,宽度=盒子宽度+左侧外间距+右侧外间距。

看到这么多类似的定义,估计已经有人晕了。我用快递盒做了个模型,可以更直观地表现每个布局属性的含义。




灵活地组合这些布局属性,可以做出多种多样的布局结构,另外高度和宽度可以设置动态参数,布局就拥有了一定的“自适应”能力,但只使用这些通用布局属性还远不能满足设计排版的需求,还需要更多的布局属性来支持。



两种经典的布局容器


到目前为止,在android平台中一共有6类布局容器:
LinearLayout

RelativeLayout

FrameLayout

GridLayout(TableLayout)

AbsoluteLayout

ConstraintLayout

LinearLayout(线性布局)与RelativeLayout(相对布局)目前应用最多,先来看看LinearLayout。

LinearLayout:
放置于LinearLayout中的组件会横向或者纵向依次排列。

看下图,界面上部分展示了LinearLayout纵向排列的布局效果,下部分展示了LinearLayout横向排列的布局效果。







请到「今天看啥」查看全文


推荐文章
药圈网  ·  药学人员必学:湿疹
7 年前
静塾文化  ·  “道歉”真正的意义是什么?
7 年前
箫念念  ·  “仅对你可见”
7 年前