[Ios Learning Record]-How to customize the rounded cell of UITableView

[Ios Learning Record]-How to customize the rounded cell of UITableView

Since ios7 was updated, the corner style of the UITableView control has changed from the default rounded corner to the right corner, which is more suitable for the flat UI design. However, in some cases, if the tableview width is not extended to the same width as the parent view, tableview with a right angle will not look good. Shows the group list.

If the rounded corner is used at this time, it will show a round and gentle display, and the user will feel nice and have a good experience. As shown in.

To achieve the rounded corner effect of the group tableview, the Core Graphics API is used for layer re-painting. Therefore, based on the information found on the Internet and the information collected by individuals, here we mainly implement the willDisplayCell function in the UITableViewDelegate protocol to perform custom cell operations.

Main ideas:
Cell background color is set to transparent-> New Layer-> corner rectangle layer drawing-> assign this layer as a child layer to UIView-> UIView to cell backgroundView. The core code is pasted with the most detailed comments.

/*** The cell will be drawn for each row. You can customize the cell Display Method */-(void) tableView :( UITableView *) tableView willDisplayCell :( UITableViewCell *) cell forRowAtIndexPath :( NSIndexPath *) indexPath {if ([cell respondsToSelector: @ selector (tintColor)]) {if (tableView = self. mainTableView) {// The Arc Radius of the rounded corner CGFloat cornerRadius = 5.f; // set the background color of the cell to transparent. If this is not set, the original background color will not be overwritten by the cell. backgroundColor = UIColor. clearColor; // create a shapeLayer case ELayer * layer = [[CAShapeLayer alloc] init]; // create a variable image Path handle, which is used to save the drawing information CGMutablePathRef pathRef = CGPathCreateMutable (); // obtain the cell size CGRect bounds = CGRectInset (cell. bounds, 0, 0); // CGRectGetMinY: returns the vertex coordinate of the object // CGRectGetMaxY: returns the coordinate of the base vertex of the object // CGRectGetMinX: returns the coordinate of the left edge of the object // CGRectGetMaxX: returns the coordinates of the right edge of the object. // The first row in the group list, the last row of each section, and BOOL addLine = NO in the middle of each section; // CGPathAddRoundedRect (pathRef, nil, B Ounds, cornerRadius, cornerRadius); if (indexPath. row = 0) {// The initial start point is the coordinate CGPathMoveToPoint (pathRef, nil, CGRectGetMinX (bounds), CGRectGetMaxY (bounds) in the lower left corner of the cell. // The starting coordinate is the lower left corner, set it to p1, (CGRectGetMinX (bounds), CGRectGetMinY (bounds) as the point in the upper left corner, p1 (x1, y1), (CGRectGetMidX (bounds), CGRectGetMinY (bounds )) it is the point at the top of the vertex, set to p2 (x2, y2 ). Connect p1 and p2 as a straight line l1, connect the initial point p to p1 into a straight line l, then draw a rounded corner with the radian as r at the intersection of the two straight lines, add the straight lines and rounded corners on the left to the path. Round (pathRef, nil, CGRectGetMinX (bounds), CGRectGetMinY (bounds), CGRectGetMidX (bounds), CGRectGetMinY (bounds), cornerRadius); // draw rounded corners in the upper right corner, contains the top straight lines and rounded corners in the upper right corner, and writes them to paths (pathRef, nil, CGRectGetMaxX (bounds), counts (bounds), CGRectGetMidY (bounds), and cornerRadius ); // The right straight line path is written to the path, which forms a rectangle CGPathAddLineToPoint (pathRef, nil, CGRectGetMaxX (bounds), CGRectGetMaxY (bounds) with rounded corners in the upper left and upper right corner )); addLine = YES;} else if (indexPath. row = [tableView numberOfRowsInSection: indexPath. section]-1) {// The initial start point is the upper-left coordinate CGPathMoveToPoint (pathRef, nil, CGRectGetMinX (bounds), CGRectGetMinY (bounds) of the cell )); // Add the straight lines on the left and rounded corner paths in the lower left to path paths (pathRef, nil, CGRectGetMinX (bounds), counts (bounds), CGRectGetMaxY (bounds), and cornerRadius ); // Add the bottom-side straight line and bottom-right corner paths to path seek (pathRef, nil, CGRectGetMaxX (bounds), seek (bounds), CGRectGetMaxX (bounds), CGRectGetMidY (bounds), and corner ); // Add the right line to the path. At this time, the path forms a rectangle CGPathAddLineToPoint (pathRef, nil, CGRectGetMaxX (bounds), CGRectGetMinY (bounds) with rounded corners in the lower and lower corners ));} else {// intermediate line, directly add rectangle information to path (excluding rounded corners) CGPathAddRect (pathRef, nil, bounds); addLine = YES ;} // assign the drawn variable image path to the layer. path = pathRef; // Note: CFRelease (pathRef) must be released for any value created by using the creat/copy/retain method in Quartz2D ); // fill the color according to the path of the shape layer, similar to rendering the render layer. fillColor = [UIColor colorWithWhite: 1.f alpha: 0.8f]. CGColor; // Add the separator layer if (addLine = YES) {CALayer * lineLayer = [[CALayer alloc] init]; CGFloat lineHeight = (1.f/[UIScreen mainScreen]. scale); lineLayer. frame = CGRectMake (CGRectGetMinX (bounds), bounds. size. height-lineHeight, bounds. size. width, lineHeight); // The separator line color is taken from the original tableview separator line color lineLayer. backgroundColor = tableView. separatorColor. CGColor; // Add a child layer [layer addSublayer: lineLayer];} // view size consistent with cell UIView * roundView = [[UIView alloc] initWithFrame: bounds]; // Add the child layer after the custom rounded corner to roundView [roundView. layer insertSublayer: layer atIndex: 0]; roundView. backgroundColor = UIColor. clearColor; // cell background view // cell. selectedBackgroundView = roundView; cell. backgroundView = roundView ;}}}

Function Analysis:

CGPathAddArcToPoint (p1, nil, x1, y1, x2, y2, r); // Add the rounded corner path drawn from the start and end to the graphics path, including the straight line and rounded corner.

The path of the red edge is written into the path.

Draw the path process:

// Only list the lower-left coordinate CGPathMoveToPoint (pathRef, nil, CGRectGetMinX (bounds), CGRectGetMaxY (bounds) of the cell at the initial start point )); // The starting coordinate is in the lower left corner, set to p1, (CGRectGetMinX (bounds), CGRectGetMinY (bounds) is the point in the upper left corner, and set to p1 (x1, y1 ), (CGRectGetMidX (bounds), CGRectGetMinY (bounds) is the point in the top vertex, set to p2 (x2, y2 ). Connect p1 and p2 as a straight line l1, connect the initial point p to p1 into a straight line l, then draw the arc of r at the intersection of the two straight lines. CGPathAddArcToPoint (pathRef, nil, CGRectGetMinX (bounds), CGRectGetMinY (bounds), CGRectGetMidX (bounds), CGRectGetMinY (bounds), cornerRadius );

// Draw the rounded corner in the upper right corner, including the top line and the rounded corner path in the upper right corner, and write CGPathAddArcToPoint (pathRef, nil, CGRectGetMaxX (bounds), CGRectGetMaxX (bounds ), CGRectGetMidY (bounds), cornerRadius );

// The right straight line path is written into the path, forming a rectangle with rounded corners in the upper left and upper right corner, and then calling layer. fillColor = [UIColor colorWithWhite: 1.f alpha: 0.8f]. CGColor;, color filling Based on the path of the layer drawing path, equivalent to the rendering function CGPathAddLineToPoint (pathRef, nil, CGRectGetMaxX (bounds), CGRectGetMaxY (bounds ));

Simple rounded cell implementation OK! The overall code can be downloaded here: CornerRadiusTableView