像iPad上的``设置''应用中的iOS 7 TableView

Question

我想有风格同样喜欢iPad的设置应用程序的一组UITableView的详细视图用于iOS的7。它是带有圆角的tableView。请检查附件了解详细信息。是一些默认设置以使其看起来像这样，还是我们需要对其进行一些自定义绘制。正确方向的任何提示将不胜感激。谢谢

Answer 1

我继续并进一步自定义了willDisplayCell，以便在设置应用中更好地模拟单元格样式。

目标C

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath

{

    if ([cell respondsToSelector:@selector(tintColor)]) {

        if (tableView == self.tableView) {

            CGFloat cornerRadius = 5.f;

            cell.backgroundColor = UIColor.clearColor;

            CAShapeLayer *layer = [[CAShapeLayer alloc] init];

            CGMutablePathRef pathRef = CGPathCreateMutable();

            CGRect bounds = CGRectInset(cell.bounds, 10, 0);

            BOOL addLine = NO;

            if (indexPath.row == 0 && indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) {

                CGPathAddRoundedRect(pathRef, nil, bounds, cornerRadius, cornerRadius);

            } else if (indexPath.row == 0) {

                CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds));

                CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), cornerRadius);

                CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);

                CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds));

                addLine = YES;

            } else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) {

                CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds));

                CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMidX(bounds), CGRectGetMaxY(bounds), cornerRadius);

                CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);

                CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds));

            } else {

                CGPathAddRect(pathRef, nil, bounds);

                addLine = YES;

            }

            layer.path = pathRef;

            CFRelease(pathRef);

            layer.fillColor = [UIColor colorWithWhite:1.f alpha:0.8f].CGColor;

            if (addLine == YES) {

                CALayer *lineLayer = [[CALayer alloc] init];

                CGFloat lineHeight = (1.f / [UIScreen mainScreen].scale);

                lineLayer.frame = CGRectMake(CGRectGetMinX(bounds)+10, bounds.size.height-lineHeight, bounds.size.width-10, lineHeight);

                lineLayer.backgroundColor = tableView.separatorColor.CGColor;

                [layer addSublayer:lineLayer];

            }

            UIView *testView = [[UIView alloc] initWithFrame:bounds];

            [testView.layer insertSublayer:layer atIndex:0];

            testView.backgroundColor = UIColor.clearColor;

            cell.backgroundView = testView;

        }

    }

}

迅速

override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {

    if (cell.respondsToSelector(Selector("tintColor"))){

        if (tableView == self.tableView) {

            let cornerRadius : CGFloat = 12.0

            cell.backgroundColor = UIColor.clearColor()

            var layer: CAShapeLayer = CAShapeLayer()

            var pathRef:CGMutablePathRef = CGPathCreateMutable()

            var bounds: CGRect = CGRectInset(cell.bounds, 25, 0)

            var addLine: Bool = false

            if (indexPath.row == 0 && indexPath.row == tableView.numberOfRowsInSection(indexPath.section)-1) {

                CGPathAddRoundedRect(pathRef, nil, bounds, cornerRadius, cornerRadius)

            } else if (indexPath.row == 0) {

                CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds))

                CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), cornerRadius)

                CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius)

                CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds))

                addLine = true

            } else if (indexPath.row == tableView.numberOfRowsInSection(indexPath.section)-1) {

                CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds))

                CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMidX(bounds), CGRectGetMaxY(bounds), cornerRadius)

                CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius)

                CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds))

            } else {

                CGPathAddRect(pathRef, nil, bounds)

                addLine = true

            }

            layer.path = pathRef

            layer.fillColor = UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 0.8).CGColor

            if (addLine == true) {

                var lineLayer: CALayer = CALayer()

                var lineHeight: CGFloat = (1.0 / UIScreen.mainScreen().scale)

                lineLayer.frame = CGRectMake(CGRectGetMinX(bounds)+10, bounds.size.height-lineHeight, bounds.size.width-10, lineHeight)

                lineLayer.backgroundColor = tableView.separatorColor.CGColor

                layer.addSublayer(lineLayer)

            }

            var testView: UIView = UIView(frame: bounds)

            testView.layer.insertSublayer(layer, atIndex: 0)

            testView.backgroundColor = UIColor.clearColor()

            cell.backgroundView = testView

        }

    }

}

