iOS學習之UITableView(收藏貼)

iOS學習之UITableView

 

UITableView

UITableView繼承自UIScrollView,能夠用來展現一組或多組內容樣式類似的數據。UITableView幾乎是iOS開發中運用最多的UI控件了,是iOS開發中必須掌握的控件之一。html

什麼是UITableView?

在衆多移動應用中,能看到各式各樣的列表數據:數組

  

在iOS中,要實現展現列表數據,最經常使用的作法就是使用UITableView。UITableView繼承自UIScrollView,所以支持垂直滾動,並且性能極佳。緩存

UITableView的兩種樣式:

  • UITableViewStylePlain:

  • UITableViewStyleGrouped:

UITableViewCell簡介:

  • UITableView的每一行都是一個UITableViewCell,經過dataSource的tableView:cellForRowAtIndexPath:方法來初始化每一行。markdown

  • UITableViewCell內部有個默認的子視圖:contentView,contentView是UITableViewCell所顯示內容的父視圖,可顯示一些輔助指示視圖。ide

  • 輔助指示視圖的做用是顯示一個表示動做的圖標,能夠經過設置UITableViewCell的accessoryType來顯示,默認是UITableViewCellAccessoryNone(不顯示輔助指示視圖),其餘值以下:
    • UITableViewCellAccessoryDisclosureIndicator 
    • UITableViewCellAccessoryDetailButton 
    • UITableViewCellAccessoryDetailDisclosureButton 
    • UITableViewCellAccessoryCheckmark 
    • 還能夠經過cell的accessoryView屬性來自定義輔助指示視圖(好比往右邊放一個開關)

UITableViewCell的contentView:

  • contentView下默認有3個子視圖
    • 其中2個是UILabel(經過UITableViewCell的textLabel和detailTextLabel屬性訪問)
    • 第3個是UIImageView(經過UITableViewCell的imageView屬性訪問)
  • UITableViewCell還有一個UITableViewCellStyle屬性,用於決定使用contentView的哪些子視圖,以及這些子視圖在contentView中的位置

UITableView的常見屬性:

/* tableView的樣式 */ @property (nonatomic, readonly) UITableViewStyle style; // tableView有兩種樣式 // UITableViewStylePlain 普通的表格樣式 // UITableViewStyleGrouped 分組模式 /* tableView的數據源 */ @property (nonatomic, weak, nullable) id <UITableViewDataSource> dataSource; /* tableView的代理 */ @property (nonatomic, weak, nullable) id <UITableViewDelegate> delegate; #pragma mark - 高度相關 /* tableView每一行的高度,默認爲44 */ @property (nonatomic) CGFloat rowHeight; /* tableView統一的每一組頭部的高度 */ @property (nonatomic) CGFloat sectionHeaderHeight; /* tableView統一的每一組頭部的高度 */ @property (nonatomic) CGFloat sectionFooterHeight; /* 估算的tableView的統一的每一行行高 */ @property (nonatomic) CGFloat estimatedRowHeight; /* 估算的統一的每一組頭部高度,設置估算高度能夠優化性能 */ @property (nonatomic) CGFloat estimatedSectionHeaderHeight; /* 估算的統一的每一組的尾部高度 */ @property (nonatomic) CGFloat estimatedSectionFooterHeight; /* 總共有多少組 */ @property (nonatomic, readonly) NSInteger numberOfSections; /* 選中行的indexPath */ @property (nonatomic, readonly, nullable) NSIndexPath *indexPathForSelectedRow; #pragma mark - 索引條 /* 索引條文字的顏色 */ @property (nonatomic, strong, nullable) UIColor *sectionIndexColor; /* 索引條的背景色 */ @property (nonatomic, strong, nullable) UIColor *sectionIndexBackgroundColor; #pragma mark - 分隔線 /* 分隔線的樣式 */ @property (nonatomic) UITableViewCellSeparatorStyle separatorStyle; // 分隔線的樣式有: // UITableViewCellSeparatorStyleNone, 沒有分隔線 // UITableViewCellSeparatorStyleSingleLine, 正常分隔線 @property (nonatomic, strong, nullable) UIColor *separatorColor; // 分隔線的顏色 #pragma mark - 頭尾部控件 /* tableView的頭部控件,只能設置高度,寬度默認填充表格 */ @property (nonatomic, strong, nullable) UIView *tableHeaderView; /* tableView的尾部控件,只能設置高度,寬度默認填充表格*/ @property (nonatomic, strong, nullable) UIView *tableFooterView; #pragma mark - 編輯模式 /* 是不是編輯模式,默認是NO */ @property (nonatomic, getter=isEditing) BOOL editing; /* tableView處在編輯模式的時候是否容許選中行,默認是NO */ @property (nonatomic) BOOL allowsSelectionDuringEditing; /* tableView處在編輯模式的時候是否容許選中多行數據,默認是NO */ @property (nonatomic) BOOL allowsMultipleSelectionDuringEditing;

