正文
盒子通过布局属性来控制内容的显示效果,每种布局容器都有自己的布局属性,其中有一部分是相同的,先来讲讲这些通用的布局属性。
上图是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横向排列的布局效果。