如何向UITableViewCell添加自定义分隔符?

时间:2013-02-08 07:41:40

标签: ios objective-c

请稍等一下,因为这是一个很长的解释

我有一个UIViewController,其中包含一个UIButton和一个UITableView,它会使用标识符UITableViewCell和{{1}加载不同类型的Cell1 },在按钮的事件Cell2上。我正在使用故事板。

两个单元格的分隔符都是自定义的。

touchUpInside有一个分隔符,它占据了单元格的整个宽度,单元格底部占据了1个像素的高度。

Cell1有一个分隔符,它与单元格的左右偏移量为5像素。

每次单击Cell2外的按钮时,都会根据单元格标识符交换tableView

最初tableViewCell占据tableView的完整宽度并由Cell1组成,但按下按钮,viewController s更改为Cell2和{{1}的帧更改,宽度减少10,x原点增加5。

但是当发生这种情况时,tableViewCell的分隔符与右边的单元格相距5个像素,但是在左边距离是5个像素。 对于加载了数据的所有tableView都会发生这种情况,并且没有相应数据的单元格会被适当更改。

但之后的单元格宽度为Cell2(宽度更大)

Cell2

4 个答案:

答案 0 :(得分:44)

您可以添加tableView的标准分隔线,并在每个单元格的顶部添加自定义行。

在以下代码中更改UIView hight / width / color / image 以设置separatorLine。

添加自定义分隔符的最简单方法是添加1px高度的简单UIView

UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 1)];/// change size as you need.
separatorLineView.backgroundColor = [UIColor grayColor];// you can also put image here
[cell.contentView addSubview:separatorLineView];

此代码可能会解决您的问题:)

答案 1 :(得分:2)

这样做的正确方法是在单元格类中使用分隔符,如果没有在其中添加分隔符图像变量,则为UITableViewCell的子类,并且在每个单元格创建上,您只需更改图像和框架而不是添加在每次重绘时。如果你需要一个代码,我也可以提供。目前,当重新绘制单元格时,它已经上次添加了您添加的图像,您只需再次添加该图像,或者在-prepareForReuse方法中删除它,或者按照我上面的说明进行操作。

***** Custom Cell *****
//
//  CustomCell.m
//  Custom
//
//  Created by Syed Arsalan Pervez on 2/8/13.
//  Copyright (c) 2013 SAPLogix. All rights reserved.
//

#import "CustomCell.h"

@implementation CustomCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Initialization code
        _separatorImage = [[UIImageView alloc] initWithFrame:CGRectZero];
        [[self contentView] addSubview:_separatorImage];
    }
    return self;
}

- (void)prepareForReuse
{
    _separatorImage.image = nil;
}

- (void)dealloc
{
    [_separatorImage release];
    [super dealloc];
}

@end

在视图控制器中使用上面的单元格。

***** Test View Controller *****
//
//  TestViewController.m
//  Custom
//
//  Created by Syed Arsalan Pervez on 2/8/13.
//  Copyright (c) 2013 SAPLogix. All rights reserved.
//

#import "TestViewController.h"
#import "CustomCell.h"

@interface TestViewController ()

@end

@implementation TestViewController

- (void)viewDidLoad
{
    [self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];

#warning TODO: set the image name here
    _separatorImage1 = [[UIImage imageNamed:@""] retain];
    _separatorImage2 = [[UIImage imageNamed:@""] retain];
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 2;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *_identifier = @"CustomCell";
    CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:_identifier];
    if (!cell)
    {
        cell = [[[CustomCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:_identifier] autorelease];
    }

    //Set Separator Image Here
    //Preload the image so it doesn't effect the scrolling performance
    CGRect frame = cell.contentView.frame;
    switch (indexPath.row)
    {
        case 0:
            cell.separatorImage.image = _separatorImage1;
            cell.separatorImage.frame = CGRectMake(0, CGRectGetMaxY(frame)-1, frame.size.width, 1);
            break;
        case 1:
            cell.separatorImage.image = _separatorImage2;
            cell.separatorImage.frame = CGRectMake(frame.origin.x+5, CGRectGetMaxY(frame)-1, frame.size.width-10, 1);
            break;
    }

    return cell;
}

- (void)dealloc
{
    [_separatorImage1 release];
    [_separatorImage2 release];

    [super dealloc];
}

