IOS7 风格模糊 UICollectionViewCell 视图点击

Posted 2023-02-23

【中文标题】IOS7 风格模糊 UICollectionViewCell 视图点击

【英文标题】：IOS7 style blur UICollectionViewCell's view on tap

【发布时间】：2014-08-14 12:10:48

【问题描述】：

我试图在点击时模糊 UICollectionViewCell。我尝试的是获取被点击的单元格的屏幕截图并模糊屏幕截图。使用模糊的屏幕截图作为背景并隐藏所有标签。

我注意到的行为是

点击单元格 1：单元格 1 消失

点击单元格 2：有点模糊，但我可以确定错误单元格的内容已被模糊

点击单元格 3：更加模糊

点击单元格 4：很多模糊

我认为的问题是：

错误的单元格内容变得模糊，

当另一个单元格模糊时，会重复使用模糊的屏幕截图，因此会增加模糊。

然后我编辑了代码以将背景设置为原始未模糊的屏幕截图

点击单元格 1：单元格 1 消失

点击单元格 2：出现单元格 1 的屏幕截图

点击单元格 3：出现单元格 2 的屏幕截图

等等

代码如下：

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
 //Code to get data from database and add to labels

  if(![[modelArray objectAtIndex:indexPath.row] isEqualToString:@"1"])
      UIGraphicsBeginImageContextWithOptions(cell.overviewView.bounds.size, NO, cell.overviewView.window.screen.scale);
      [cell.overviewView drawViewHierarchyInRect:cell.overviewView.frame afterScreenUpdates:NO];
      UIImage *snapshotImage = UIGraphicsGetImageFromCurrentImageContext();
      UIGraphicsEndImageContext();

      snapshotImage = [snapshotImage applyLightEffect];

      cell.overviewView.backgroundColor = [UIColor colorWithPatternImage:snapshotImage];
      cell.overviewView.alpha = 1;

      cell.descLabel.alpha = 0;
      cell.dayLabel.alpha = 0;
      cell.weatherImage.alpha = 0;
      cell.tempLabel.alpha = 0;
  


  NSLog(@"Cell :%d condition : %@", indexPath.row, weather.desc );
  return cell;

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
  WeekCell *cell = (WeekCell*)[collectionView cellForItemAtIndexPath:indexPath];
  NSLog(@"%@", cell.descLabel.text);
  if([[modelArray objectAtIndex:indexPath.row] isEqualToString:@"1"])
     [modelArray setObject:@"0" atIndexedSubscript:indexPath.row];
  else
    [modelArray setObject:@"1" atIndexedSubscript:indexPath.row];
  

  NSLog(@"sequence : %@", modelArray);
  [collectionView reloadItemsAtIndexPaths:@[indexPath]];

【问题讨论】：

你需要什么可以分享一张图片吗？

@Bhaskar 添加了一张图片

【参考方案1】：

我只是发布你可以尝试的示例代码，

在自定义 UICollectionViewCell 中，我将其命名为 CustomCollectionVIewCell，其 nib 文件如下所示

在上图中，您可以看到View-backgroundVIew 包含用于保存模糊图像的图像视图，View-ForeGround 是一个包含普通图像和 2 个带有绿色和黑色文本的标签的视图，这两个标签被添加到集合中查看单元格而不是任何其他视图。

单元格层级如下图所示

在代码中将所有这些连接为单元中的插座， CustomCollectionVIewCell.h

  @interface CustomCollectionVIewCell : UICollectionViewCell

  @property (nonatomic, assign) id<CellFooterDelegate> myCustomdelegate;//define a delegate
  @property (weak, nonatomic) IBOutlet UIView *backGroundView;
  @property (weak, nonatomic) IBOutlet UIImageView *blurImageVIew;
  @property (weak, nonatomic) IBOutlet UIView *forGroundView;
  @property (weak, nonatomic) IBOutlet UIImageView *cellImageView; 
  //..other objects

  @end

在CustomCollectionVIewCell.m 里放这个

//just frame adjustment
- (void)awakeFromNib
 
    self.backGroundView.frame  = self.contentView.bounds;
    self.blurImageVIew.frame = self.backGroundView.bounds;

    self.forGroundView.frame = self.contentView.bounds;
    self.cellImageView.frame = self.forGroundView.bounds;
 

在控制器中

  -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
 
    CustomCollectionVIewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    cell.myCustomdelegate = self;
    cell.cellImageView.image = [dataSourceArray objectAtIndex:indexPath.row];
    return cell;
 

选择单元格后，您可以放置​​如下图所示的模糊图像

 - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
 

   CustomCollectionVIewCell *cell = (CustomCollectionVIewCell *)[collectionView cellForItemAtIndexPath:indexPath];
   UIGraphicsBeginImageContext(cell.cellImageView.bounds.size);
   [cell.forGroundView.layer renderInContext:UIGraphicsGetCurrentContext()];
   UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
   UIGraphicsEndImageContext();
   //   self.blurrImage = [image applyTintEffectWithColor:[UIColor colorWithRed:25.0f/255.0f green:77.0f/255.0f blue:108.0f/255.0f alpha:1.0f ]];
   cell.forGroundView.alpha = 0.0f;
   cell.blurImageVIew.image = [image applyLightEffect];
 

取消选择后只需更改前景视图的 alpha

 - (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath
 
    CustomCollectionVIewCell *cell = (CustomCollectionVIewCell *)[collectionView cellForItemAtIndexPath:indexPath];
    cell.blurImageVIew.image = nil;
    cell.forGroundView.alpha = 1.0f;
 

输出如下所示

希望这对你有帮助.. :)

【讨论】：

感谢@Shan，很好的解释。谢谢