[关闭]
@TryLoveCatch 2017-03-30T17:16:28.000000Z 字数 6652 阅读 3353

clipChildren的用法

android clipChildren

clipChildren这个属性，一直不怎么理解，所以，写了一个demo来简单试试这个属性，我们先来看官网的定义

Defines whether a child is limited to draw inside of its bounds or not. This is useful with animations that scale the size of the children to more than 100% for instance. In such a case, this property should be set to false to allow the children to draw outside of their bounds. The default value of this property is true.

clipChildren常见的用法就是，ViewPage实现画廊、QQ的拖拽红点清空未读提示、底部工具栏中间ICON稍微偏大等场景。下面通过几个例子，来验证它的作用。

测试零

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.         xmlns:android="http://schemas.android.com/apk/res/android"
  4.         android:id="@+id/activity_main"
  5.         android:layout_width="400dip"
  6.         android:layout_height="400dip"
  7.         android:background="#cc000000"
  8.         android:clipChildren="false">
  9.         <Button
  10.             android:id="@+id/btn"
  11.             android:layout_width="wrap_content"
  12.             android:layout_height="500dip"
  13.             android:text="哈哈哈哈"/>
  14. </LinearLayout>

效果如下：

结论：
我们在根布局添加了android:clipChildren="false"，但是却没有起作用。

测试一

  1. <LinearLayout
  2.         xmlns:android="http://schemas.android.com/apk/res/android"
  3.         android:id="@+id/activity_main"
  4.         android:layout_width="match_parent"
  5.         android:layout_height="match_parent"
  6.         android:background="#cc000000"
  7.         android:clipChildren="false">
  8.         <LinearLayout
  9.         android:layout_width="200dip"
  10.         android:layout_height="200dip"
  11.         android:background="#cceeee11"
  12.         >
  13.         <Button
  14.             android:id="@+id/btn"
  15.             android:layout_width="wrap_content"
  16.             android:layout_height="300dip"
  17.             android:text="哈哈哈哈"/>
  18.         </LinearLayout>
  19. </LinearLayout>

效果如下：

结论：
达到了预期，也就是说，必须在View外面再包一层ViewGroup，是不是可以理解为android:clipChildren="false"针对的是ViewGroup的？

测试二

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.         xmlns:android="http://schemas.android.com/apk/res/android"
  4.         android:id="@+id/activity_main"
  5.         android:layout_width="400dip"
  6.         android:layout_height="400dip"
  7.         android:background="#cc000000"
  8.         android:clipChildren="false">
  9.         <LinearLayout
  10.         android:layout_width="200dip"
  11.         android:layout_height="200dip"
  12.         android:background="#cceeee11"
  13.         >
  14.         <Button
  15.             android:id="@+id/btn"
  16.             android:layout_width="wrap_content"
  17.             android:layout_height="500dip"
  18.             android:text="哈哈哈哈"/>
  19.         </LinearLayout>
  20. </LinearLayout>

效果如下：

结论：

测试一里面根布局我们设置的是match_parent，这次我们将根布局设置了400dip的高度，然后，Button没有显示出全部。所以说，即使设置了android:clipChildren="false"，Button可以超出父布局，但是也得受根布局宽高的约束。

测试三

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.         xmlns:android="http://schemas.android.com/apk/res/android"
  4.         android:id="@+id/activity_main"
  5.         android:layout_width="match_parent"
  6.         android:layout_height="match_parent"
  7.         android:background="#cc000000"
  8.         android:clipChildren="false">
  9.         <LinearLayout
  10.         android:layout_width="200dip"
  11.         android:layout_height="200dip"
  12.         android:background="#cceeee11"
  13.         >
  14.         <Button
  15.             android:id="@+id/btn"
  16.             android:layout_width="wrap_content"
  17.             android:layout_height="wrap_content"
  18.             android:text="哈哈哈哈"/>
  19.         </LinearLayout>
  20. </LinearLayout>

效果如下：

结论：

这次，增加了拖拽，调用layout()来改变Button的位置，我们发现，在Button超出直接父布局的时候，就会消失不见了

测试四

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.         xmlns:android="http://schemas.android.com/apk/res/android"
  4.         android:id="@+id/activity_main"
  5.         android:layout_width="match_parent"
  6.         android:layout_height="match_parent"
  7.         android:background="#cc000000"
  8.         android:clipChildren="false">
  9.         <LinearLayout
  10.         android:layout_width="200dip"
  11.         android:layout_height="200dip"
  12.         android:background="#cceeee11"
  13.         android:clipChildren="false"
  14.         >
  15.         <Button
  16.             android:id="@+id/btn"
  17.             android:layout_width="wrap_content"
  18.             android:layout_height="wrap_content"
  19.             android:text="哈哈哈哈"/>
  20.         </LinearLayout>
  21. </LinearLayout>

效果如下：

结论：

这次，在直接父布局，也增加了android:clipChildren="false"，我们发现，在Button可以在整个根布局的范围内移动了

