CODEWITHSUNDEEP
iosxamarin.iosuicollectionview
Alexandru Stefan
Alexandru Stefan

Reputation: 655

Fade UICollectionViewCells with overlap goes wrong

I have an UICollectionView with some UICollectionViewCells. Cells are supposed to overlap each other, but also to fade a bit based on their position. See below the result:enter image description here

How can I avoid those corners to be visible? (top between 3 and 4, or 4 and 5, or all the right side between 5 and 6). They should overlap, but that should not affect the image.

Upvotes: 3

Views: 77

Answers (1)

buto
buto

Reputation: 41

In order to create a fade effect I would use an overlay like this:

  • Save the original image in a variable to be able to reset the process for different alpha values
  • Draw a shape that has same color as background (color alpha should be proportional with the item position) on top of your current image
  • Replace the result image with your current one

I will give you an example to illustrate better:

private UIImage baseImage; 

private UIImage ChangeImageColor(UIImage image, nfloat alpha, UIColor color)
{
   var alphaColor = color.ColorWithAlpha(alpha);

   if(baseImage == null)
   {
      baseImage = image;       
   }
   else
   {
      image = baseImage;
   }

   UIGraphics.BeginImageContextWithOptions(image.Size, false, UISCreen.MainScreen.Scale);

   var context = UIGraphics.GetCurrentContext();
   alphaColor.SetFill();

   context.TranslateCTM(0, image.Size.Height);
   context.ScaleCTM(new nfloat(1.0), new nfloat(-1.0));
   context.SetBlendMode(CGBlendMode.Lighten);

   var rect = new CGRect(0, 0, image.Size.Width, image.Size.Height);
   context.DrawImage(rect, image.CGImage);

   context.SetBlendMode(CGBlendMode.SourceAtop);
   context.AddRect(rect);
   context.DrawPath(CGPathDrawingMode.Fill);

   image = UIGraphics.GetImageFromCurrentImageContext();
   UIGraphics.EndImageContext();

   return image;
}

Upvotes: 1

Related Questions