迅捷3

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {

    let cornerRadius: CGFloat = 5

    cell.backgroundColor = .clear

    let layer = CAShapeLayer()

    let pathRef = CGMutablePath()

    let bounds = cell.bounds.insetBy(dx: 20, dy: 0)

    var addLine = false

    if indexPath.row == 0 && indexPath.row == tableView.numberOfRows(inSection: indexPath.section) - 1 {

        pathRef.__addRoundedRect(transform: nil, rect: bounds, cornerWidth: cornerRadius, cornerHeight: cornerRadius)

    } else if indexPath.row == 0 {

        pathRef.move(to: .init(x: bounds.minX, y: bounds.maxY))

        pathRef.addArc(tangent1End: .init(x: bounds.minX, y: bounds.minY), tangent2End: .init(x: bounds.midX, y: bounds.minY), radius: cornerRadius)

        pathRef.addArc(tangent1End: .init(x: bounds.maxX, y: bounds.minY), tangent2End: .init(x: bounds.maxX, y: bounds.midY), radius: cornerRadius)

        pathRef.addLine(to: .init(x: bounds.maxX, y: bounds.maxY))

        addLine = true

    } else if indexPath.row == tableView.numberOfRows(inSection: indexPath.section) - 1 {

        pathRef.move(to: .init(x: bounds.minX, y: bounds.minY))

        pathRef.addArc(tangent1End: .init(x: bounds.minX, y: bounds.maxY), tangent2End: .init(x: bounds.midX, y: bounds.maxY), radius: cornerRadius)

        pathRef.addArc(tangent1End: .init(x: bounds.maxX, y: bounds.maxY), tangent2End: .init(x: bounds.maxX, y: bounds.midY), radius: cornerRadius)

        pathRef.addLine(to: .init(x: bounds.maxX, y: bounds.minY))

    } else {

        pathRef.addRect(bounds)

        addLine = true

    }

    layer.path = pathRef

    layer.fillColor = UIColor(white: 1, alpha: 0.8).cgColor

    if (addLine == true) {

        let lineLayer = CALayer()

        let lineHeight = 1.0 / UIScreen.main.scale

        lineLayer.frame = CGRect(x: bounds.minX + 10, y: bounds.size.height - lineHeight, width: bounds.size.width - 10, height: lineHeight)

        lineLayer.backgroundColor = tableView.separatorColor?.cgColor

        layer.addSublayer(lineLayer)

    }

    let testView = UIView(frame: bounds)

    testView.layer.insertSublayer(layer, at: 0)

    testView.backgroundColor = .clear

    cell.backgroundView = testView

}

斯威夫特4.2

override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {

    if (cell.responds(to: #selector(getter: UIView.tintColor))){

        if tableView == self.tableView {

            let cornerRadius: CGFloat = 12.0

            cell.backgroundColor = .clear

            let layer: CAShapeLayer = CAShapeLayer()

            let path: CGMutablePath = CGMutablePath()

            let bounds: CGRect = cell.bounds

            bounds.insetBy(dx: 25.0, dy: 0.0)

            var addLine: Bool = false

            if indexPath.row == 0 && indexPath.row == ( tableView.numberOfRows(inSection: indexPath.section) - 1) {

                path.addRoundedRect(in: bounds, cornerWidth: cornerRadius, cornerHeight: cornerRadius)

            } else if indexPath.row == 0 {

                path.move(to: CGPoint(x: bounds.minX, y: bounds.maxY))

                path.addArc(tangent1End: CGPoint(x: bounds.minX, y: bounds.minY), tangent2End: CGPoint(x: bounds.midX, y: bounds.minY), radius: cornerRadius)

                path.addArc(tangent1End: CGPoint(x: bounds.maxX, y: bounds.minY), tangent2End: CGPoint(x: bounds.maxX, y: bounds.midY), radius: cornerRadius)

                path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))

            } else if indexPath.row == (tableView.numberOfRows(inSection: indexPath.section) - 1) {

                path.move(to: CGPoint(x: bounds.minX, y: bounds.minY))

                path.addArc(tangent1End: CGPoint(x: bounds.minX, y: bounds.maxY), tangent2End: CGPoint(x: bounds.midX, y: bounds.maxY), radius: cornerRadius)

                path.addArc(tangent1End: CGPoint(x: bounds.maxX, y: bounds.maxY), tangent2End: CGPoint(x: bounds.maxX, y: bounds.midY), radius: cornerRadius)

                path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.minY))

            } else {

                path.addRect(bounds)

                addLine = true

            }

            layer.path = path

            layer.fillColor = UIColor.white.withAlphaComponent(0.8).cgColor

            if addLine {

                let lineLayer: CALayer = CALayer()

                let lineHeight: CGFloat = 1.0 / UIScreen.main.scale

                lineLayer.frame = CGRect(x: bounds.minX + 10.0, y: bounds.size.height - lineHeight, width: bounds.size.width, height: lineHeight)

                lineLayer.backgroundColor = tableView.separatorColor?.cgColor

                layer.addSublayer(lineLayer)

            }

            let testView: UIView = UIView(frame: bounds)

            testView.layer.insertSublayer(layer, at: 0)

            testView.backgroundColor = .clear

            cell.backgroundView = testView

        }

    }

}

