在自动布局和尺寸类中屏蔽图像

Posted 2023-03-13

【中文标题】在自动布局和尺寸类中屏蔽图像

【英文标题】：Mask an image in autoLayout and sizeclass

【发布时间】：2016-05-01 12:43:46

【问题描述】：

我正在尝试在 ios 8 xcode 7.3 中以 autoLayout 大小类模式屏蔽图像（即在表格视图单元格中）。

我看了这个链接：How to Mask an UIImageView

第一个答案对我不起作用。第二个答案有效，但蒙版图像的大小不正确。我的代码是：

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath

UIImage *imgStory = [UIImage imageNamed:@"story1"];
UIImage *imgMask = [UIImage imageNamed:@"storyFrameMask"];

UIImageView *imgViewStory = (UIImageView *)[cell viewWithTag:100];
UIImageView *imgViewBorder = (UIImageView *)[cell viewWithTag:101];

imgViewStory.image = imgStory;
CALayer *mask = [CALayer layer];
mask.contents = (id)[[UIImage imageNamed:@"storyFrameMask"] CGImage];
//    mask.frame = CGRectMake(imgViewBorder.frame.origin.x, imgViewBorder.frame.origin.y, 178.0, 235.0);
mask.frame = CGRectMake(imgViewBorder.frame.origin.x, imgViewBorder.frame.origin.y, imgViewBorder.frame.size.width, imgViewBorder.frame.size.height);
imgViewStory.layer.mask = mask;
imgViewStory.layer.masksToBounds = YES;

我的输出屏幕截图是： [![在此处输入图片描述][1]][1]

我可以通过为遮罩框的宽度和高度提供自定义值来解决问题（我在代码中注释了固定宽度和高度。你可以看到它。），你知道这不是正确的方法。因为我使用的是自动布局和尺寸类。

固定的宽度和高度仅适用于单个尺寸类别。

这是我设置固定宽度和高度时的屏幕截图： [![在此处输入图片描述][2]][2]

我已经搜索了所有网站，但没有一个是用于自动布局的。 任何人都可以帮助我为所有尺寸类别和设备制作一个好的面具。

编辑：请注意，我的蒙版 imageview 的约束与边框 imageView 相同。所以它们的框架是相等的。所以问题不在于我的布局。问题是被掩码图像视图淹没的掩码图像。我可以通过为遮罩框的宽度和高度提供自定义值来解决此问题，但这不是自动布局中的正确方法。

【参考方案1】：

已编辑：旧答案不正确。

问题出在-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath，图像视图的帧不是最终帧。它那一刻的框架等于故事板中的设计尺寸。 为了解决这个问题，我认为你应该在你的自定义单元格中覆盖- (void)layoutSubviews，并像这样设置正确的蒙版框架：

- (void)layoutSubviews 
    [super layoutSubviews];

    CALayer *mask = [CALayer layer];
    mask.contents = (id)[[UIImage imageNamed:@"storyFrameMask"] CGImage];
    //    mask.frame = CGRectMake(imgViewBorder.frame.origin.x, imgViewBorder.frame.origin.y, 178.0, 235.0);
    mask.frame = CGRectMake(imgViewBorder.frame.origin.x, imgViewBorder.frame.origin.y, imgViewBorder.frame.size.width, imgViewBorder.frame.size.height);
    imgViewStory.layer.mask = mask;
    imgViewStory.layer.masksToBounds = YES;

【讨论】：

没有。它没有区别。 imgViewBorder 的来源与 imgViewStory 的来源相同。此外，如果您查看我的屏幕截图，您会发现原点不是问题。蒙版图像的宽度和高度是问题。你最好在我的问题下评论而不是答案。

更新了我的答案，请查收。

没有区别。 “layoutSubviews”中的蒙版框架仍然不正确。我不知道哪种方法，给我正确的（最终）框架。任何帮助:(

我将掩码代码放在“didSelectRowAtIndexPath”方法中，它起作用了。这表明我的代码是正确的，但“imgViewBorder”的帧不是最终帧。它的框架仍然是故事板中的框架。我可以将代码投入使用的最佳方法是什么。