ios - Particular shape image on uiimageview

Question

Can we set below shape on image with UIImageView.

Any idea!

Thanks

Answer 1

Swift 3 Version - With Border

Like others suggest, I would use the image's mask property.

Info from Apple about the mask property:

The layer’s alpha channel determines how much of the layer’s content and background shows through. Fully or partially opaque pixels allow the underlying content to show through but fully transparent pixels block that content. The default value of this property is nil nil.

When configuring a mask, remember to set the size and position of the mask layer to ensure it is aligned properly with the layer it masks.

That last sentence is important!

1. Create Your Mask

I used Sketch to create a black image with a transparent background (PNG).

Add it to your Assets.xcassets folder. My image is called profileMask.

2. Add UIImageView to Storyboard

Create an outlet for the image view. I called mine profileImageView.

3. Code viewDidLoad

override func viewDidLoad() {
    super.viewDidLoad()

    let maskImageView = UIImageView()
    maskImageView.contentMode = .scaleAspectFit
    maskImageView.image = #imageLiteral(resourceName: "profileMask")
    maskImageView.frame = profileImageView.bounds
    profileImageView.mask = maskImageView
}

Note:

• I added the contentMode because without it my mask was stretching to match the UIImageView's bounds (width). You can solve this by just making your UIImageView the same size as your mask image too or vice versa.

Here is what it looks like when run:

What About The Border?

Guys, this was a pain to do. I tried to create a Bezier Path but to be honest my skills on making an exact shape to match the mask was impossible for me. A Bezier Path would probably look really good if you have the skills to do that but I don't. :(

So I had the idea, "What if I just use the mask image as the border?" It worked! The benefit of doing it this way is you can use ANY mask shape in the future and it will create a border for it without having to figure out the bezier path.

Here's how I did it:

1. In the Assets.xcassets, select your mask and change this Render As property to "Template Image". This allows you to change the color of the mask image by changing the UIImageView's Tint Color property
2. Then in the code I set the profileImageView to the mask and change the tint color to whatever I want the border to be.
3. Then I created another image view for Jason's profile picture and applied the mask to it. I made it the same size as profileImageView minus 2 points (to show the underlying mask image which will be the border).
4. Last step is to them add the masked image as a subview of profileImageView.

Here's the code in viewDidLoad now:

override func viewDidLoad() {
    super.viewDidLoad()

    // Add border first (mask image)
    profileImageView.contentMode = .scaleAspectFit
    profileImageView.tintColor = .lightGray // Border Color
    profileImageView.image = #imageLiteral(resourceName: "profileMask")

    // Profile Image
    let profileImage = UIImageView()
    profileImage.image = #imageLiteral(resourceName: "Profile")
    profileImage.contentMode = .scaleAspectFill
    // Make a little bit smaller to show "border" image behind it
    profileImage.frame = profileImageView.bounds.insetBy(dx: 2, dy: 2)

    // Mask Image
    let maskImageView = UIImageView()
    maskImageView.image = #imageLiteral(resourceName: "profileMask")
    maskImageView.contentMode = .scaleAspectFit
    maskImageView.frame = profileImage.bounds

    // Apply mask to profile iamge
    profileImage.mask = maskImageView

    // Add profile image as a subview on top of the "border" image
    profileImageView.addSubview(profileImage)
}

So now it looks like this when we run it:

Closing

What could be really cool is if we create a custom UIImageView with a mask and border width property. Then you can just assign these properties and the custom class will take care of the rest. Let me know if you guys want to see something like this and I'll create it and post it here. Maybe also make a YouTube video tutorial for my channel.