@end

答案 2 :(得分:1)

我这样做......希望这可能会有所帮助。

//
//  UITableViewCell+MyAdditions.h
//
//  Created by Roberto O. Buratti on 19/02/14.
//

#import <UIKit/UIKit.h>

@interface UITableViewCell (MyAdditions)

@property (nonatomic,assign) UITableViewCellSeparatorStyle cellSeparatorStyle;
@property (nonatomic,strong) UIColor *cellSeparatorColor;

@end

//
//  UITableViewCell+MyAdditions.m
//
//  Created by Roberto O. Buratti on 19/02/14.
//

#import "UITableViewCell+MyAdditions.h"

NSString *const kUITablewViewCellSeparatorLayerName = @"kUITablewViewCellSeparatorLayerName";

@implementation UITableViewCell (MyAdditions)

-(CALayer *)separatorLayer
{
    for (CALayer *sublayer in self.layer.sublayers)
    {
        if ([sublayer.name isEqualToString:kUITablewViewCellSeparatorLayerName])
            return sublayer;
    }
    return nil;
}

-(CALayer *)newSeparatorLayer
{
    CALayer *separatorLayer = [CALayer layer];
    separatorLayer.name = kUITablewViewCellSeparatorLayerName;
    separatorLayer.frame = CGRectMake(0, self.bounds.size.height - 1, self.bounds.size.width, 1);
    separatorLayer.backgroundColor = [UIColor whiteColor].CGColor;
    [self.layer addSublayer:separatorLayer];
    return separatorLayer;
}

-(UITableViewCellSeparatorStyle)cellSeparatorStyle
{
    CALayer *separatorLayer = [self separatorLayer];
    if (separatorLayer == nil)
        return UITableViewCellSeparatorStyleNone;
    else
        return UITableViewCellSeparatorStyleSingleLine;
}

-(void)setCellSeparatorStyle:(UITableViewCellSeparatorStyle)separatorStyle
{
    CALayer *separatorLayer = [self separatorLayer];
    switch (separatorStyle)
    {
        case UITableViewCellSeparatorStyleNone:
            [separatorLayer removeFromSuperlayer];
            break;
        case UITableViewCellSeparatorStyleSingleLine:
            if (separatorLayer == nil)
                separatorLayer = [self newSeparatorLayer];
            break;
        default:
            @throw [NSException exceptionWithName:NSStringFromClass([self class]) reason:@"Unsupported separatorStyle" userInfo:nil];
            break;
    }
}

-(UIColor *)cellSeparatorColor
{
    CALayer *separatorLayer = [self separatorLayer];
    return [UIColor colorWithCGColor:separatorLayer.backgroundColor];
}

-(void)setCellSeparatorColor:(UIColor *)separatorColor
{
    CALayer *separatorLayer = [self separatorLayer];
    if (separatorLayer == nil)
        separatorLayer = [self newSeparatorLayer];
    separatorLayer.backgroundColor = separatorColor.CGColor;
}

@end

现在你可以做像

这样的事情
UITableViewCell *cell = ...
cell.cellSeparatorStyle = UITableViewCellSeparatorStyleSingleLine;
cell.cellSeparatorColor = [UIColor orangeColor];

答案 3 :(得分:0)

正如其他人所说,通常有两种方法可以做到这一点,要么创建1px的CALayerUIView分隔符,请将其添加到contentView

随着时间的推移,我发现多个项目以不同的方式执行此操作,有时甚至在相同的项目中采用多种不同的方式。由于细胞重用也容易引入错误,并且为了正确渲染像素线,必须包含屏幕比例:(1.0 / [UIScreen mainScreen].scale)

我创建了一个library,将其简化为单个方法类,不需要子类化。 https://github.com/kgaidis/KGViewSeparators

<强>目标C

[view kg_show:YES separator:KGViewSeparatorTop color:[UIColor blackColor] lineWidth:KGViewSeparatorLineWidth(1.0) insets:UIEdgeInsetsMake(0, 15.0, 0, 15.0)];

<强>夫特:

view.kg_show(true, separator: .Bottom, color: UIColor.blackColor(), lineWidth: KGViewSeparatorLineWidth(1.0), insets: UIEdgeInsetsZero)