UITableView is one of the most commonly used iOS controls, so we can create a UITableView as shown in the following image. The white part of the UITableView is the cell, but the default UITableView has no space between cells. There are two ways to do it on the Internet, and I’ll mention them in passing




2. PNG

1. The first method is indirectly realized by setting the cell’s contentView, leaving a certain distance at the top or bottom of the cell’s contentView, so as to have the effect of spacing between cells. However, when the cell is clicked in this way, it will be obvious that there is a layer, because at this time the cell is clicked, and the contentView will have the shadow effect of the system clicked. In this way, when the cell is left to delete, top, etc., the left view will be partially higher (height displayed by the left slide = (height of the cell – spacing height left) + spacing height left), which is obviously fatal. **

The Header of each group can be regarded as the spacing between cells. There is only one cell in each group. The code is as follows:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 10; } - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { return 10; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return 1; } - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 100; }Copy the code

But there’s still a problem with that, because by default the group Header is at the top of the TableView, so how do you do that? There is also a solution online

- (void)scrollViewDidScroll:(UIScrollView *)scrollView { if (scrollView == self.tableView) { CGFloat sectionHeaderHeight = 10; if (scrollView.contentOffset.y <= sectionheaderheight="" &&="" scrollview.contentoffset.y="">= 0) { scrollView.contentInset = UIEdgeInsetsMake(-scrollView.contentOffset.y, 0, 0, 0); } else if (scrollView.contentOffset.y >= sectionHeaderHeight) { scrollView.contentInset = UIEdgeInsetsMake(-sectionHeaderHeight, 0, 0, 0); }}}Copy the code

But this way is to listen to and change the contentInset of the TableView by using the Scroll offset, because the UITableView is always running as long as it’s scrolling, which isn’t very good.

The elegant and easiest way to do this is to simply shrink the cell in a UITableView so that the base color of the UITableView is the color of the splitter line, which is orange in the image above. This method simply overrides the cell’s setFrame method

-(void)setFrame:(CGRect)frame { frame.origin.x = 10; Width -= 2 * frame.origination. X; frame.size.height -= 2 * frame.origin.x; [super setFrame:frame]; }Copy the code

If you want rounded corners, it’s easy to add

self.layer.masksToBounds = YES; Self. Layer. The cornerRadius = 8.0;Copy the code

The effect picture at this time:




PNG rounded rectangle cell.png