Clip to bounds a particular view within a subview – Ios swift

I think what you are looking for is not technically possible as defined by the docs

From the docs:

clipsToBounds

Setting this value to true causes subviews to be clipped to the bounds of the receiver. If set to false, subviews whose frames extend beyond the visible bounds of the receiver are not clipped. The default value is false.

So the subviews do not have control of whether they get clipped or not, it’s the container view that decides.

So I believe Matic’s answer is right in that the structure he proposes gives you the most flexibility.

With that being said, here are a couple of work arounds I can think of:

First, set up to recreated your scenario

Custom UIView

// Simple custom UIView with image view and selection UIView
fileprivate class CustomBorderView: UIView
{
    private var isSelected = false
    {
        willSet
        {
            toggleBorder(newValue)
        }
    }
    
    var imageView = UIImageView()
    var selectionView = UIView()
    
    init()
    {
        super.init(frame: CGRect.zero)
        configureImageView()
        configureSelectionView()
    }
    
    required init?(coder: NSCoder)
    {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func layoutSubviews()
    {
        super.layoutSubviews()
    }
    
    private func configureImageView()
    {
        imageView.image = UIImage(named: "image-test")
        imageView.contentMode = .scaleAspectFill
        addSubview(imageView)
        
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        imageView.topAnchor.constraint(equalTo: topAnchor).isActive = true
        imageView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        imageView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
    }
    
    private func configureSelectionView()
    {
        selectionView.backgroundColor = .clear
        selectionView.layer.borderWidth = 3
        selectionView.layer.borderColor = UIColor.clear.cgColor
        
        addSubview(selectionView)
        
        selectionView.translatesAutoresizingMaskIntoConstraints = false
        selectionView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        selectionView.topAnchor.constraint(equalTo: topAnchor).isActive = true
        selectionView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        selectionView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
        
        configureTapGestureRecognizer()
    }
    
    private func configureTapGestureRecognizer()
    {
        let tapGesture = UITapGestureRecognizer(target: self,
                                                action: #selector(didTapSelectionView))
        selectionView.addGestureRecognizer(tapGesture)
    }
    
    @objc
    private func didTapSelectionView()
    {
        isSelected = !isSelected
    }
    
    private func toggleBorder(_ on: Bool)
    {
        if on
        {
            selectionView.layer.borderColor = UIColor(red: 28.0/255.0,
                                                      green: 244.0/255.0,
                                                      blue: 162.0/255.0,
                                                      alpha: 1.0).cgColor
            
            return
        }
        
        selectionView.layer.borderColor = UIColor.clear.cgColor
    }
}

Then in the view controller

class ClippingTestViewController: UIViewController
{
    private let mainContainerView = UIView()
    private let customView = CustomBorderView()
    
    override func viewDidLoad()
    {
        super.viewDidLoad()
        view.backgroundColor = .white
        title = "Clipping view"
        configureMainContainerView()
        configureCustomBorderView()
        
        mainContainerView.layer.cornerRadius = 50
        mainContainerView.clipsToBounds = true
    }
    
    private func configureMainContainerView()
    {
        mainContainerView.backgroundColor = .white
        
        view.addSubview(mainContainerView)
        
        mainContainerView.translatesAutoresizingMaskIntoConstraints = false
        
        mainContainerView.leadingAnchor.constraint(equalTo: view.leadingAnchor,
                                                   constant: 20).isActive = true
        
        mainContainerView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor,
                                               constant: 20).isActive = true
        
        mainContainerView.trailingAnchor.constraint(equalTo: view.trailingAnchor,
                                                    constant: -20).isActive = true
        
        mainContainerView.heightAnchor.constraint(equalToConstant: 300).isActive = true
        
        view.layoutIfNeeded()
    }
    
    private func configureCustomBorderView()
    {
        mainContainerView.addSubview(customView)
        
        customView.translatesAutoresizingMaskIntoConstraints = false
        
        customView.leadingAnchor.constraint(equalTo: mainContainerView.leadingAnchor).isActive = true
        
        customView.topAnchor.constraint(equalTo: mainContainerView.safeAreaLayoutGuide.topAnchor).isActive = true
        
        customView.trailingAnchor.constraint(equalTo: mainContainerView.trailingAnchor).isActive = true
        
        customView.bottomAnchor.constraint(equalTo: mainContainerView.bottomAnchor).isActive = true
        
        view.layoutIfNeeded()
    }
}

This gives me your current experience

Work Around 1. – Shrink subviews on selection

When the view is not selected, everything looks fine. When the view is selected, you could reduce the width and height of the custom subview with some animation while adding the border.

Work Around 2. – Manually clip desired subviews

You go through each subview in your container view and:

• Apply the clipping to any subview you desire
• Apply the corner radius to the views you clip
• Leaving the container view unclipped and without a corner radius

To do that, I created a custom UIView subclass for the container view

class ClippingSubView: UIView
{
    override var clipsToBounds: Bool
    {
        didSet
        {
            if clipsToBounds
            {
                clipsToBounds = false
                clipImageViews(in: self)
                layer.cornerRadius = 0
            }
        }
    }
    
    // Recursively go through all subviews
    private func clipImageViews(in view: UIView)
    {
        for subview in view.subviews
        {
            // I am only checking image view, you could check which you want
            if subview is UIImageView
            {
                print(layer.cornerRadius)
                subview.layer.cornerRadius = layer.cornerRadius
                subview.clipsToBounds = true
            }
            
            clipImageViews(in: subview)
        }
    }
}

Then make sure to adjust the following lines where you create your views:

let mainContainerView = ClippingSubView()

// Do this only after you have added all the subviews for this to work
mainContainerView.layer.cornerRadius = 50
mainContainerView.clipsToBounds = true

This gives me your desired output