IOS - How to create Facebook reaction bar with blur background?

Question

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.

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:

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.

Answer 1

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

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

  

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

  Mask image looks like.

  

  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.

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