UITableViewCell的常見屬性:

#pragma mark - Cell內部子控件 /* 默認爲nil,imageView是懶加載,用到時才加載 */ @property (nonatomic, readonly, strong, nullable) UIImageView *imageView; /* 默認爲nil,是懶加載,用到時才加載 */ @property (nonatomic, readonly, strong, nullable) UILabel *textLabel; /* 只有當Cell的樣式爲UITableViewCellStyleSubtitle時纔會顯示出來,默認爲nil,是懶加載,用到時才加載 */ @property (nonatomic, readonly, strong, nullable) UILabel *detailTextLabel; /* 當你想要自定義一個cell的時候,子控件最好添加到cell的contentView上,方便編輯表格 */ @property (nonatomic, readonly, strong) UIView *contentView; /* cell的複用標識 */ @property (nonatomic, readonly, copy, nullable) NSString *reuseIdentifier; /* cell的選中樣式 */ @property (nonatomic) UITableViewCellSelectionStyle selectionStyle; /* cell是不是選中狀態 */ @property (nonatomic, getter=isSelected) BOOL selected; /* cell的編輯樣式,默認是UITableViewCellEditingStyleNone */ @property (nonatomic, readonly) UITableViewCellEditingStyle editingStyle; // cell的編輯樣式有: // UITableViewCellEditingStyleNone, // UITableViewCellEditingStyleDelete, 刪除模式 // UITableViewCellEditingStyleInsert 插入模式 /* 指示器的樣式,默認是UITableViewCellAccessoryNone */ @property (nonatomic) UITableViewCellAccessoryType accessoryType; // 指示器的樣式有: // UITableViewCellAccessoryNone 不顯示指示器 // UITableViewCellAccessoryDisclosureIndicator cell右側顯示一個箭頭 // UITableViewCellAccessoryDetailDisclosureButton cell右側顯示一個箭頭和一個詳情圖標 // UITableViewCellAccessoryCheckmark cell右側顯示一個對勾 // UITableViewCellAccessoryDetailButton cell右側顯示一個詳情圖標 /* cell右側指示器view,設置了之後,cell的accessoryType就會失效 */ @property (nonatomic, strong, nullable) UIView *accessoryView;

UITableView的經常使用方法:

/* 全局刷新 */ - (void)reloadData; /* 刷新索引條 */ - (void)reloadSectionIndexTitles; /* 返回第section組有多少行 */ - (NSInteger)numberOfRowsInSection:(NSInteger)section; /* 返回indexPath對應的那一行的cell */ - (nullable __kindof UITableViewCell *)cellForRowAtIndexPath:(NSIndexPath *)indexPath; /* 返回第section組的頭部view */ - (nullable UITableViewHeaderFooterView *)headerViewForSection:(NSInteger)section; /* 返回第section組的尾部view */ - (nullable UITableViewHeaderFooterView *)footerViewForSection:(NSInteger)section; /** * 插入數據,刷新數據 * @param indexPaths 插入在哪一個位置 * @param animation 動畫效果,枚舉UITableViewRowAnimation */ - (void)insertRowsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation; /** * 刪除數據 * @param indexPaths 刪除數據的位置 * @param animation 動畫效果,枚舉UITableViewRowAnimation */ - (void)deleteRowsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation; // 枚舉UITableViewRowAnimation包括: // UITableViewRowAnimationFade, 淡入淡出 // UITableViewRowAnimationRight, 向右滑動 // UITableViewRowAnimationLeft, 向左滑動 // UITableViewRowAnimationTop, 向上滑動 // UITableViewRowAnimationBottom, 向下滑動 // UITableViewRowAnimationNone, 無動畫效果,iOS 3.0之後可用 // UITableViewRowAnimationMiddle, 保持cell的中間,iOS 3.2之後可用 // UITableViewRowAnimationAutomatic 自動選擇一個合適的動畫效果 /** * 刷新某一行的數據 * @param indexPaths 刷新數據的位置 * @param animation 動畫效果,枚舉UITableViewRowAnimation */ - (void)reloadRowsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation; /** 動畫開啓/關閉編輯模式 */ - (void)setEditing:(BOOL)editing animated:(BOOL)animated; /** 返回一個帶有複用標識的cell */ - (nullable __kindof UITableViewCell *)dequeueReusableCellWithIdentifier:(NSString *)identifier; /** * 使用xib時註冊自定義的cell * @param nib 要註冊的nib * @param identifier 複用標識 */ - (void)registerNib:(nullable UINib *)nib forCellReuseIdentifier:(NSString *)identifier; /** * 代碼自定義cell時註冊自定義的cell * @param cellClass 註冊的自定義cell的類型 * @param identifier 複用標識 */ - (void)registerClass:(nullable Class)cellClass forCellReuseIdentifier:(NSString *)identifier; /** 初始化一個帶有複用標識的cell */ - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(nullable NSString *)reuseIdentifier 

UITableViewDataSource中的經常使用方法:

// 必須實現的方法: /* 設置第section組有多少行數據 */ - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section; /* 設置每一行cell的內容,每當有一個cell進入視野屏幕的時候就會調用這個方法,因此在這個方法內部進行優化(cell的複用) */ - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath; // 可實現可不實現的方法: /* 總共有多少組,若是不實現,默認是一組 */ - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView; /* 第section組的頭部標題 */ - (nullable NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section; /* 第section組的尾部標題 */ - (nullable NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section; /** 設置索引條 */ - (nullable NSArray<NSString *> *)sectionIndexTitlesForTableView:(UITableView *)tableView;

UITableViewDelegate中的經常使用方法:

