CollectionView 中的标签重叠
Label Overlapping in CollectionView
我已经实现了带有图像和标签的集合视图。图像工作正常,但标签重叠。我已经实现了所有必需的方法,但无法找到标签重叠的问题。下面提供了我的代码
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 40;
}
//loading data
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
aProduct=[featuredProductsArray objectAtIndex:indexPath.row];
UIImageView* imageView=[[UIImageView alloc]initWithFrame:CGRectMake(10, 10, cell.frame.size.width-20, cell.frame.size.width-20)];
//imageView.image=[UIImage imageNamed:@"ad_share.png"];
NSString* imageUrl=[aProduct.SmallImageLists firstObject];
[imageView sd_setImageWithURL:[NSURL URLWithString:imageUrl]
placeholderImage:[UIImage imageNamed:@"ad_share.png"]];
[cell addSubview:imageView];
UILabel *lblTitle=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-60, cell.frame.size.width, 30)];
lblTitle.text=aProduct.DealTitle;
lblTitle.font=[UIFont fontWithName:@"HelveticaNeue-Thin" size:12.0];
lblTitle.textAlignment=NSTextAlignmentCenter;
[cell addSubview:lblTitle];
UILabel *lblPrice=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-30, cell.frame.size.width, 30)];
lblPrice.text=aProduct.DealPrice;
lblPrice.font=[UIFont fontWithName:@"HelveticaNeue-Bold" size:12.0];
lblPrice.textAlignment=NSTextAlignmentCenter;
[cell addSubview:lblPrice];
cell.backgroundColor=[UIColor colorWithRed:228.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:0.5];
[cell.layer setCornerRadius:5.0f];
[cell.layer setBorderColor:[UIColor lightGrayColor].CGColor];
[cell.layer setBorderWidth:0.2f];
[cell.layer setShadowColor:[UIColor colorWithRed:225.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:1.0].CGColor];
[cell.layer setShadowOpacity:1.0];
[cell.layer setShadowRadius:5.0];
[cell.layer setShadowOffset:CGSizeMake(5.0f, 5.0f)];
return cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(self.view.frame.size.width/2-10, self.view.frame.size.width/2+30);
}
截图如下
问题是因为单元格被重复使用了。每次重复使用它们时,您都会在单元格上添加更多标签和图像。这就是为什么您会看到标签重叠的原因。
在我看来,有两种方法可以修复它:
创建 UICollectionViewCell
的子类。在子类上初始化单元格时创建 UIImage
s 和 UILabel
s。在 cellForItemAtIndexPath
上使用 UIImage
s 和 UILabel
s 而无需再次初始化它们。例如
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
aProduct=[featuredProductsArray objectAtIndex:indexPath.row];
NSString* imageUrl=[aProduct.SmallImageLists firstObject];
[cell.imageView sd_setImageWithURL:[NSURL URLWithString:imageUrl]
placeholderImage:[UIImage imageNamed:@"ad_share.png"]];
cell.lblTitle.text=aProduct.DealTitle;
cell.lblTitle.font=[UIFont fontWithName:@"HelveticaNeue-Thin" size:12.0];
cell.lblTitle.textAlignment=NSTextAlignmentCenter;
cell.lblPrice.text=aProduct.DealPrice;
cell.lblPrice.font=[UIFont fontWithName:@"HelveticaNeue-Bold" size:12.0];
cell.lblPrice.textAlignment=NSTextAlignmentCenter;
cell.backgroundColor=[UIColor colorWithRed:228.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:0.5];
[cell.layer setCornerRadius:5.0f];
[cell.layer setBorderColor:[UIColor lightGrayColor].CGColor];
[cell.layer setBorderWidth:0.2f];
[cell.layer setShadowColor:[UIColor colorWithRed:225.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:1.0].CGColor];
[cell.layer setShadowOpacity:1.0];
[cell.layer setShadowRadius:5.0];
[cell.layer setShadowOffset:CGSizeMake(5.0f, 5.0f)];
return cell;
}
另一种方法是在重用时删除单元格的子视图。
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
// Remove subviews
for (UIView *v in cell.contentView.subviews) {
[v removeFromSuperview];
}
aProduct=[featuredProductsArray objectAtIndex:indexPath.row];
UIImageView* imageView=[[UIImageView alloc]initWithFrame:CGRectMake(10, 10, cell.frame.size.width-20, cell.frame.size.width-20)];
//imageView.image=[UIImage imageNamed:@"ad_share.png"];
NSString* imageUrl=[aProduct.SmallImageLists firstObject];
[imageView sd_setImageWithURL:[NSURL URLWithString:imageUrl]
placeholderImage:[UIImage imageNamed:@"ad_share.png"]];
[cell addSubview:imageView];
UILabel *lblTitle=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-60, cell.frame.size.width, 30)];
lblTitle.text=aProduct.DealTitle;
lblTitle.font=[UIFont fontWithName:@"HelveticaNeue-Thin" size:12.0];
lblTitle.textAlignment=NSTextAlignmentCenter;
[cell addSubview:lblTitle];
UILabel *lblPrice=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-30, cell.frame.size.width, 30)];
lblPrice.text=aProduct.DealPrice;
lblPrice.font=[UIFont fontWithName:@"HelveticaNeue-Bold" size:12.0];
lblPrice.textAlignment=NSTextAlignmentCenter;
[cell addSubview:lblPrice];
cell.backgroundColor=[UIColor colorWithRed:228.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:0.5];
[cell.layer setCornerRadius:5.0f];
[cell.layer setBorderColor:[UIColor lightGrayColor].CGColor];
[cell.layer setBorderWidth:0.2f];
[cell.layer setShadowColor:[UIColor colorWithRed:225.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:1.0].CGColor];
[cell.layer setShadowOpacity:1.0];
[cell.layer setShadowRadius:5.0];
[cell.layer setShadowOffset:CGSizeMake(5.0f, 5.0f)];
return cell;
}
你已经有了答案。但另一种解决方案是,因为每次您创建 UILabel 的新实例并将其添加到可重用单元格中时,这就是问题的原因。使用 viewwithtag 也应该适用于您的情况。例如。
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
aProduct=[featuredProductsArray objectAtIndex:indexPath.row];
UIImageView* imageView = [cell viewWithTag:10];
if (imageView == nil) {
imageView = [[UIImageView alloc]initWithFrame:CGRectMake(10, 10, cell.frame.size.width-20, cell.frame.size.width-20)];
imageView.tag = 10;
[cell addSubview:imageView];
}
imageView.image=[UIImage imageNamed:@"ad_share.png"];
NSString* imageUrl=[aProduct.SmallImageLists firstObject];
[imageView sd_setImageWithURL:[NSURL URLWithString:imageUrl]
placeholderImage:[UIImage imageNamed:@"ad_share.png"]];
UILabel *lblTitle = [cell viewWithTag:20];
if (lblTitle == nil) {
lblTitle=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-60, cell.frame.size.width, 30)];
lblTitle.tag = 20;
[cell addSubview:lblTitle];
}
lblTitle.text= aProduct.DealTitle;
lblTitle.font=[UIFont fontWithName:@"HelveticaNeue-Thin" size:12.0];
lblTitle.textAlignment=NSTextAlignmentCenter;
UILabel *lblPrice = [cell viewWithTag:30];
if (lblPrice == nil) {
lblPrice=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-30, cell.frame.size.width, 30)];
lblPrice.tag = 30;
[cell addSubview:lblPrice];
}
lblPrice.text= aProduct.DealPrice;
lblPrice.font=[UIFont fontWithName:@"HelveticaNeue-Bold" size:12.0];
lblPrice.textAlignment=NSTextAlignmentCenter;
cell.backgroundColor=[UIColor colorWithRed:228.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:0.5];
[cell.layer setCornerRadius:5.0f];
[cell.layer setBorderColor:[UIColor lightGrayColor].CGColor];
[cell.layer setBorderWidth:0.2f];
[cell.layer setShadowColor:[UIColor colorWithRed:225.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:1.0].CGColor];
[cell.layer setShadowOpacity:1.0];
[cell.layer setShadowRadius:5.0];
[cell.layer setShadowOffset:CGSizeMake(5.0f, 5.0f)];
return cell;
}
我已经实现了带有图像和标签的集合视图。图像工作正常,但标签重叠。我已经实现了所有必需的方法,但无法找到标签重叠的问题。下面提供了我的代码
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 40;
}
//loading data
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
aProduct=[featuredProductsArray objectAtIndex:indexPath.row];
UIImageView* imageView=[[UIImageView alloc]initWithFrame:CGRectMake(10, 10, cell.frame.size.width-20, cell.frame.size.width-20)];
//imageView.image=[UIImage imageNamed:@"ad_share.png"];
NSString* imageUrl=[aProduct.SmallImageLists firstObject];
[imageView sd_setImageWithURL:[NSURL URLWithString:imageUrl]
placeholderImage:[UIImage imageNamed:@"ad_share.png"]];
[cell addSubview:imageView];
UILabel *lblTitle=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-60, cell.frame.size.width, 30)];
lblTitle.text=aProduct.DealTitle;
lblTitle.font=[UIFont fontWithName:@"HelveticaNeue-Thin" size:12.0];
lblTitle.textAlignment=NSTextAlignmentCenter;
[cell addSubview:lblTitle];
UILabel *lblPrice=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-30, cell.frame.size.width, 30)];
lblPrice.text=aProduct.DealPrice;
lblPrice.font=[UIFont fontWithName:@"HelveticaNeue-Bold" size:12.0];
lblPrice.textAlignment=NSTextAlignmentCenter;
[cell addSubview:lblPrice];
cell.backgroundColor=[UIColor colorWithRed:228.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:0.5];
[cell.layer setCornerRadius:5.0f];
[cell.layer setBorderColor:[UIColor lightGrayColor].CGColor];
[cell.layer setBorderWidth:0.2f];
[cell.layer setShadowColor:[UIColor colorWithRed:225.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:1.0].CGColor];
[cell.layer setShadowOpacity:1.0];
[cell.layer setShadowRadius:5.0];
[cell.layer setShadowOffset:CGSizeMake(5.0f, 5.0f)];
return cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(self.view.frame.size.width/2-10, self.view.frame.size.width/2+30);
}
截图如下
问题是因为单元格被重复使用了。每次重复使用它们时,您都会在单元格上添加更多标签和图像。这就是为什么您会看到标签重叠的原因。
在我看来,有两种方法可以修复它:
创建
UICollectionViewCell
的子类。在子类上初始化单元格时创建UIImage
s 和UILabel
s。在cellForItemAtIndexPath
上使用UIImage
s 和UILabel
s 而无需再次初始化它们。例如- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath]; aProduct=[featuredProductsArray objectAtIndex:indexPath.row]; NSString* imageUrl=[aProduct.SmallImageLists firstObject]; [cell.imageView sd_setImageWithURL:[NSURL URLWithString:imageUrl] placeholderImage:[UIImage imageNamed:@"ad_share.png"]]; cell.lblTitle.text=aProduct.DealTitle; cell.lblTitle.font=[UIFont fontWithName:@"HelveticaNeue-Thin" size:12.0]; cell.lblTitle.textAlignment=NSTextAlignmentCenter; cell.lblPrice.text=aProduct.DealPrice; cell.lblPrice.font=[UIFont fontWithName:@"HelveticaNeue-Bold" size:12.0]; cell.lblPrice.textAlignment=NSTextAlignmentCenter; cell.backgroundColor=[UIColor colorWithRed:228.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:0.5]; [cell.layer setCornerRadius:5.0f]; [cell.layer setBorderColor:[UIColor lightGrayColor].CGColor]; [cell.layer setBorderWidth:0.2f]; [cell.layer setShadowColor:[UIColor colorWithRed:225.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:1.0].CGColor]; [cell.layer setShadowOpacity:1.0]; [cell.layer setShadowRadius:5.0]; [cell.layer setShadowOffset:CGSizeMake(5.0f, 5.0f)]; return cell; }
另一种方法是在重用时删除单元格的子视图。
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath]; // Remove subviews for (UIView *v in cell.contentView.subviews) { [v removeFromSuperview]; } aProduct=[featuredProductsArray objectAtIndex:indexPath.row]; UIImageView* imageView=[[UIImageView alloc]initWithFrame:CGRectMake(10, 10, cell.frame.size.width-20, cell.frame.size.width-20)]; //imageView.image=[UIImage imageNamed:@"ad_share.png"]; NSString* imageUrl=[aProduct.SmallImageLists firstObject]; [imageView sd_setImageWithURL:[NSURL URLWithString:imageUrl] placeholderImage:[UIImage imageNamed:@"ad_share.png"]]; [cell addSubview:imageView]; UILabel *lblTitle=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-60, cell.frame.size.width, 30)]; lblTitle.text=aProduct.DealTitle; lblTitle.font=[UIFont fontWithName:@"HelveticaNeue-Thin" size:12.0]; lblTitle.textAlignment=NSTextAlignmentCenter; [cell addSubview:lblTitle]; UILabel *lblPrice=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-30, cell.frame.size.width, 30)]; lblPrice.text=aProduct.DealPrice; lblPrice.font=[UIFont fontWithName:@"HelveticaNeue-Bold" size:12.0]; lblPrice.textAlignment=NSTextAlignmentCenter; [cell addSubview:lblPrice]; cell.backgroundColor=[UIColor colorWithRed:228.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:0.5]; [cell.layer setCornerRadius:5.0f]; [cell.layer setBorderColor:[UIColor lightGrayColor].CGColor]; [cell.layer setBorderWidth:0.2f]; [cell.layer setShadowColor:[UIColor colorWithRed:225.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:1.0].CGColor]; [cell.layer setShadowOpacity:1.0]; [cell.layer setShadowRadius:5.0]; [cell.layer setShadowOffset:CGSizeMake(5.0f, 5.0f)]; return cell; }
你已经有了答案。但另一种解决方案是,因为每次您创建 UILabel 的新实例并将其添加到可重用单元格中时,这就是问题的原因。使用 viewwithtag 也应该适用于您的情况。例如。
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
aProduct=[featuredProductsArray objectAtIndex:indexPath.row];
UIImageView* imageView = [cell viewWithTag:10];
if (imageView == nil) {
imageView = [[UIImageView alloc]initWithFrame:CGRectMake(10, 10, cell.frame.size.width-20, cell.frame.size.width-20)];
imageView.tag = 10;
[cell addSubview:imageView];
}
imageView.image=[UIImage imageNamed:@"ad_share.png"];
NSString* imageUrl=[aProduct.SmallImageLists firstObject];
[imageView sd_setImageWithURL:[NSURL URLWithString:imageUrl]
placeholderImage:[UIImage imageNamed:@"ad_share.png"]];
UILabel *lblTitle = [cell viewWithTag:20];
if (lblTitle == nil) {
lblTitle=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-60, cell.frame.size.width, 30)];
lblTitle.tag = 20;
[cell addSubview:lblTitle];
}
lblTitle.text= aProduct.DealTitle;
lblTitle.font=[UIFont fontWithName:@"HelveticaNeue-Thin" size:12.0];
lblTitle.textAlignment=NSTextAlignmentCenter;
UILabel *lblPrice = [cell viewWithTag:30];
if (lblPrice == nil) {
lblPrice=[[UILabel alloc]initWithFrame:CGRectMake(5, cell.frame.size.height-30, cell.frame.size.width, 30)];
lblPrice.tag = 30;
[cell addSubview:lblPrice];
}
lblPrice.text= aProduct.DealPrice;
lblPrice.font=[UIFont fontWithName:@"HelveticaNeue-Bold" size:12.0];
lblPrice.textAlignment=NSTextAlignmentCenter;
cell.backgroundColor=[UIColor colorWithRed:228.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:0.5];
[cell.layer setCornerRadius:5.0f];
[cell.layer setBorderColor:[UIColor lightGrayColor].CGColor];
[cell.layer setBorderWidth:0.2f];
[cell.layer setShadowColor:[UIColor colorWithRed:225.0/255.0 green:228.0/255.0 blue:228.0/255.0 alpha:1.0].CGColor];
[cell.layer setShadowOpacity:1.0];
[cell.layer setShadowRadius:5.0];
[cell.layer setShadowOffset:CGSizeMake(5.0f, 5.0f)];
return cell;
}