如何在Android和iOS双端实现图示UI效果

Android 端实现 #

• 官方组件方案（推荐）：如果项目引入了Material Components依赖，直接用MaterialShapeDrawable实现即可，完全不需要手写复杂路径逻辑。给目标布局配置ShapeAppearanceModel，在需要做内凹的边缘自定义EdgeTreatment，设置好凹入的圆弧半径、横向偏移位置即可，组件自带抗锯齿和全机型适配，不会出现裁剪错位、边缘发虚的问题。官方自带的BottomAppBar中间凹入效果就是用这套逻辑实现的，可以直接参考其参数配置。
• 自定义裁剪方案：如果不想引入Material库，直接自定义Drawable或者重写View的onDraw方法，用Path先绘制整体的圆角矩形轮廓，再在凹入位置绘制一个和凹弧大小一致的圆形路径，通过Path.op()的Path.DIFFERENCE操作把圆形区域从矩形路径中挖除，最后用Canvas.clipPath()按照最终路径裁剪布局即可。记得给绘制用的Paint添加ANTI_ALIAS_FLAG抗锯齿标志，低版本机型如果出现裁剪异常，可以临时给对应View设置LAYER_TYPE_SOFTWARE渲染层级。
• 零代码方案：如果UI效果固定不需要动态调整凹弧大小、位置，直接导出对应形状的9-patch格式切图作为布局背景即可，开发成本最低，系统原生适配所有分辨率。

iOS 端实现 #

• 图层Mask方案：用UIBezierPath绘制目标形状，先画整体的圆角矩形，再在凹入位置绘制对应大小的圆形，将圆形路径反转后和矩形路径拼接为完整路径，把路径赋值给CAShapeLayer后设为目标View的layer.mask即可实现裁剪。注意一定要在layoutSubviews回调里、拿到View的实际bounds后再更新路径尺寸，不要写死固定宽高，避免屏幕旋转、不同屏幕尺寸、布局动态变化时形状错位。
• 自定义图层绘制方案（性能优先）：如果是列表滚动场景要减少离屏渲染掉帧，可以直接把拼接好的路径赋值给CAShapeLayer作为path属性，设置好对应填充色后，把这个layer插入到View层级的最底层当背景使用，不需要做mask裁剪，滚动场景下帧率表现明显更好。
• 零代码方案：固定效果直接用Xcode的可拉伸切图（stretchable image）作为背景即可，不需要写任何形状相关代码，和Android点九图方案逻辑一致。

• 跨端对齐注意点：双端需要统一凹弧半径、凹弧距离侧边的偏移值、整体布局圆角大小三个核心参数，避免两端视觉效果出现差异；如果凹弧位置需要放置悬浮控件（比如凸起的操作按钮），记得把控件的中心约束对齐到凹弧的圆心位置，同时调整父布局的裁剪属性，避免控件被截断。

内容的提问来源于stack exchange，提问作者Anandha Murthy B