在iOS 6中实现iOS 7 UITableViewCell分组样式

时间:2014-09-01 13:21:41

标签: objective-c uitableview

我试图" flatize"我的应用程序在iOS 6中实现了与iOS 7 UITableView分组相同的外观,因此我已经将UITableViewCell子类化并应用了此代码:

-(void)setFrame:(CGRect)frame{
    if (self.superview) {
        if (!IS_IOS7){
            float cellWidth;

            if (IS_IPAD){
                cellWidth = 870;
            }
            else{
                cellWidth = 350;
            }
            frame.origin.x  = (self.superview.frame.size.width - cellWidth) / 2;
            frame.size.width = cellWidth;
        }
    }
    [super setFrame:frame];
}

它工作正常,但我必须在cellForRow方法中手动调整单元格的插入。

我尝试将表设置为plain,删除了空单元格,但标题没有修复,所以我尝试将其设置为tableHeaderView但由于searchBar没有按预期工作。

那么,有没有更好,更清洁的方法来实现它我失踪了?

1 个答案:

答案 0 :(得分:3)

以下是如何使UITableView看起来就像iOS 6和7上的iOS 7分组样式一样。这是一种非常手动的方法,但它看起来很有用。

1)创建一个UITableViewCell子类。在标题中,定义一个枚举来处理分组位置的类型。另外还有一种设置值的方法。

- (void)setGroupedStyle:(MMTableViewCellGroupStyle)groupedStyle;

typedef NS_ENUM(NSUInteger, MMTableViewCellGroupStyle) {
    MMTableViewCellGroupStyleSingle,
    MMTableViewCellGroupStyleTop,
    MMTableViewCellGroupStyleBottom,
    MMTableViewCellGroupStyleMiddle
};

2)在UITableViewCell子类中,根据细胞的分组样式为细胞创建UIView。您需要创建一个自定义UIView类,在drawRect:中绘制1条像素线,根据线条位置将颜色对齐到顶部或底部。您还需要手动缩进中间单元格底部的行。

我很快就把它掀起了,所以它不是清理过的最干的代码,只是让你有了一个想法。另请注意,我没有创建UIView子类来为视网膜设备绘制1条像素线,这只是创建了1点线的视图。留给读者的练习=)

#define CELL_LEFT_INSET 20.0f
- (void)setGroupedStyle:(MMTableViewCellGroupStyle)groupedStyle
{
    [self.lines makeObjectsPerformSelector:@selector(removeFromSuperview)];
    switch (groupedStyle) {
        case MMTableViewCellGroupStyleSingle: {
            UIView *top = [[UIView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.frame), 1.0f)];
            top.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin;

            UIView *bottom = [[UIView alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(self.frame) - 1.0f, CGRectGetWidth(self.frame), 1.0f)];
            bottom.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;

            self.lines = @[top, bottom];
            break;
        }
        case MMTableViewCellGroupStyleTop: {
            UIView *top = [[UIView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.frame), 1.0f)];
            top.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin;

            UIView *bottom = [[UIView alloc] initWithFrame:CGRectMake(CELL_LEFT_INSET, CGRectGetHeight(self.frame) - 1.0f, CGRectGetWidth(self.frame) - CELL_LEFT_INSET, 1.0f)];
            bottom.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;

            self.lines = @[top, bottom];
            break;
        }
        case MMTableViewCellGroupStyleMiddle: {
            UIView *bottom = [[UIView alloc] initWithFrame:CGRectMake(CELL_LEFT_INSET, CGRectGetHeight(self.frame) - 1.0f, CGRectGetWidth(self.frame) - CELL_LEFT_INSET, 1.0f)];
            bottom.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;

            self.lines = @[bottom];
            break;
        }
        case MMTableViewCellGroupStyleBottom: {
            UIView *bottom = [[UIView alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(self.frame) - 1.0f, CGRectGetWidth(self.frame), 1.0f)];
            bottom.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;

            self.lines = @[bottom];
            break;
        }
    }
    for (UIView *line in self.lines) {
        line.backgroundColor = [UIColor blackColor];
        [self addSubview:line];
    }
}

3)在UITableViewDataSource中配置单元格时,为每个单元格设置适当的groupStyle。

MMTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];

if ([tableView numberOfRowsInSection:indexPath.section] == 1) {
    [cell setGroupedStyle:MMTableViewCellGroupStyleSingle];
} else if (indexPath.row == 0) {
    [cell setGroupedStyle:MMTableViewCellGroupStyleTop];
} else if (indexPath.row == ([tableView numberOfRowsInSection:indexPath.section] - 1)) {
    [cell setGroupedStyle:MMTableViewCellGroupStyleBottom];
} else {
    [cell setGroupedStyle:MMTableViewCellGroupStyleMiddle];
}

4)在UITableViewDataSource返回sectionFOOTERs的高度。这将是各部分之间的空白空间。实现该方法以返回页脚视图以返回空的UIView。

5)确保为每个分组部分使用部分。在最顶部添加一个额外的部分,因为你需要额外的空间来引导第一部分。