Android CardView设置elevation后阴影显示异常被截断的问题

触发原因 #

这个问题没有复杂的系统兼容性问题，完全是安卓View默认绘制规则结合你的布局结构导致的，表现和成因完全匹配你的场景：

• 所有安卓ViewGroup默认开启android:clipChildren=true，意思是子View的绘制内容只要超出父容器的边界，就会被直接裁掉。CardView通过elevation生成的阴影本身是延伸在View本体轮廓外的——10dp的elevation值，大概会向View四周延伸5~8dp的阴影范围。如果你用来承载corner1、corner2、corner3的otherCorners容器，宽高刚好和三个CardView的本体尺寸严丝合缝，没有给阴影留冗余空间，阴影就会直接被容器的硬边界截断。
• 你的布局里otherCorners是水平约束容器，如果它的约束是贴死外层根ConstraintLayout的左右、底部边界，没有留任何边距，那么靠外侧的corner1、corner3的左右方向阴影，以及三个CardView的上下方向阴影，都会被外层布局或者中层容器的边界直接挡住。
• 上方的cornerPeace大CardView阴影显示正常，就是因为它周围有足够的冗余空间，阴影延伸的范围没有碰到任何会触发裁切的父容器边界。

具体修复步骤 #

• 给所有涉及的父容器关闭子View裁切：在外层作为根的ConstraintLayout、中层的otherCorners容器上，都加上android:clipChildren="false"属性，让子View绘制阴影时超出容器边界的部分不会被直接裁掉。
• 给otherCorners容器预留足够的阴影显示空间：给这个容器设置至少5dp的内边距（和10dp的app:cardElevation值匹配），不要让容器边界刚好卡在CardView的本体轮廓上，给阴影留出足够的绘制位置。
• 排查CardView自身属性：不要给CardView设置android:clipToOutline="true"，也不要把CardView的margin设为0贴死父容器边界，避免阴影被View自身的轮廓裁切逻辑截断。

内容的提问来源于stack exchange，提问作者WISHY