Summary of three methods of setting full screen divider with uitableview in IOS

Time:2021-2-17

preface

This paper mainly summarizes three methods of setting full screen separator line with uitableview in IOS. Generally, there are three methods for setting full screen separator line in tableview

1. Customize the cell and add the split line manually

Hide your own


tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

You can add a split line by addsubview or draw a split line by yourself.

//Self drawing split line
- (void)drawRect:(CGRect)rect
{
 CGContextRef context = UIGraphicsGetCurrentContext();

 CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
 CGContextFillRect(context, rect);

 CGContextSetStrokeColorWithColor(context, [UIColor colorWithRed:0xE2/255.0f green:0xE2/255.0f blue:0xE2/255.0f alpha:1].CGColor);
 CGContextStrokeRect(context, CGRectMake(0, rect.size.height - 1, rect.size.width, 1));
}

2. Rewrite the setframe method of cell, height – 1, exposing the background color

- (void)setFrame:(CGRect)frame
{
 frame.size.height -= 1;
 //Assign value to cellframe
 [super setFrame:frame];
}

Cancels the system’s split line

Set tableview background color to split line color

//Cancel system split line
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
//Set tableview background color
self.tableView.backgroundColor = [UIColor colorWithWhite:215 / 255.0 alpha:1];

3. Using the system property setting (separator inset, layout margins), three codes need to be added

Setting the separatorinset, layoutmargins properties of tableview

-(void)viewDidLoad {
 [super viewDidLoad];
 //1. Adjust the separation line margin of (above ios7) table
 if ([self.tableView respondsToSelector:@selector(setSeparatorInset:)]) {
 self.tableView.separatorInset = UIEdgeInsetsZero;
 }
 //2. Adjust the view margin (above ios8) (or set the preservessuperviewlayoutmargins in the cell, the two are equivalent)
 if ([self.tableView respondsToSelector:@selector(setLayoutMargins:)]) {
 self.tableView.layoutMargins = UIEdgeInsetsZero;
 }
}

Setting the layoutmargins property of cell

The setting of cell can be written in cellforrowatindexpath or willdisplaycell method

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
 static NSString *ID = @"cell";
 FSDiscoverSpecialCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
 if (cell == nil) {
 cell = [[FSDiscoverSpecialCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID];
 }

 //2. Adjust (above ios8) tableview margin (equivalent to step 2 above, choose one from two)
 if ([cell respondsToSelector:@selector(setPreservesSuperviewLayoutMargins:)]) {
 cell.preservesSuperviewLayoutMargins = NO;
 }
 //3. Adjust the view margin (above ios8)
 if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
 [cell setLayoutMargins:UIEdgeInsetsZero];
 }
 return cell;
}

The advantages and disadvantages of the three methods are compared

Method 1 is easy to use, but in some cases, the system’s own cell is enough. Just for the separation line, you have to customize the cell, add a view, set the background color and frame, which is troublesome;

Method 2 is more ingenious, but it also needs to customize the cell. In some cases, it is not allowed to change the background color of tableview, and the use of the scene is limited;

Method 3 doesn’t need custom cell, just make a simple judgment on the system (IOS 7, IOS 8 or above). Unfortunately, many articles on the Internet are not written correctly, many people can’t use them correctly, and some people who can use them can’t explain the principle clearly, just copy and paste them

For example, it’s generally like this on the Internet. It takes four steps. Although it really works, it takes one more step atorInset:UIEdgeInsetsZero ]Moreover, the principle is not explained. It is estimated that it was written by a great God. I don’t care to explain too much, which makes me feel very depressed when I use it

First, add the following code to the viewdidload method:


-(void)viewDidLoad {
 [super viewDidLoad];
 if ([self.tableView respondsToSelector:@selector(setSeparatorInset:)]) {
 [self.tableView setSeparatorInset:UIEdgeInsetsZero];
 }
 if ([self.tableView respondsToSelector:@selector(setLayoutMargins:)]) {
 [self.tableView setLayoutMargins:UIEdgeInsetsZero];
}

Then add the following code to the willdisplaycell method:


- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
 if ([cell respondsToSelector:@selector(setSeparatorInset:)]) {
 [cell setSeparatorInset:UIEdgeInsetsZero];
 }
 if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
 [cell setLayoutMargins:UIEdgeInsetsZero];
 }
}

