UITableView設定全屏分隔線的幾種方法比較

史前圖騰發表於2017-12-13
UIView

一般TableView設定全屏分隔線有下面三種方法

1.自定義cell,手動新增分割線

  • 隱藏自帶的 tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

  • 可以通過addSubview的方式新增一條分割線；也可以自繪分割線。

// 自繪分割線
- (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.重寫cell的setFrame方法,高度-1,露出背景色

- (void)setFrame:(CGRect)frame
{
    frame.size.height -= 1;
    // 給cellframe賦值
    [super setFrame:frame];
}
複製程式碼
  • 取消系統的分割線
  • 設定tableView背景色為分割線顏色
 // 取消系統分割線
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    // 設定tableView背景色
    self.tableView.backgroundColor = [UIColor colorWithWhite:215 / 255.0 alpha:1];
複製程式碼

3.利用系統屬性設定(separatorInset, layoutMargins)共需新增三句程式碼:

  • 對tableView的separatorInset, layoutMargins屬性的設定
-(void)viewDidLoad {
    [super viewDidLoad];
    //1.調整(iOS7以上)表格分隔線邊距
    if ([self.tableView respondsToSelector:@selector(setSeparatorInset:)]) {
        self.tableView.separatorInset = UIEdgeInsetsZero;
    }
    //2.調整(iOS8以上)view邊距(或者在cell中設定preservesSuperviewLayoutMargins,二者等效)
    if ([self.tableView respondsToSelector:@selector(setLayoutMargins:)]) {
        self.tableView.layoutMargins = UIEdgeInsetsZero;
    }
}
複製程式碼
  • 對cell的LayoutMargins屬性的設定
對cell的設定可以寫在cellForRowAtIndexPath裡,也可以寫在willDisplayCell方法裡

-(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.調整(iOS8以上)tableView邊距(與上面第2步等效,二選一即可)
    if ([cell respondsToSelector:@selector(setPreservesSuperviewLayoutMargins:)]) {
        cell.preservesSuperviewLayoutMargins = NO;
    }
   //3.調整(iOS8以上)view邊距
    if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
        [cell setLayoutMargins:UIEdgeInsetsZero];
    }
    return cell;
}
複製程式碼

三種方法優缺點比較:

  • 方法1是比較好用的,但是有些情況下系統自帶的cell就足夠用了,僅僅為了分隔線卻還必須再自定義cell,新增一個view,設定背景顏色和frame,又顯得麻煩;

  • 方法2比較取巧,但是也需要自定義cell,在某些情況下不允許改變tableView的背景色,使用場景有限;

  • 方法3不需要自定義cell,對系統(iOS7,iOS8以上)做個簡單判斷即可.可惜網上很多文章寫的不對,很多人不會正確使用,有些會用的人也說不清楚原理,只管複製貼上. 比如網上流傳的一般是這樣,需要四步,雖然真的管用,但多了一步[cell setSeparatorInset:UIEdgeInsetsZero];而且原理也沒講,估計是某大神寫的,根本不屑於過多解釋,讓我用起來很鬱悶,網上流傳程式碼:

首先在viewDidLoad方法中加上如下程式碼：
-(void)viewDidLoad {
    [super viewDidLoad];
    if ([self.tableView respondsToSelector:@selector(setSeparatorInset:)]) {
    [self.tableView setSeparatorInset:UIEdgeInsetsZero];
    }
    if ([self.tableView respondsToSelector:@selector(setLayoutMargins:)]) {
    [self.tableView setLayoutMargins:UIEdgeInsetsZero];
}
然後在willDisplayCell方法中加入如下程式碼：
- (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];
    }
}
複製程式碼

其實關於分隔線不能全屏的原理,蘋果官方在檔案中已經說明了,可以去看一下

在iOS7之前系統預設就是全屏的,iOS7時UITableView多了separatorInset屬性,可在UITableView的標頭檔案中檢視,如下:

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

iOS7時只要設定該屬性為UIEdgeInsetsZero就沒有問題了.

iOS8之後僅僅完成以上設定就不行了,仔細檢視後發現iOS8的UIView 的標頭檔案裡又多了個layoutMargins屬性,並有官方註釋

@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是view的bounds的邊距,用來調整內容預設邊距

如果preservesSuperviewLayoutMargins屬性是YES,那麼設定父控制元件的layoutMargins邊距,
就會影響所有子控制元件的相對於父控制元件bounds的layoutMargins邊距

如果你的view的子類在佈局或者繪圖中使用了layoutMargins屬性,需要重寫-layoutMarginsDidChange 方法,
以便當邊距改變時能重新整理你的view

複製程式碼

正是因為layoutMargins是UIView的新增屬性,tablet和cell作為UIView的子類都有這個屬性,所以相比較iOS7系統,iOS8之後就多了兩步,必須同時再對tableView和cell的layoutMargins屬性進行處理,才能讓分隔線真正全屏.

同時官方註釋中對preservesSuperviewLayoutMargins(意即:維持父控制元件的佈局邊距)屬性的說明,也正好能說明網上另一種方法不設定self.tableView.layoutMargins = UIEdgeInsetsZero;而是設定cell.preservesSuperviewLayoutMargins = NO;為什麼也能起作用

弄清楚了這些原理,就可以更好的記憶和使用這些方法,不用每次都去舊程式碼查詢或者去百度了.

說到了最後,不知道大家有沒有覺得影響分隔線全屏的元凶layoutMargins屬性 稍微有點眼熟呢?其實它在另一個地方也做了不少惡,就在storyboard中:

QQ20150413-000@2x.png

PS:附效果圖如下:

設定之前效果圖:

QQ20150411-111@2x.png
設定完第1步self.tableView.separatorInset = UIEdgeInsetsZero;後效果圖:
QQ20150411-222@2x.png
設定完第2步self.tableView.layoutMargins = UIEdgeInsetsZero;後效果圖:
QQ20150411-333@2x.png
設定完第3步cell.layoutMargins = UIEdgeInsetsZero;後效果圖:
QQ20150411-444@2x.png

相關文章