关于cell部分圆角,类似iPad 设置页面(附加点击效果设置)

关于cell部分圆角,类似iPad 设置页面(附加点击效果设置)_第1张图片
类似图片

这还不算,还要在 section 的四周加上边线,还得有点击效果!

一开始,整个人都不好了,后来还是在神战搜到了一些解决方案,最后结合了2个方法并在一起,终于算是实现了。不过必须iOS8 以上才行。
iOS7 的话,边线就得再想方法了,圆角可以实现。

原解决方案链接,可以去看看
http://stackoverflow.com/questions/18822619/ios-7-tableview-like-in-settings-app-on-ipad

下面 贴个我整理过的 解决方案。稍微解释一下:

  • 在cell 本身初始化里绘制,由于自动布局呢,肯定是不行的。
  • 这里的解决方案呢是绘制一个圆角路径的Layer 加在cell 的backgroundView 上,这样圆角就有了。
  • 但是呢cell 点击就很难弄。所以在此又覆盖了一层蒙板mask,遮住了其他不想要显示的东东(iOS8+,但是Layer 本身就有mask,个人觉得再改改应该也是可以的,顺便深入研究以下Layer)
  • 暂时 iOS7,下面的MaskLayer 不要了,而且点击效果也不能有。自行判断一下好了。

// 在cellWillDisplayCell 中添加
 - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    [self addRoundedCornersWithRadius:10 forTableView:tableView forCell:cell atIndexPath:indexPath];
}

/*!
 *  添加 cell 圆角 与 边线(willDisplayCell 中添加)
 *
 *  @param radius    圆角
 *  @param tableView tableView
 *  @param cell      cell
 *  @param indexPath index
 */
- (void)addRoundedCornersWithRadius:(CGFloat)radius forTableView:(UITableView *)tableView forCell:(UITableViewCell *)cell atIndexPath:(NSIndexPath *)indexPath {

    if ([cell respondsToSelector:@selector(tintColor)]) {
        
        if (tableView == self.setupTableView) {
            
            NSInteger sectionCount = [tableView numberOfRowsInSection:indexPath.section] - 1;// section row 个数
            CGRect bounds = CGRectInset(cell.bounds, 40, 0); // 显示的cell 点击区域

            // 1.新 layer 用于添加 cell 边线
            CAShapeLayer *newlayer = [[CAShapeLayer alloc] init];
            CGMutablePathRef pathRef = CGPathCreateMutable();
            
            // 2.再盖一个 mask
            CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];// 用于蒙板
            
            // section 只有一个时。
            if (indexPath.row == 0 && indexPath.row == sectionCount) {
                
                CGPathAddRoundedRect(pathRef, nil, bounds, radius, radius);
                
                [maskLayer setPath:[UIBezierPath bezierPathWithRoundedRect:bounds cornerRadius:radius].CGPath];

            // 第一个 row
            } else if (indexPath.row == 0) {

                CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds));//左下
                CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), radius);// 左上
                CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), radius);// 右上
                CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds));// 右下
                CGPathAddLineToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds));// 下线

                [maskLayer setPath:[UIBezierPath bezierPathWithRoundedRect:bounds
                                                         byRoundingCorners:(UIRectCornerTopLeft|UIRectCornerTopRight)
                                                               cornerRadii:CGSizeMake(radius, radius)].CGPath];
                
            // 最后一个 row
            } else if (indexPath.row == sectionCount) {
                
                CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds));// 左上
                CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMidX(bounds), CGRectGetMaxY(bounds), radius);// 左下
                CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), radius);// 右下
                CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds));// 右上
                
                
                [maskLayer setPath:[UIBezierPath bezierPathWithRoundedRect:bounds
                                                         byRoundingCorners:(UIRectCornerBottomLeft|UIRectCornerBottomRight)
                                                               cornerRadii:CGSizeMake(radius, radius)].CGPath];
                
            // 中间 row
            } else {
                
                CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds));// 左上
                CGPathAddLineToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds));// 左下
                CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds));// 右下
                CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds));// 右上
                
                UIBezierPath *path = [UIBezierPath bezierPathWithRect:bounds];
                [maskLayer setPath:path.CGPath];

            }
            
            // 1.新添加的layer 设置属性
            newlayer.path = pathRef;
            CFRelease(pathRef);
            newlayer.fillColor = [UIColor whiteColor].CGColor;
            newlayer.strokeColor = [UIColor colorForHex:@"dddddd"].CGColor;
            newlayer.lineWidth = 1.;
            
            UIView *testView = [[UIView alloc] initWithFrame:bounds];
            [testView.layer insertSublayer:newlayer atIndex:0];
            testView.backgroundColor = [UIColor clearColor];
            cell.backgroundView = testView;
            
            
            // 2.mask
            [cell setMaskView:[[UIView alloc] initWithFrame:cell.bounds]];
            [cell.maskView.layer insertSublayer:maskLayer atIndex:0];
            maskLayer.borderColor = [UIColor redColor].CGColor;
            
            [cell.maskView.layer setMasksToBounds:YES];
            [cell setClipsToBounds:YES];

        }
    }
}

顺便 贴以下 cell 选中效果设置

- (void)awakeFromNib {
    [super awakeFromNib];
    
    self.title.highlightedTextColor = [UIColor colorForHex:@"ffffff"];
    self.title.textColor = [UIColor colorForHex:@"80808a"];
 }

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    UIView *backGroundView = [[UIView alloc]initWithFrame:self.bounds];
    backGroundView.backgroundColor = [UIColor whiteColor];// 背景底,上面随便加
  
    self.selectedBackgroundView  = backGroundView;
}

你可能感兴趣的:(关于cell部分圆角,类似iPad 设置页面(附加点击效果设置))