/** 設置每一行cell的高度 */ - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath; /** 設置第section組的頭部高度 */ - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section; /** 設置第section組的尾部高度 */ - (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section; /** 每一行的估算高度 */ - (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath; /** 設置第section組的headerView */ - (nullable UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section; /** 設置第section組的footerView */ - (nullable UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section; /** 選中了某一行cell的時候就會調用這個方法 */ - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath; /** * 設置左滑刪除按鈕的文字 * @param tableView 被編輯的tableView * @param indexPath indexPath * @return 返回刪除按鈕顯示的文字 */ - (nullable NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath; /** * 建立一個左滑出現按鈕的操做(UITableViewRowAction)數組 * @param tableView 添加操做的tableView * @param indexPath indexPath,能夠指定每一行有不一樣的效果 * @return 返回一個操做(UITableViewRowAction)數組 */ - (nullable NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath; /** * 移動cell * @param tableView 操做的tableView * @param sourceIndexPath 移動的行 * @param destinationIndexPath 目標行 */ - (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath; /** 根據editingStyle處理是刪除仍是添加操做,完成刪除、插入操做刷新表格 */ - (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath; /** * 設置表格編輯模式,不實現默認都是刪除 * @param tableView 操做的tableView * @param indexPath cell的位置 * @return 返回表格編輯樣式 */ - (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath;

tableView如何展現數據:

  • UITableView須要一個數據源(dataSource)來顯示數據
  • UITableView會向數據源查詢一共有多少行數據以及每一行顯示什麼數據等
  • 沒有設置數據源的UITableView只是個空殼
  • 凡是遵照UITableViewDataSource協議的OC對象,均可以是UITableView的數據源

tableView展現數據的過程:

設置數據源,遵照UITableViewDataSource協議,實現協議方法:佈局

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate> @property (weak, nonatomic) IBOutlet UITableView *tableView; @end - (void)viewDidLoad{ [super viewDidLoad]; self.tableView.dataSource = self; } #pragma mark - UITableViewDataSource - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{ // 在這個方法中設置總共有多少組數據 // 這個方法若是不實現,默認是一組 } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ // 在這個方法中設置第section組有多行數據 } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ // 1.定義一個cell的複用標識 static NSString *ID = @"cell"; // 2.根據複用標識,從緩存池中取出帶有一樣的複用標識的cell UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID]; // 3.若是緩存池中沒有帶有這種複用標識的cell,就建立一個帶有這種複用標識的cell if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:ID]; } // 4.設置cell的一些屬性 return cell; } - (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{ // 在這個方法中設置第section組的尾部標題 } - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{ // 在這個方法中設置第section組的頭部標題 } #pragma mark - UITableViewDelegate - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ // 當選中了某一行的時候就會調用這個方法,能夠在這裏進行一些操做 } 

Cell的重用原理:

iOS設備的內存有限,若是用UITableView顯示成千上萬條數據,就須要成千上萬個UITableViewCell對象的話,那將會耗盡iOS設備的內存。要解決該問題,須要重用UITableViewCell對象。post

重用原理:當滾動列表時,部分UITableViewCell會移出窗口,UITableView會將窗口外的UITableViewCell放入一個緩存池中,等待重用。當UITableView要求dataSource返回UITableViewCell時,dataSource會先查看這個緩存池,若是池中有未使用的UITableViewCell,dataSource會用新的數據配置這個UITableViewCell,而後返回給UITableView,從新顯示到窗口中,從而避免建立新對象。性能

還有一個很是重要的問題:有時候須要自定義UITableViewCell(用一個子類繼承UITableViewCell),並且每一行用的不必定是同一種UITableViewCell,因此一個UITableView可能擁有不一樣類型的UITableViewCell,緩存池中也會有不少不一樣類型的UITableViewCell,那麼UITableView在重用UITableViewCell時可能會獲得錯誤類型的UITableViewCell。學習

解決方案:UITableViewCell有個NSString *reuseIdentifier屬性,能夠在初始化UITableViewCell的時候傳入一個特定的字符串標識來設置reuseIdentifier(通常用UITableViewCell的類名)。當UITableView要求dataSource返回UITableViewCell時,先經過一個字符串標識到緩存池中查找對應類型的UITableViewCell對象,若是有,就重用,若是沒有,就傳入這個字符串標識來初始化一個UITableViewCell對象。字體

經過代碼自定義cell(cell的高度不一致):

這裏提供的思路並未使用自動佈局,是純手碼計算frame。

  • 1.新建一個繼承自UITableViewCell的類。
  • 2.重寫initWithStyle:reuseIdentifier:方法
    • 添加全部須要顯示的子控件(不須要設置子控件的數據和frame, 子控件要添加到contentView中)
    • 進行子控件一次性的屬性設置(有些屬性只須要設置一次, 好比字體、固定的圖片)
  • 3.提供2個模型
    • 數據模型: 存放文字數據、圖片數據
    • frame模型: 存放數據模型、全部子控件的frame、cell的高度
  • 4.cell擁有一個frame模型(不要直接擁有數據模型)
  • 5.重寫frame模型屬性的setter方法: 在這個方法中設置子控件的顯示數據和frame
  • 6.frame模型數據的初始化已經採起懶加載的方式(每個cell對應的frame模型數據只加載一次)
相關文章
相關標籤/搜索