1. 程式人生 > >UITableViewCell分隔線的全屏寬度和高度

UITableViewCell分隔線的全屏寬度和高度

方式一:自定義Cell,重寫setFrame:方法,在呼叫父類方法[super setFrame:fame];之前減掉cell的高度:frame.size.height -= 10;減去的值即為分隔線的寬度;
方式二:自定義使用UIView作為分隔線;
方式三:設定iOS8中的tableView中的分隔線內邊距separatorInset為Zero,cell的佈局外邊距layoutMargins為Zero;

方式一:萬能方式(推薦使用該方式:重寫Cell的setFrame方法)

1. 取消系統自帶的分隔線
2. 設定tabView的backgroundColor等於分隔線的顏色
3. 重寫cell類的setFrame方法,修改cell的高度
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
self.tableView.backgroundColor = RGB(220, 220, 221);

// CustomCell.m
- (void)setFrame:(CGRect)frame {
    frame.size.height -= 10;    // 減掉的值就是分隔線的高度
    [super setFrame:frame];
}

實現原理:
想辦法在[tableView addSubview:cell]之前修改cell.frame,只要能讓下個cell和上個cell保持一個間距,那麼這個間距就可以被看做分隔線;為了讓cell之間保持一個小間隙有兩種做法,一種是調整cell.origin.y的值,將縱座標的值稍微調大些,另一種是y值保持不變,減少cell的高度,由於y值不變,高度變小了,間隙就空出來了。

要確定cell.frame: 首先x, width的值是固定的x=0; width = ScreenWidth; 只有y的值和height的值是動態變化的,而y的值由height決定,因系統首先會呼叫tableView的代理方法heightForRowAtIndexPath,拿到每個Cell對應的高度,這樣高度就確定了,y值也就能確定了,cell.frame = CGRectMake(0, y, ScreenWidth, 代理方法heightForRowAtIndexPath獲取);
如果使用調整cell的高度方式注意需要在heightForRowAtIndexPath中返回的高度出來cell本身的高度還要再加上間隙的高度,這樣在setFrame中又減去了分隔線的高度,這樣就保證了cell的高度不變;

減小Cell的高度方式核心思想是:因在代理方法heightForRowAtIndexPath中返回值為:cell.height + separatorHeight= 100 + 10; 高度確定了,該cell的y座標就確定了,因y座標的計算是相對於100 + 10 = 110的,此時如果不調整cell.height出現的效果是cell的高度110,每個cell間是緊密相連,中間沒有任何空隙。如果此時減小高度了,因y的值是相對於110計算的,此時就會有個10的間隙。
例如正常情況下:
Cell1:{(0, 0), (375, 110)} ; Cell2:{(0, 110), (375, 110)}
中間間隙=cell2.origin.y - cell1.size.height = 110 - 110 = 0;
減小cell的高度情況下:
Cell1:{(0, 0), (375, 100)}; Cell2:{(0, 110), (375, 100)}
中間間隙=cell2.origin.y - cell1.size.height = 110 - 100 = 10; 上下cell之間就有個10的間隙可以被看做cell的分隔線

Demo:

#import "ViewController.h"
#import "XXTableViewCell.h"

@interface ViewController () <UITableViewDataSource, UITableViewDelegate>
@property (strong, nonatomic) NSArray *dataSource;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) style:UITableViewStylePlain];
    tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    tableView.backgroundColor = [UIColor grayColor];
    tableView.delegate = self;
    tableView.dataSource = self;
    [tableView registerClass:[XXTableViewCell class] forCellReuseIdentifier:NSStringFromClass([self class])];
    [self.view addSubview:tableView];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.dataSource.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    XXTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([self class])];
    cell.textLabel.text = self.dataSource[indexPath.row];


    return cell;
}

- (NSArray *)dataSource {
    if (_dataSource == nil) {
        _dataSource = @[@"1", @"2", @"3", @"4"];
    }

    return _dataSource;
}


- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 100 + 10;  // cell.height + spearatorHeight
}
@end
#import "XXTableViewCell.h"

@implementation XXTableViewCell

- (void)setFrame:(CGRect)frame {

    frame.size.height -= 10;
    NSLog(@"%@", NSStringFromCGRect(frame));

    [super setFrame:frame];
}

@end

這裡寫圖片描述

方式二:取消系統自帶的分隔閒,自定義分隔線,使用UIView,將高度設定為1

方式三:使用iOS8.0系統屬性

  1. 首先設定分隔線的內邊距為0
    self.tableView.separatorInset = UIEdgeInsetsZero;

  2. 其次在自定義的cell中設定自動佈局的約束邊距為0

- (void)awakeFromNib {
    self.layoutMargins = UIEdgeInsetsZero;
}

這樣分隔線的寬度就和螢幕一樣寬了

相關推薦

UITableViewCell分隔寬度高度

方式一:自定義Cell,重寫setFrame:方法,在呼叫父類方法[super setFrame:fame];之前減掉cell的高度:frame.size.height -= 10;減去的值即為分隔線的寬度; 方式二:自定義使用UIView作為分隔線

JS獲取幕的寬度高度

