如何在iOS 9.0或更高版本中将tableview单元格转换为带有阴影的圆角

Question

I want to show tableview cell like above image. Please help me out.

Answer 1

To show rounded corner cell you can set corner radius.

For the current design you can create a custom UItableViewCell and set corner radius to it.

yourCustomCell.layer.cornerradius = 6.0f

In that UItableViewCell you need to add other labels as per your requirement.

Answer 2

If you use normal table view cell

cell.contentView.layer.cornerRadius = 7.0f;
cell.contentView.layer.masksToBounds = YES;

If you use custom table view cell

cell.layer.cornerRadius = 7.0f;
cell.layer.masksToBounds = YES;

clear background color of UITableView in storyboard. Then you will be able to see the change.

For Cell Row Height

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
  return 44;  //It default size.If you want to change to other size you can change.
}

Answer 3

Try this step you display image like:

you are add one view and top = 8, bottom = 8, left = 16, right = 16 set constraint in cell content view.

view.layer.cornerradius = 5.0f;

table background color set clear.

Answer 4

If you want rounded corners and shadow in an UITableviewCell you need to implement a (custom) UIView in the cell.

One way doing that is:

@interface customCell ()

@property (strong, nonatomic) IBOutlet UIView *someView;

@end

@implementation customCell

- (void)awakeFromNib {
    [super awakeFromNib];

    //Set the corner radius
    self.someView.layer.cornerRadius = 5.0f;

    // Add shadow
    [self applyShadow];
}
- (void)applyShadow {
    // Add shadow
    [self.layer setShadowColor:[[UIColor blackColor] CGColor]];
    [self.layer setShadowOffset:CGSizeMake(0, 2)];
    [self.layer setShadowRadius:2.0];
    [self.layer setShadowOpacity:0.5];
    self.clipsToBounds = false;
    self.layer.masksToBounds = false;
}

Answer 5

Add the custom View to the table View cell and set the below class:

CustomView.h

#import <UIKit/UIKit.h>
#import "Common.h"
@interface CustomView : UIView
{
    IBInspectable UIColor *startColor;
    IBInspectable UIColor *endColor;
}
@end

CustomView.m

#import "CustomView.h"
IB_DESIGNABLE
@implementation CustomView
- (void)drawRect:(CGRect)rect
{
    CGContextRef context=UIGraphicsGetCurrentContext();
    UIColor *ShadowColor=[UIColor colorWithRed:0.2 green:0.2 blue:0.2 alpha:1.0];
    UIColor *backGround=[UIColor whiteColor];
    CGFloat outerMagian=2.0;
    CGRect outerRect=CGRectInset(self.bounds, outerMagian, outerMagian);
    CGPathRef outerPath=createRoundedRectForRect(outerRect, 0.0);
    CGContextSaveGState(context);
        CGContextSetShadowWithColor(context, CGSizeMake(2, 2), 3.0, ShadowColor.CGColor);
        CGContextSetFillColorWithColor(context, backGround.CGColor);
       CGContextAddPath(context, outerPath);
    CGContextFillPath(context);
    CGContextRestoreGState(context);
    CGFloat borderMarian=1.0;
    CGRect borderRect=CGRectInset(self.bounds, borderMarian, borderMarian);
    CGPathRef borderPath=createRoundedRectForRect(borderRect, 0.0);
    CGContextSaveGState(context);
    CGContextSetLineWidth(context, 2.0);
    CGContextSetStrokeColorWithColor(context, [UIColor colorWithRed:21.0/255.0 green:92.0/255.0 blue:136.0/255.0 alpha:1.0].CGColor);
    CGContextAddPath(context, borderPath);
    CGContextStrokePath(context);
    CGContextRestoreGState(context);
    CGPathRelease(outerPath);
    CGPathRelease(borderPath);
    UIBezierPath *path=[UIBezierPath bezierPathWithRoundedRect:outerRect cornerRadius:0.0];
    [path addClip];
    drawLinearGradient(context,outerRect, startColor.CGColor, endColor.CGColor);
}

@end

Common.h

#import <Foundation/Foundation.h>
#import <CoreGraphics/CoreGraphics.h>
@interface Common : NSObject
CGMutablePathRef createRoundedRectForRect(CGRect rect, CGFloat radius);
void drawLinearGradient(CGContextRef context, CGRect rect, CGColorRef startColor, CGColorRef endColor);
@end

Common.m

#import "Common.h"

@implementation Common
CGMutablePathRef createRoundedRectForRect(CGRect rect, CGFloat radius)
{

    CGMutablePathRef path=CGPathCreateMutable();

    CGPathMoveToPoint(path, NULL, CGRectGetMidX(rect), CGRectGetMinY(rect));
    CGPathAddArcToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMinY(rect), CGRectGetMaxX(rect), CGRectGetMaxY(rect), radius);
    CGPathAddArcToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMaxY(rect), CGRectGetMinX(rect), CGRectGetMaxY(rect), radius);
    CGPathAddArcToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMaxY(rect), CGRectGetMinX(rect), CGRectGetMinY(rect), radius);
    CGPathAddArcToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect), CGRectGetMaxX(rect), CGRectGetMinY(rect), radius);
    CGPathCloseSubpath(path);
    return path;
}
void drawLinearGradient(CGContextRef context, CGRect rect, CGColorRef startColor, CGColorRef endColor)
{
    CGColorSpaceRef colorSpace=CGColorSpaceCreateDeviceRGB();
    CGFloat locations[]={0.0,1.0};
    NSArray *color=@[(__bridge id)startColor,(__bridge id)endColor];
    CGGradientRef gradient=CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)color, locations);

    CGPoint startPoint=CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    CGPoint endPoint=CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

    CGContextSaveGState(context);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);

    CGContextRestoreGState(context);
    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);
}

@end