测试五

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.         xmlns:android="http://schemas.android.com/apk/res/android"
  4.         android:id="@+id/activity_main"
  5.         android:layout_width="400dip"
  6.         android:layout_height="400dip"
  7.         android:background="#cc000000"
  8.         android:clipChildren="false">
  9.         <LinearLayout
  10.         android:layout_width="200dip"
  11.         android:layout_height="200dip"
  12.         android:background="#cceeee11"
  13.         android:clipChildren="false"
  14.         >
  15.         <Button
  16.             android:id="@+id/btn"
  17.             android:layout_width="wrap_content"
  18.             android:layout_height="wrap_content"
  19.             android:text="哈哈哈哈"/>
  20.         </LinearLayout>
  21. </LinearLayout>

效果如下：

结论：
再次设置了根布局的宽和高，验证了Button的移动还是受根布局的宽高约束的

测试六

为了验证结论2，特意又加了一个例子

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.         xmlns:android="http://schemas.android.com/apk/res/android"
  4.         android:id="@+id/activity_main"
  5.         android:layout_width="match_parent"
  6.         android:layout_height="500dip"
  7.         android:background="#cc000000"
  8.         android:clipChildren="false">
  9.         <LinearLayout
  10.                 android:layout_width="300dip"
  11.                 android:layout_height="300dip"
  12.                 android:background="#cc11ffff"
  13.                 >
  14.                 <LinearLayout
  15.                 android:layout_width="200dip"
  16.                 android:layout_height="200dip"
  17.                 android:background="#cceeee11"
  18.                 >
  19.                         <Button
  20.                             android:id="@+id/btn"
  21.                             android:layout_width="wrap_content"
  22.                             android:layout_height="600dip"
  23.                             android:text="哈哈哈哈"/>
  24.                 </LinearLayout>
  25.         </LinearLayout>
  26. </LinearLayout>

效果如下：

我们只在根布局设置了android:clipChildren="false"，但是貌似没起作用。

我们把android:clipChildren="false"移到300dip的LinearLayout里，修改：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.         xmlns:android="http://schemas.android.com/apk/res/android"
  4.         android:id="@+id/activity_main"
  5.         android:layout_width="match_parent"
  6.         android:layout_height="500dip"
  7.         android:background="#cc000000"
  8.         >
  9.         <LinearLayout
  10.                 android:layout_width="300dip"
  11.                 android:layout_height="300dip"
  12.                 android:background="#cc11ffff"
  13.                 android:clipChildren="false"
  14.                 >
  15.                 <LinearLayout
  16.                 android:layout_width="200dip"
  17.                 android:layout_height="200dip"
  18.                 android:background="#cceeee11"
  19.                 >
  20.                         <Button
  21.                             android:id="@+id/btn"
  22.                             android:layout_width="wrap_content"
  23.                             android:layout_height="600dip"
  24.                             android:text="哈哈哈哈"/>
  25.                 </LinearLayout>
  26.         </LinearLayout>
  27. </LinearLayout>

效果如下：

这个时候，Button可以扩充到300dip的范围了。

我们再次修改，在根布局也加上android:clipChildren="false"：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.         xmlns:android="http://schemas.android.com/apk/res/android"
  4.         android:id="@+id/activity_main"
  5.         android:layout_width="match_parent"
  6.         android:layout_height="500dip"
  7.         android:background="#cc000000"
  8.         android:clipChildren="false"
  9.         >
  10.         <LinearLayout
  11.                 android:layout_width="300dip"
  12.                 android:layout_height="300dip"
  13.                 android:background="#cc11ffff"
  14.                 android:clipChildren="false"
  15.                 >
  16.                 <LinearLayout
  17.                 android:layout_width="200dip"
  18.                 android:layout_height="200dip"
  19.                 android:background="#cceeee11"
  20.                 >
  21.                         <Button
  22.                             android:id="@+id/btn"
  23.                             android:layout_width="wrap_content"
  24.                             android:layout_height="600dip"
  25.                             android:text="哈哈哈哈"/>
  26.                 </LinearLayout>
  27.         </LinearLayout>
  28. </LinearLayout>

效果如下：

这个时候，Button可以扩充到整个根布局了。

结论

1、android:clipChildren="false"设置在根布局即可，View外面需要ViewGrou包裹，才会起作用。
2、通过1，是不是说明，根布局设置android:clipChildren="false"，是一种声明，声明在这个布局范围内，三级子View可以超过二级子ViewGroup的范围。也解释了，为什么View需要一个直接父ViewGroup。
3、通过测试六，我们证实了结论2，也就说，android:clipChildren="false"只会影响包含View的直接子ViewGroup。如果，直接子ViewGroup没有包含子View，不会起作用。
4、三级子View可以超过其直接父ViewGroup，但是会受祖父ViewGroup的宽和高约束。通过测试六，我们也能证明，如果想要超过祖父布局，就需要其祖父ViewGroup的父ViewGroup也设置了android:clipChildren="false"。
5、拖拽View的时候，即使其祖父ViewGroup设置了android:clipChildren="false"，超过父ViewGroup之后，就不能显示了，要解决这个问题，必须其父ViewGroup也设置android:clipChildren="false"。
6、有一个问题，就是如果View拖拽出了直接父ViewGroup的范围，触摸、点击等事件就会失效。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注