邊線 spa top offset nbsp log off document color <html> <script>   function a(){     document.write(     "屏幕分辨率為:"+screen.width

JS,Jquery獲取各種幕的寬度高度

fun 寬度 屏幕分辨率 高度 add IE outer 屏幕 rip Javascript: 網頁可見區域寬: document.body.clientWidth 網頁可見區域高: document.body.clientHeight 網頁可見區域寬: document.

js、jq獲取幕的寬度高度

scrollto adding scroll jquery java add query bsp javascrip Javascript: 網頁可見區域寬: document.body.clientWidth 網頁可見區域高: document.body.client

CODEVS 1501二叉樹最大寬度高度

它的 logs nbsp 二叉 ace 最小寬度 最大 -h blog 題目描述 Description 給出一個二叉樹,輸出它的最大寬度和高度。 輸入描述 Input Description 第一行一個整數n。 下面n行每行有兩個數,對於第i行的兩個數

jsjquery如何獲取圖片真實的寬度高度_javascript技巧

寬高 clas 獲取 deb 問題 網頁 log css www. 在做pc網頁的時候,有時候會考慮按照插入的圖片的尺寸來判斷圖片是橫圖還是豎圖。然後判斷過後給予不同的展示方式! 另外一種就是在手機頁面上,在新聞頁插入的圖片往往都是按照圖片的原尺寸來展示,如果手機屏幕太小,

JavaPOI設置Excel單元格的寬度高度

mvc sco .html adb cvs docs sm3 shuf a10 uq1m1u杖刳苯嗆逼日http://docstore.docin.com/gde52315jdyl昂抗掌冶闌錘http://jz.docin.com/dqgis813189o011z殘豢忍縷仁

瀏覽器寬度高度的說明

工作區 eve post off mage 技術 title www. gpo IE中: document.body.clientWidth ==> BODY對象寬度 document.body.clientHeight ==> BODY對象高度 docume

18.2.14 codevs1501 二叉樹最大寬度高度

isp 連接 左右 ron esp color 整數 end codevs 題目描述 Description 給出一個二叉樹,輸出它的最大寬度和高度。 輸入描述 Input Description 第一行一個整數n。 下面n行每行有兩

2018.3.26 1501 二叉樹最大寬度高度

一個空格 post 12px 一行 個數 padding pac ide urn 題目描述 給出一個二叉樹,輸出它的最大寬度和高度。 輸入描述 第一行一個整數n。下面n行每行有兩個數,對於第i行的兩個數,代表編號為i的節點所連接的兩個左右兒子的編號。如果沒有某個兒子

Js 中一系列寬度高度的學習

頁面 chrome html5 影響 float 20px 我們 一個 完全   在學習元素一系列寬度和高度之前,我們先來看一個平時開發中幾乎不會遇到的問題,那就是html文檔聲明<!DOCTYPE html> 確實會對元素的寬高產生影響。幾乎不會遇到,是因為我

常用宏定義 - 獲取橫豎寬度高度

ive allow resp selector 橫豎 clas version nat main 需要橫屏或者豎屏,獲取屏幕寬度與高度 #if __IPHONE_OS_VERSION_MAX_ALLOWED >= 80000 // 當前Xcode支持iOS8及以上

獲取網頁瀏覽器視窗的寬度高度

情況一: // 獲取瀏覽器視窗可視區域的寬度 不包含滾動條 var width=document.body.clientWidth; // 獲取網頁內容的實際高度 var height=document.body.clientHeight; console.log(width,height

獲取圖片實際渲染的寬度高度與圖片原始的寬度高度

  在寫頁面時經常會遇到需要獲取圖片的寬度、高度等情況。然而以前總是獲取的是圖片實際渲染的寬度和高度,也就是你用css或js設定後的圖片的寬度和高度,並不是圖片原始的尺寸。今天突然遇到這個問題,一時之間不知如何做,查了下資料,自己摸索了一下。特此總結一下。   例如。有這樣一張圖片,程式碼如下:  

react native獲取螢幕的寬度高度

var Dimensions = require('Dimensions'); var {width,height} = Dimensions.get("window");//第一種寫法 var width1 = Dimensions.get('window').width//第二種寫法 expor

Android 獲取 螢幕寬度高度——獲取文字高度寬度

獲得螢幕寬度和高度 //直接在子元件中 1、WindowManager wm = (WindowManager) getContext() .getSystemService(Context.WINDOW_SERVI

Android獲得螢幕寬度高度

//直接在子元件中 1、WindowManager wm = (WindowManager) getContext()                     .getSystemService(Context.WINDOW_SERVICE);        //目前版本已經

不確定元素寬度高度時實現居中

一、在元素高度、寬度已知時,實現水平垂直居中就很簡單了 1 .position_all{ 2 width: 600px; 3 height: 400px; 4 position: absolute; 5 top: 50%; 6 left: 50%; 7 margin

Apache POI 設定Excel單元格的寬度高度

原博作者:Tony Qu 原博連結 在Excel中,單元格的寬度其實就是列的寬度,因為Excel假設這一列的單元格的寬度肯定一致。所以要設定單元格的寬度,我們就得從列的寬度下手,HSSFSheet有個方法叫SetColumnWidth,共有兩個引數:一個是列的索引(從0開始),一個是

關於span標籤的寬度高度設定

正常情況下我們設定span標籤是無法設定span標籤的寬度和高度的。那麼怎樣才能設定呢。個人感覺意義並不大,如果需要可以使用div。 span是有display:inline-block和float屬性的,只要設定了這兩個屬性,就會認為它是一個塊級元素。 下面是例子: &l