Ad

IOS - How To Create Facebook Reaction Bar With Blur Background?

- 1 answer

Although it may not be the week to replicate some design of Facebook, I would like to be able to design my own version of the reaction indicator view below.

enter image description here

I have three UIImageViews lined in the same positions as above. The problem is that, unlike Facebook, the background color may change (i.e is on top of a UIBlurEffect) and therefore I am unable to set the border color to white.

I thought it would make sense to set the borderColor like so:

imageViewOne.layer.borderColor = UIColor.clear.cgColor
imageViewOne.layer.borderWidth = 2

However, the underlying imageViewTwo is displayed in the border instead of the background color.

So far, I have this:

enter image description here

Would appreciate some help/ideas on how to make this work - I'm thinking of masks but not sure whether a. this is the correct solution and b. how to achieve the desired effect. To clarify, I am not able to set the border color as a constant as it will change with the UIBlurEffect.

Ad

Answer

In my opinion, there are 2 way to resolve your problem.

  • Create and use clipped image for Wow and Love like below Love image.

    enter image description here

  • Another way is using mask property of UIView. Creating a mask image and apply it for mask property.

    Mask image looks like.

    enter image description here

    Code for applying mask.

    let imvLoveMask = UIImageView.init(image: UIImage.init(named: "MASK_IMAGE_NAME"));
    imvLoveMask.frame = CGRect.init(x: 0, y: 0, width: imvLove.frame.size.width, height: imvLove.frame.size.height);
    imvLove.mask = imvLoveMask;
    

Both of 2 above way can help you achieve what you want in the question. Background of icons in below image is an UIVisualEffectView.

enter image description here

In my opinion, the first way with clipped image is better and faster because you don't need to apply mask for your imageView. But if you don't want to create a clipped image for some reason, you can use the second way.

For more detail, you can take a look at my demo repo

Ad
source: stackoverflow.com
Ad