如何在 iOS 的 UICollectionViewCell 的左上角添加按钮？

Posted 2023-02-23

【中文标题】如何在 iOS 的 UICollectionViewCell 的左上角添加按钮？

【英文标题】：How to add button to top left corner in UICollectionViewCell in iOS?

【发布时间】：2015-11-24 07:26:20

【问题描述】：

我想将按钮添加到单元格的左上角。我已经尝试过，但我总是在集合视图单元格中添加，而不是在单元格上，所以请告诉我怎么做？

我试过了。

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

    BlogAlbumCell  *cell;
    static NSString *identifier = @"UserBlogAlbum";
    cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
    UserAlbum *user_allbum=[arr_userAlbums objectAtIndex:indexPath.row];
    cell.label_blog_name.text=user_allbum.album_name;
    [cell.image_blog_image setImageWithURL:[NSURL URLWithString:[IMAGE_BASE_URL stringByAppendingString:user_allbum.album_image]] placeholderImage:[UIImage imageNamed:@"post_placeholder.png"]];
    if([[[NSUserDefaults standardUserDefaults]valueForKey:@"longPressed"] isEqualToString:@"yes"])
    
        NSLog(@"Inside the long press section");
        CABasicAnimation* anim = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
        [anim setToValue:[NSNumber numberWithFloat:0.0f]];
        [anim setFromValue:[NSNumber numberWithDouble:M_PI/50]];
        [anim setDuration:0.1];
        [anim setRepeatCount:NSUIntegerMax];
        [anim setAutoreverses:YES];
        cell.layer.shouldRasterize = YES;
        [cell.layer addAnimation:anim forKey:@"SpringboardShake"];
        CGFloat delButtonSize = 30;
        UIButton *delButton = [[UIButton alloc] initWithFrame:CGRectMake(-5,-5, delButtonSize, delButtonSize)];
        delButton.backgroundColor = [UIColor clearColor];
        [delButton setImage: [UIImage imageNamed:@"cross_30.png"] forState:UIControlStateNormal];
       [delButton setBackgroundColor:[UIColor blueColor]];
        [cell addSubview:delButton];
        delButton.tag=indexPath.row;
        [delButton addTarget:self action:@selector(deleteAlbum:) forControlEvents:UIControlEventTouchUpInside];
    
    else if ([[[NSUserDefaults standardUserDefaults]valueForKey:@"singleTap"] isEqualToString:@"yes"])
    
        if(indexPath.row==([arr_userAlbums count]-1))
        
            [[NSUserDefaults standardUserDefaults]setValue:@"no" forKey:@"singleTap"];
        
        for(UIView *subview in [cell subviews])
        
            if([subview isKindOfClass:[UIButton class]])
            
                [subview removeFromSuperview];
            

        
        [cell.layer removeAllAnimations];
        // _deleteButton.hidden = YES; 
         [_deleteButton removeFromSuperview];
    
        return cell;

但它不会将按钮添加到左上角。

我想要这样的

编辑：

这是我现在得到的

【问题讨论】：

你把这些代码放在哪里了？

在 cellForItemAtIndexPath 中。

cellForItemAtIndexPath 不是进行此类自定义的最佳位置，但如果您做得对，它就可以工作。请分享更多代码，至少是您的完整方法cellForItemAtIndexPath。但是，我会选择自定义单元类。

检查更新问题。@HermannKlecker

【参考方案1】：

您在 Main.storyBoard 中的设计如下：

现在，在您的自定义单元格中创建 Button 的 IBOutlet。 并在 cellForItemAtIndexPath 方法中设置此按钮的属性，例如：

[cell.btnDelete setTag:indexPath.row];
[cell.btnDelete addTarget:self action:@selector(btnDeleteFolderTapped:) forControlEvents:UIControlEventTouchUpInside];

并创建 btnDeleteFolderTapped 方法：

    -(void)btnDeleteFolderTapped:(id)sender
    
         // handle your stuff here
    

对于单元格之间的空间，将以下代码放入您的 .m 文件中：

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

    if(IS_IPHONE_6P)
    
        return CGSizeMake(([UIScreen mainScreen].bounds.size.width - 70) / 2, ([UIScreen mainScreen].bounds.size.width - 70) / 2);
    
    else
    
        return CGSizeMake(([UIScreen mainScreen].bounds.size.width - 60) / 2, ([UIScreen mainScreen].bounds.size.width - 60) / 2);
    

然后转到 Main.storyboard，点击 collectionView 设置属性，如：

【讨论】：

但这会在左侧和右侧的单元格之间创建一些额外的空间，但我不希望单元格之间有很大的间隙

你能推荐比这更好的吗？看看它会在单元格之间创造额外的空间。因为单元格很大，但只有它的内容很小

它只连续显示两个单元格我想以最小的恒定间距连续显示 3 个单元格。建议更好的东西请它仍然是问题

将单元格背景设置为红色并用以下方法除以 3 进行检查：--> - (CGSize)collectionView:(UICollectionView )collectionView layout:(UICollectionViewLayout)collectionViewLayout sizeForItemAtIndexPath: (NSIndexPath *)indexPath

问题是您的collectionview单元格较大而内容视图较小，这就是单元格之间发生此空间的原因

【参考方案2】：

因为您将按钮添加为单元格的子视图，所以它当然会在单元格中添加按钮而不是。例如，您的图标大小为 60x60，单元格大小为 80x80。只需在与单元格 80x80 大小相同的单元格上添加不可见（我的意思是 backgroundColor 是明确的）UIView 并添加图标作为该视图的子视图并给出此框架 CGRectMake(10, 10, 60, 60)。最后，在左上角添加图标作为该视图的子视图，如CGRectMake(0, 0, delButtonSize, delButtonSize)。你的 UI 层次结构应该是这样的；

UICollectionViewCell -> UIView -> 删除按钮和应用图标

【讨论】：

这不起作用，因为它会阻止 cel 上的触摸事件，而且新视图也是主视图的子视图。

【参考方案3】：

我找到了一个简单的方法来做这件事。 .

1.将您必须在单元格中显示的图像小于单元格大小并将其对齐到右下角。

现在只需将按钮添加到单元格剩余空间的左上角即可。

如果你是初学者并且不知道如何玩约束，那么我让我解释一下我实际上做了什么。

我将单元格设置为 100X100 pts，imageView 设置为 70X70 pts。 然后将给定的 imageView 右侧和底部约束与常量值“0”或零对齐到其父视图。 给 left 和 top 约束常数 30 pts。 添加带有十字图像图标的按钮。 左对齐按钮与 imageView 通过给 -10 左对齐约束点 与 imageView -10 顶部对齐约束点类似的顶部对齐按钮。

它将提供与所需相同的用户体验！。我也附上了一张图片。