Lua基础布局简介 Step1

写在前面

Lua对业务UI的重构中，主要布局方式分为基本布局方式和线性布局方式。针对以上两种布局做简单介绍。

基本布局-margin

概念定义：外边距，给子View相对父View的偏移量给出设定。

适用场景：以父View左上为原点，相对于父View的偏移量，常用于子View接近父View左上的情况。

常用方法：View marginLeft(number value)、View marginRight(number value)、View marginTop(number value)、View marginBottom(number value)。

示例运用：头像imageView（头像）相对于整个contentView（深蓝）的左侧设定绝对位置marginLeft(10)。

copy下面代码，运行试试

contentView = View()
contentView:bgColor(Color(34,66,121,1)):width(MeasurementType.MATCH_PARENT):height(88):marginTop(100)
window:addView(contentView)

imageView = ImageView():width(70):height(70):setGravity(Gravity.CENTER_VERTICAL):cornerRadius(35):marginLeft(10)
imageView:setImageUrl("http://www.qq22.com.cn/uploads/allimg/201609071046/ldxdoeundzf118556.jpg")
contentView:addView(imageView)

基本布局-padding

概念定义：内边距，父View给自己设定内边距，子View布局时的偏移量累加父View内边距设定距离。

适用场景：常用于想让父View四周与子View有一定的间距。

常用方法：View padding(number top, number right, number bottom, number left)

示例运用：个人信息infoView（浅绿）相对于内部子View设置内间距padding(3,8,3,8)。

copy下面代码，运行试试

infoView = LinearLayout(LinearType.VERTICAL)
infoView:bgColor(Color(255,252,153,0.5)):width(MeasurementType.MATCH_PARENT):height(70):setGravity(MBit:bor(Gravity.CENTER_VERTICAL, Gravity.RIGHT)):marginRight(8):padding(3,8,3,8):marginLeft(98)
contentView:addView(infoView)

有padding设置和无paddding设置对比

基本布局-Gravity

概念定义：重力位置/吸附样式，每个View默认重力在左上，可设置改变子View的重力或悬浮位置。

适用场景：常用于使子View相对于父View悬停在一个不好通过左上重力计算偏移量的位置或居中的自适应位置。

常用方法：setGravity(MBit:bor(Gravity.CENTER_VERTICAL/CENTER_HORIZONTAL, Gravity.RIGHT/LEFT/TOP/BOTTOM))

示例运用：时间距离标签disTimeLb相对于nameTimeView（浅棕）设置了纵向居中悬浮，重力右侧。

copy下面代码，运行试试

nameTimeView = View()
nameTimeView:bgColor(Color(94,87,46,70)):width(MeasurementType.MATCH_PARENT):marginTop(5)
infoView:addView(nameTimeView)

nameLabel = Label()
nameLabel:text("我是一头蒜"):marginLeft(5):setGravity(Gravity.CENTER_VERTICAL)
nameTimeView:addView(nameLabel)

disTimeLb = Label()
disTimeLb:text("1.02km·3分钟前"):setGravity(MBit:bor(Gravity.CENTER_VERTICAL,Gravity.RIGHT)):fontSize(12)
nameTimeView:addView(disTimeLb)

基本布局-Gravity margin组合

• Lua的margin偏移量设置与Gravity位置有关。

• 子视图的默认重力在左上位置，此时偏移量只有marginLeft、marginTop的设置是生效的，marginRight、marginBottom设置无效（低优先级）。

• 当设定重力在右下，setGravity(MBit:bor(Gravity.Bottom, Gravity.RIGHT))，此时marginRight、marginBottom设置生效。

• 当设置重力为横、纵向居中时，此时Top、Bottom、Left、Right的设置均生效。

• 纵向居中时，marginTop(-10)表示中心位置向下偏移10；同理横向居中时的marginLeft(-10)表示向右偏移10。

如图，各个位置的绿色子视图相对于蓝色父视图Gravity和可设定的margin偏移方向如图

线性布局

概念定义：一种更优的布局方式。

适用场景：Lua的业务重构推荐优先使用线性布局。线性布局可以保证不同屏幕尺寸的动态适配，优化性能，简化偏移量的计算。

布局种类：HORIZONTAL（横向）、VERTICAL（纵向）

示例运用：存放便签的baseLabelView（砖红）为横向线性布局View，星座标签starLb相对于年龄标签ageLb偏移量为8 marginLeft(8)。

