如何以编程方式使用 UIImageView Overlap 修复 UICollectionViewCell

Posted

技术标签:

【中文标题】如何以编程方式使用 UIImageView Overlap 修复 UICollectionViewCell【英文标题】:How to fix UICollectionViewCell with UIImageView Overlap Programmatically 【发布时间】:2015-05-30 16:08:15 【问题描述】:

我以编程方式为 uiview 创建 UICollectionView(我使用单个视图)。像这样

UICollectionViewFlowLayout *CATLayout=[[UICollectionViewFlowLayout alloc]init];
CATLayout.minimumInteritemSpacing = 2.0f;
CATLayout.minimumLineSpacing = 2.0f;
CATLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
CATLayout.sectionInset = UIEdgeInsetsMake(1.0f, 1.0f, 1.0f, 1.0f);

self.ColStickersListView=[[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, StickersListView.frame.size.width, StickersListView.frame.size.height) collectionViewLayout:CATLayout];
self.ColStickersListView.delegate=self;
self.ColStickersListView.dataSource=self;
self.ColStickersListView.tag=2;
[self.ColStickersListView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"CollStickersList"];
[self.ColStickersListView setBackgroundColor:[UIColor clearColor]];
[StickersListView addSubview:ColStickersListView];

UICollectionViewCell *cell = [ColStickersListView dequeueReusableCellWithReuseIdentifier:@"CollStickersList" forIndexPath:indexPath];



    // for background selected
    NSString *imageName=anObject;
    NSString *filename=[NSString stringWithFormat:@"%@/Stickers/List/%@",[appDel DocsPath],imageName];

    NSLog(@"%@",filename);


    cell.backgroundColor=[UIColor clearColor];
    UIImage *image=[UIImage imageNamed:filename];



    UIImageView *photoView=[[UIImageView alloc]initWithFrame:CGRectMake(StickersListPadding,StickersListPadding,StickersListThumbSize-(StickersListPadding*2),StickersListThumbSize-(StickersListPadding*2))];

    photoView.image=image;
    photoView.contentMode=UIViewContentModeScaleAspectFit;
    photoView.userInteractionEnabled = YES;

    [cell.contentView addSubview:photoView];



    return cell;

它非常适合将图像显示到单元格。

问题!!

如果将页面滚动到底部并再次滚动返回顶部,则单元格中的图像重叠。

如何解决它。!!! (以编程方式仅用于单一视图)

【问题讨论】:

【参考方案1】:

我怀疑是因为您没有在 UIImageView 上设置框架,所以它是从正在设置的图像中得出其大小的。因此,在某些情况下,它可能会溢出其父视图 -> 在这种情况下是单元格。

我建议你在 UIImageView 上设置一些约束,这可以通过编程来完成。 所以尝试在 UIIMageView 上设置左右上下约束,使其保持在单元格的范围内

【讨论】:

【参考方案2】:

滚动时

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath 被重复调用..

表示您将UIImageView *photoView 重复添加到cell.contentView

    UIImageView *photoView=[[UIImageView alloc]initWithFrame:CGRectMake(StickersListPadding,StickersListPadding,StickersListThumbSize-(StickersListPadding*2),StickersListThumbSize-(StickersListPadding*2))];

    //codes..

    [cell.contentView addSubview:photoView];

这样做可以防止:

UICollectionViewCell *cell = [ColStickersListView dequeueReusableCellWithReuseIdentifier:@"CollStickersList" forIndexPath:indexPath];

if (cell == nil)

    UIImageView *photoView=[[UIImageView alloc]initWithFrame:CGRectMake(StickersListPadding,StickersListPadding,StickersListThumbSize-(StickersListPadding*2),StickersListThumbSize-(StickersListPadding*2))];

     // codes...

    [cell.contentView addSubview:photoView];

解决此问题的另一种方法是创建自定义集合单元:

// CustomCollectionCell.h
@interface YourCollectionCell : UICollectionViewCell

@property (nonatomic) UIImageView *photoView;

@end

// CustomCollectionCell.m

@implementation YourCollectionCell

- (id)initWithFrame:(CGRect)frame

    self = [super initWithFrame:frame];
    if (self) 

     // and setting up you imageview here
        self.photoView=[[UIImageView alloc]initWithFrame:YourRect];

        self.photoView.contentMode=UIViewContentModeScaleAspectFit;
        self.photoView.userInteractionEnabled = YES;

        [self.contentView addSubview:self.photoView];

    
    return self;

并像这样使用它:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

     CustomCollectionCell *cell = (CustomCollectionCell *)[ColStickersListView dequeueReusableCellWithReuseIdentifier:@"CollStickersList" forIndexPath:indexPath];

     cell.photoView.image=image;

     return cell;

希望我对您有所帮助,编码愉快.. 干杯和晚安!

【讨论】:

以上是关于如何以编程方式使用 UIImageView Overlap 修复 UICollectionViewCell的主要内容,如果未能解决你的问题,请参考以下文章

如何以编程方式更改使用自动布局在情节提要上创建的 UIImageView 的大小?

如何以编程方式将 UIImageView 添加到 UIStackView(故事板)

如何以编程方式在方板上创建多个 UIImageView

如何以编程方式更改 UIImageView 的高度?

如何在 Swift 3 中以编程方式在 UIImageview 中添加 UITableview

如何以编程方式在 Swift 中将 uiimageview 设置为 xcode 内置的 applewatch 图标图像?