サブビューへの境界線のクリッピング

Question

2つのUIViewの輪郭を作成しようとしていますが、境界線プロパティを使用して、私が望むものを達成できないようです。私は左の画像を取得しています、と私は右のものをしたい：

ここに私のコードです：

let main = UIView() 
    main.frame = CGRect(x: 50, y: 50, width: 200, height: 100) 
    main.backgroundColor = UIColor.clear 
    self.view.addSubview(main) 

    let v1 = UIView() 
    v1.frame = CGRect(x: 0, y: 0, width: 200, height: 50) 
    v1.backgroundColor = UIColor.blue 
    main.addSubview(v1) 

    let v2 = UIView() 
    v2.frame = CGRect(x: 0, y: 50, width: 150, height: 50) 
    v2.backgroundColor = UIColor.red 
    main.addSubview(v2) 

    main.clipsToBounds = true 
    main.layer.borderColor = UIColor.black.cgColor 
    main.layer.borderWidth = 3 

Answer 1

あなたがそうのようなカスタム形の境界層を作成する必要があります。

let main = UIView() 
main.frame = CGRect(x: 50, y: 50, width: 200, height: 100) 
main.backgroundColor = UIColor.clear 
self.view.addSubview(main) 

let v1 = UIView() 
v1.frame = CGRect(x: 0, y: 0, width: 200, height: 50) 
v1.backgroundColor = UIColor.blue 
main.addSubview(v1) 

let v2 = UIView() 
v2.frame = CGRect(x: 0, y: 50, width: 150, height: 50) 
v2.backgroundColor = UIColor.red 
main.addSubview(v2) 


// Custom Shape Layer  
let maskLayer = CAShapeLayer() 
maskLayer.frame = main.bounds 

// Custom CGPath   
let resultPath = CGMutablePath() 
resultPath.addPath(CGPath(rect: v1.frame, transform: nil)) 
resultPath.addPath(CGPath(rect: v2.frame, transform: nil)) 
maskLayer.path = resultPath 

// Add border 
let borderLayer = CAShapeLayer() 
borderLayer.path = maskLayer.path 
borderLayer.strokeColor = UIColor.black.cgColor 
borderLayer.lineWidth = 5 
borderLayer.frame = main.bounds 
borderLayer.zPosition = -1 
main.layer.addSublayer(borderLayer)