49

Experimenting with SwiftUI (Xcode 11.0 beta 2), I try to fill a View with an image :

Image("large")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 80, height: 80, alignment: .center)
    .border(Color.black)

This renders like so :

No clipping

I would like to apply something similar to UIView.clipsToBounds so the image is clipped and the parts outside of the box are not visible.

4 Answers 4

66

You can use the .clipped() modifier, which results in an effect similar to UIView.clipsToBounds:

Image("large")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 80, height: 80, alignment: .center)
    .border(Color.black)
    .clipped() // Equal to clipsToBounds = true
7
  • 10
    Please note that clipped MUST follow the frame not precede it otherwise it won’t work!
    – Eddy
    Jun 23, 2020 at 10:11
  • 16
    IMPORTANT: This worked great for me, visually. I found an issue where if the clipped region of the image overlaps a button, that button will NOT work. Even though it looks perfect, the button will not receive the touches that it should. To get around that I had to manually clip the image (using UIKit) to a specific CGSize BEFORE sending it to the SwiftUI Image's init(uiImage:). I hope this helps someone in my situation! And if anyone has a better way to handle this PLEASE let me know. Jul 24, 2020 at 18:30
  • 1
    @SeanRobinson159 I just got the same problem. I set the frame alignment to .top as my button was at the top so the image overlaps things at the bottom where nothing were to worry about. But still very not optimal... :/
    – Cinn
    Aug 2, 2020 at 18:10
  • You can use a ZStack to make sure the button is on top.
    – Avi
    Feb 15, 2021 at 16:28
  • 1
    @SeanRobinson159 please see my response: stackoverflow.com/a/71007413/4383631 It might help you.
    – Amirr0r
    Feb 21, 2022 at 8:18
30
Image("large")
   .resizable()
   .clipShape(Circle())
   .frame(width: 200.0, height: 200.0)
   .overlay(Circle().stroke(Color.white,lineWidth:4).shadow(radius: 10))

OutPut

1
  • Not what I was looking for, but the clipShape is definitely cool ! Jul 4, 2019 at 8:25
24
Image("large")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 80, height: 80, alignment: .center)
+   .contentShape(Rectangle())
+   .clipped()
    .border(Color.black)

This helped me fixing the issue by image overlapping a button. contentShape() was used to clip hit-testing area. clipped() is clipping the contents inside the view's bounds(as others mentioned).

3
  • 1
    For this I searched over an hour. Thank you so much! .contentShape() was what I needed.
    – Mina
    Feb 16, 2022 at 23:59
  • yeah! Exactly, thanks! Feb 18, 2022 at 13:06
  • 1
    Omg, I've spent three days finding this answer, thank you! Apr 17, 2022 at 18:16
-4
Use GeometryReader can fix the issue where if the clipped region of the image overlaps a button, that button will NOT work

like this:
GeometryReader { geo in
   Image("large")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 80, height: 80, alignment: .center)
    .border(Color.black)
 }.frame(width: 150, height: hh)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.