copy下面代码，运行试试

baseLabelView = LinearLayout(LinearType.HORIZONTAL)
baseLabelView:bgColor(Color(95,78,79,18)):width(MeasurementType.MATCH_PARENT):height(15):marginTop(8)
infoView:addView(baseLabelView)

ageLb = Label()
ageLb:bgColor(Color(172,13,56,1)):width(35):height(12):setGravity(Gravity.CENTER_VERTICAL):text("26岁"):fontSize(10):cornerRadius(8):textAlign(TextAlign.CENTER)
baseLabelView:addView(ageLb)

starLb = Label()
starLb:bgColor(Color(28,80,199,18)):width(35):height(12):setGravity(Gravity.CENTER_VERTICAL):text("白羊座"):fontSize(10):cornerRadius(8):marginLeft(8):textAlign(TextAlign.CENTER)
baseLabelView:addView(starLb)

线性布局-priority

概念定义：线性布局中各子View的宽度计算一般都是默认由左向右根据内容撑起，但当出现多个子View填充导致位置不够用时，priority属性可以针对性的提升子View优先级，优先填充级别高的View，再对其他低级别View填充。

适用场景：常用于后添加视图需优先布局的情况。

示例运用：三个Label，ageLb、starLb、workLb，其中starLb的priority属性为2，workLb的priority属性为1，ageLb为默认0。ageLb由于优先级别最低。所以优先填充其他两个Label，ageLb省略显示。

copy下面代码，运行试试

ageLb = Label()
ageLb:bgColor(Color(172,13,56,1)):height(12):setGravity(Gravity.CENTER_VERTICAL):text("26岁26岁26岁26岁26岁"):fontSize(10):cornerRadius(8):textAlign(TextAlign.CENTER)
baseLabelView:addView(ageLb)

starLb = Label()
starLb:bgColor(Color(28,80,199,18)):priority(2):height(12):setGravity(Gravity.CENTER_VERTICAL):text("白羊座白羊座白羊座"):fontSize(10):cornerRadius(8):marginLeft(8):textAlign(TextAlign.CENTER)
baseLabelView:addView(starLb)

workLb = Label()
workLb:bgColor(Color(128,8,19,180)):priority(1):height(12):setGravity(Gravity.CENTER_VERTICAL):text("互联网互联网互联网"):fontSize(10):cornerRadius(8):marginLeft(8):textAlign(TextAlign.CENTER)
baseLabelView:addView(workLb)

线性布局-weight

概念定义：视图计算百分比，即权重。默认为0。当子视图A、B、C的Weight为1、2、3时，则A占容器的1/6，B占容器的2/6，C占容器的3/6。

适用场景：希望按照百分比布局视图时使用。

copy下面代码，运行试试

baseLabelView = LinearLayout(LinearType.HORIZONTAL):height(100):bgColor(Color(220, 220, 220, 1)):marginTop(100)
ageLb = Label()
ageLb:bgColor(Color(172, 13, 56, 1)):weight(1):height(12):setGravity(Gravity.CENTER_VERTICAL):text("26岁26岁26岁26岁26岁"):fontSize(10):cornerRadius(8):textAlign(TextAlign.CENTER)
baseLabelView:addView(ageLb)

starLb = Label()
starLb:bgColor(Color(28, 80, 199, 18)):weight(2):height(12):setGravity(Gravity.CENTER_VERTICAL):text("白羊座白羊座白羊座"):fontSize(10):cornerRadius(8):marginLeft(8):textAlign(TextAlign.CENTER)
baseLabelView:addView(starLb)

workLb = Label()
workLb:bgColor(Color(128, 8, 19, 180)):weight(3):height(12):setGravity(Gravity.CENTER_VERTICAL):text("互联网互联网互联网"):fontSize(10):cornerRadius(8):marginLeft(8):textAlign(TextAlign.CENTER)
baseLabelView:addView(workLb)
window:addView(baseLabelView)

线性布局-注意事项

• 当视图为横向线性布局时，所有横向的Gravity设置均不生效，如重力横向居中、重力设定为右侧均无效，纵向的重力设定不受任何影响。纵向线性布局同理，纵向的重力设定无效，横向重力设定无影响。

• 线性布局中，所有margin设定均是当前View距离前一元素（左边或上边）的偏移量，与Gravity没有任何关系。