As a matter of fact, the principle that the dividing line can’t be full screen has been explained in the official document of apple. You can have a look at it

Before IOS 7, the system was full screen by default. In IOS 7, the uitableview has the property separatorinset, which can be viewed in the header file of uitableview, as follows:


@property (nonatomic) UIEdgeInsets separatorInset NS_AVAILABLE_IOS(7_0) UI_APPEARANCE_SELECTOR; 
// allows customization of the frame of cell separators

In IOS 7, you can set this property to uiedgeinsetszero

After IOS 8, you can’t just complete the above settings. After careful inspection, you find that the header file of uiview in IOS 8 has an additional layoutmargins attribute with official comments


@property (nonatomic) UIEdgeInsets layoutMargins NS_AVAILABLE_IOS(8_0);

/*
 -layoutMargins returns a set of insets from the edge of the view’s bounds that denote a default spacing for laying out content.
 If preservesSuperviewLayoutMargins is YES, margins cascade down the view tree, adjusting for geometry offsets, so that setting the left value of layoutMargins on a superview will affect the left value of layoutMargins for subviews positioned close to the left edge of their superview’s bounds
 If your view subclass uses layoutMargins in its layout or drawing, override -layoutMarginsDidChange in order to refresh your view if the margins change.
 */

Layoutmargins is the margins of the borders of the view, which is used to adjust the default margins of the content

If the preservessuperviewlayoutmargins property is yes, setting the layoutmargins margin of the parent control will affect the layoutmargins of all child controls relative to the borders of the parent control

If your view subclass uses the layoutmargins property in layout or drawing, you need to override the – layoutmarginsdidchange method to refresh your view when the margin changes

Just because layoutmargins is a new attribute of uiview, tablet and cell, as subclasses of uiview, have this attribute. Therefore, compared with IOS 7 system, there are two more steps after IOS 8. The layoutmargins attribute of tableview and cell must be processed at the same time to make the separator line full screen

At the same time, the description of the property “preservessuperviewlayoutmargins” in the official comment can also show that another method on the Internet does not set itself.tableView.layoutMargins = UIEdgeInsetsZero;It’s settingscell.preservesSuperviewLayoutMargins = NO;Why does it work

Make clear these principles, you can better memory and use these methods, not every time to the old code search or Baidu

At the end of the day, I don’t know if you’re a little familiar with the attribute of layoutmargins, the culprit that affects the full screen of the divider line. In fact, it has done a lot of evil in another place. In the storyboard:

PS: the effect picture is as follows:

Rendering before setting:

Set up step 1self.tableView.separatorInset = UIEdgeInsetsZero;The final effect picture:

Set up step 2self.tableView.layoutMargins = UIEdgeInsetsZero;The final effect picture:

Set up step 3cell.layoutMargins = UIEdgeInsetsZero;The final effect picture:

Attachment: set the distance between the cell dividing line of uitableview and the left and right of the screen to 0

In the development, sometimes for the sake of beautiful interface, it is necessary to show that the left and right spacing of the dividing line of the graph is 0, which shows the following effect

Sometimes you can directly cancel the split line of the table view, and then directly add a line in the cell, which can also meet the requirements. Another method is to change the offset of the split line inside the table view. The specific code is as follows:


if ([_tableView respondsToSelector:@selector(setSeparatorInset:)]) { 
    [_tableView setSeparatorInset:UIEdgeInsetsMake(0,0,0,0)]; 
  } 
   
  if ([_tableView respondsToSelector:@selector(setLayoutMargins:)]) { 
    [_tableView setLayoutMargins:UIEdgeInsetsMake(0,0,0,0)]; 
  } 
//Proxy method 
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
  if ([cell respondsToSelector:@selector(setSeparatorInset:)]) { 
    [cell setSeparatorInset:UIEdgeInsetsZero]; 
  } 
   
  if ([cell respondsToSelector:@selector(setLayoutMargins:)]) { 
    [cell setLayoutMargins:UIEdgeInsetsZero]; 
  } 
}

In this way, the full grid display of cell division line is realized.

summary

The above is the whole content of this article, I hope the content of this article has a certain reference value for your study or work, if you have any questions, you can leave a message to exchange, thank you for your support for developer.