iOS7上的示例

Answer 2

以了解如何设置单元格的背景视图，以使整个单元格看起来都不会突出显示。希望这可以帮助。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    InfoCell *cell;

    ...

    if ([cell respondsToSelector:@selector(tintColor)]) {

        cell.selectedBackgroundView = [self backgroundCellView:cell indexPath:indexPath tableView:tableView];

    }

    return cell;

}

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath

{

    if ([cell respondsToSelector:@selector(tintColor)]) {

        cell.backgroundColor = UIColor.clearColor;

        UIColor *cellColor = [UIColor colorWithWhite:0.90f alpha:.95f];

        CAShapeLayer *layer = [self tableView:tableView layerForCell:cell forRowAtIndexPath:indexPath withColor:cellColor];

        CGRect bounds = CGRectInset(cell.bounds, 10, 0);

        UIView *testView = [[UIView alloc] initWithFrame:bounds];

        [testView.layer insertSublayer:layer atIndex:0];

        testView.backgroundColor = UIColor.clearColor;

        cell.backgroundView = testView;

    }

}

- (UIView *)backgroundCellView:(InfoCell *)cell indexPath:(NSIndexPath *)indexPath tableView:(UITableView *)tableView

{

    UIColor *cellColor = [UIColor lightGrayColor];

    CAShapeLayer *layer = [self tableView:tableView layerForCell:cell forRowAtIndexPath:indexPath withColor:cellColor];

    CGRect bounds = CGRectInset(cell.bounds, 10, 0);

    UIView *testView = [[UIView alloc] initWithFrame:bounds];

    [testView.layer insertSublayer:layer atIndex:0];

    return testView;

}

- (CAShapeLayer *)tableView:(UITableView *)tableView layerForCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath withColor:(UIColor *)color

{

    CGFloat cornerRadius = 5.f;

    CAShapeLayer *layer = [[CAShapeLayer alloc] init];

    CGMutablePathRef pathRef = CGPathCreateMutable();

    CGRect bounds = CGRectInset(cell.bounds, 10, 0);

    BOOL addLine = NO;

    if (indexPath.row == 0 && indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) {

        CGPathAddRoundedRect(pathRef, nil, bounds, cornerRadius, cornerRadius);

    } else if (indexPath.row == 0) {

        CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds));

        CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), cornerRadius);

        CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);

        CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds));

        addLine = YES;

    } else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section]-1) {

        CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds));

        CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMidX(bounds), CGRectGetMaxY(bounds), cornerRadius);

        CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius);

        CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds));

    } else {

        CGPathAddRect(pathRef, nil, bounds);

        addLine = YES;

    }

    layer.path = pathRef;

    CFRelease(pathRef);

    //        layer.fillColor = [UIColor colorWithWhite:1.f alpha:1.0f].CGColor;

    layer.fillColor = color.CGColor;

    if (addLine == YES) {

        CALayer *lineLayer = [[CALayer alloc] init];

        CGFloat lineHeight = (1.f / [UIScreen mainScreen].scale);

        lineLayer.frame = CGRectMake(CGRectGetMinX(bounds)+10, bounds.size.height-lineHeight, bounds.size.width-10, lineHeight);

        lineLayer.backgroundColor = tableView.separatorColor.CGColor;

        [layer addSublayer:lineLayer];

    }

    return layer;

}