如何将UIView/UIImageView设置为自定义形状并作为父视图子视图？

嘿，这个需求在iOS开发里挺常见的，要让UIView或UIImageView呈现自定义形状，核心就是通过路径遮罩或者自定义绘制来实现，我给你整理几个最实用的方案：

方法一：用CAShapeLayer做遮罩（推荐，灵活度最高） #

这是最常用的方式，不管是静态还是动态修改形状都很方便，步骤也简单：

1. 用UIBezierPath定义你想要的自定义形状路径
2. 创建CAShapeLayer，把路径赋值给它
3. 将这个layer设为目标视图的mask，视图就只会显示路径覆盖的区域

代码示例（以你给出的点为例） #

// 先创建你的UIImageView实例
let imageView = UIImageView(frame: CGRect(x: 10, y: 30, width: 40, height: 20))
imageView.image = UIImage(named: "your-image-name")

// 1. 用自定义点创建路径
let customPath = UIBezierPath()
customPath.move(to: CGPoint(x: 10, y: 30))    // 起点
customPath.addLine(to: CGPoint(x: 50, y: 30)) // 右上点
customPath.addLine(to: CGPoint(x: 50, y: 50)) // 右下点
customPath.addLine(to: CGPoint(x: 10, y: 50)) // 左下点
customPath.close() // 闭合路径，形成完整形状

// 2. 创建形状图层并绑定路径
let shapeMaskLayer = CAShapeLayer()
shapeMaskLayer.path = customPath.cgPath
shapeMaskLayer.frame = imageView.bounds // 确保图层和视图边界匹配

// 3. 给视图设置遮罩
imageView.layer.mask = shapeMaskLayer

如果后续要修改形状，只需要更新shapeMaskLayer.path就行，非常灵活。UIView的用法完全一样，不管是纯色背景还是嵌套子视图，遮罩都会生效。

方法二：重写draw(_ rect:)方法（适合静态形状） #

如果你的形状是固定不变的，不需要动态调整，可以自定义一个UIView/UIImageView子类，重写draw(_ rect:)方法直接绘制形状：

自定义UIView示例 #

class CustomShapeView: UIView {
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        guard let context = UIGraphicsGetCurrentContext() else { return }
        
        // 定义自定义路径
        let customPath = UIBezierPath()
        customPath.move(to: CGPoint(x: 10, y: 30))
        customPath.addLine(to: CGPoint(x: 50, y: 30))
        customPath.addLine(to: CGPoint(x: 50, y: 50))
        customPath.addLine(to: CGPoint(x: 10, y: 50))
        customPath.close()
        
        // 设置填充颜色并绘制
        UIColor.systemBlue.setFill()
        customPath.fill()
    }
}

自定义UIImageView示例 #

如果是要给图片加自定义形状，也可以在子类里这样写：

class CustomShapeImageView: UIImageView {
    override func draw(_ rect: CGRect) {
        guard let image = self.image else { return }
        
        // 定义自定义路径
        let customPath = UIBezierPath()
        customPath.move(to: CGPoint(x: 10, y: 30))
        customPath.addLine(to: CGPoint(x: 50, y: 30))
        customPath.addLine(to: CGPoint(x: 50, y: 50))
        customPath.addLine(to: CGPoint(x: 10, y: 50))
        customPath.close()
        
        // 把图片裁剪到路径内绘制
        image.draw(in: customPath.bounds)
    }
}

这种方法适合静态场景，性能比遮罩略优，但修改形状需要调用setNeedsDisplay()触发重绘，灵活性不如遮罩方案。

额外技巧：适配视图动态大小 #

上面的例子用了固定坐标点，但实际开发中通常需要让形状跟着视图大小变化，这时候可以用视图的bounds来计算相对坐标：

// 比如创建一个梯形，适配视图的边界
let adaptivePath = UIBezierPath()
adaptivePath.move(to: CGPoint(x: bounds.minX, y: bounds.minY))
adaptivePath.addLine(to: CGPoint(x: bounds.maxX, y: bounds.minY))
adaptivePath.addLine(to: CGPoint(x: bounds.maxX - 20, y: bounds.maxY))
adaptivePath.addLine(to: CGPoint(x: bounds.minX + 20, y: bounds.maxY))
adaptivePath.close()

如果用的是遮罩方案，记得在视图的layoutSubviews()方法里更新路径，确保形状跟着视图大小调整：

override func layoutSubviews() {
    super.layoutSubviews()
    guard let maskLayer = layer.mask as? CAShapeLayer else { return }
    
    // 重新生成适配当前bounds的路径
    let adaptivePath = UIBezierPath()
    adaptivePath.move(to: CGPoint(x: bounds.minX, y: bounds.minY))
    adaptivePath.addLine(to: CGPoint(x: bounds.maxX, y: bounds.minY))
    adaptivePath.addLine(to: CGPoint(x: bounds.maxX - 20, y: bounds.maxY))
    adaptivePath.addLine(to: CGPoint(x: bounds.minX + 20, y: bounds.maxY))
    adaptivePath.close()
    
    maskLayer.path = adaptivePath.cgPath
}

总的来说：

• 动态修改形状优先选CAShapeLayer遮罩，灵活易维护
• 静态固定形状可以用重写draw方法，性能更优
• 不管哪种方法，都可以通过UIBezierPath添加直线、曲线（addCurve(to:controlPoint1:controlPoint2:)、addQuadCurve(to:controlPoint:)）实现任意复杂形状，比如圆形、三角形、波浪形等。

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