clipToBounds方法注意事项

View:clipToBounds(true/false)

clipToBounds的含义：子View是否在父View的边界内进行绘制，如果设置为true，则子View超出父View的部分会被切割，如果设置为false，则不会被切割。iOS端为了提升性能，clipToBounds默认为false，Android端clipToBounds默认为true。

如果两端UI显示不一致，可以检查下两端clipToBounds方法是否相同。

⚠️注意事项：

• Android端clipToBounds方法不仅能对子视图的父视图使用，还能对父视图的父视图使用，父视图的父视图会遍历子View，让所有子View都统一clipToBounds，iOS端只能对父视图使用，并且不会遍历子视图；

下面对上述注意事项举例说明。

1. clipToBounds在两端如何使用

1.1 父视图的父视图为非LinearLayout

子视图为subView1，subView1的父视图为fatherView1，fatherView1的父视图为fatherView(fatherView为非LinearLayout)，示例代码如下：

--- 父视图的父视图
local fatherView = View()
        :width(MeasurementType.MATCH_PARENT)
        :height(50)
        :marginTop(80)
        :bgColor(Color(0,0,0,0.3)) ---灰色区域
window:addView(fatherView)
--- 父视图
local fatherView1 = View()
        :width(200)
        :height(80)
        :marginLeft(50)
        :bgColor(Color(255,0,0,1)) --- 红色区域
fatherView:addView(fatherView1)
--- 子视图
local subView1 = View()
        :width(250)
        :height(100)
        :bgColor(Color(0,0,255,0.3)) --- 紫色区域
fatherView1:addView(subView1)  

---- Android端clipToBounds方法必须写在addView之后才生效，iOS则无限制
--fatherView:clipToBounds(false) 
--fatherView1:clipToBounds(true)    

运行结果如下：

其中，紫色区域为子视图subView1，红色区域为subView1的父视图fatherView1，灰色区域为fatherView1的父视图fatherView，Android端所有子视图都被切割了，iOS端未被切割。
上述代码中，设置fatherView:clipToBounds(false) 后，Android端会遍历fatherView的所有子视图，因此，fatherView不仅切割了fatherView1，fatherView1还切割了subView1。
保持两端一致的方法： 设置fatherView:clipToBounds(true)和fatherView1:clipToBounds(true)后两端都被切割，只设置fatherView:clipToBounds(false)后两端都不切割。

1.2 父视图的父视图为LinearLayout

LinearLayout作为父视图，不切割其子视图的子视图，例如，linear为父视图，bgView2为linear的子视图，subLabel为bgView2的子视图，代码如下：

--- 父视图的父视图linear
local linear = LinearLayout(LinearType.VERTICAL)
        :width(MeasurementType.MATCH_PARENT)
        :height(MeasurementType.WRAP_CONTENT)
        :marginTop(400)
        :bgColor(Color(0,0,0,0.3))
window:addView(linear)
--linear:clipToBounds(true)

--- 父视图bgView2
local bgView2 = View()
        :width(200)
        :height(100)
        :marginTop(10)
        :bgColor(Color(255,0,0,0.3))
        :setGravity(Gravity.CENTER)
linear:addView(bgView2)
--bgView2:clipToBounds(true)

--- 子视图subLabel
local subLabel = Label()
        :width(250)
        :height(150)
        :bgColor(Color(0,255,0,0.3))
        :text("测试view切割测试view切割测试view切割测试view切割测试view切割测试view切割测试view切割")
        :textColor(Color(0,0,0,1))
        :fontSize(20)
        :lines(0)
bgView2:addView(subLabel)  

运行后可以看出，android端linear只切割了其子视图bgView2，并没有切割bgView2的子视图subLabel。
保持两端一致的方案： 如果想要linear不切割subLabel，需要对linear的父视图window设置window:clipToBounds(false)；如果想要linear切割subLabel，需要对linear设置linear:clipToBounds(true)，由于iOS端并不会遍历子视图，所以还得设置bgView2:clipToBounds(true)，两端才能实现均切割子视图的目的。