足球盘口软件
当前位置: 足球盘口软件 > 前端 >
Table表视图简单介绍,实战入门

第一章:IOS Table表视图简单介绍,iostable

Table在IOS应用开发中非常重要,现在我们就来学习一下

 

1. 首先我们来了解一下Table的视图结构

图片 1图片 2

  • 表头视图(table header view):表视图最上边的视图,用于展示表视图的信息,例如表视图刷新信息
  • 表脚视图(table footer view):表视图最下边的视图,用于展示表视图的信息,例如表视图分页时显示“更多”等信息

 

  • 单元格(cell):它是组成表视图每一行的单位视图。
  • 节(section):它由多个单元格组成,有节头(section header)和节脚(section footer)。 
  • 节头:节的头,描述节的信息,如图4-3所示,文字左对齐。
  • 节脚:节的脚,也可描述节的信息和声明,如图4-3所示,文字居中对齐。 

图片 3

 

  1. 看完展示上的结构,我们来看看代码中的结构

图片 4

  • UITableView继承至UIScrollView
  • 有两个协议UITableVIewDelegate和UITableViewDataSource
  • UITableVIewController是控制器,
  • UITbaleViewHeaderFooterView用作给表头表尾视图
  • UITableViewCell是表内的自定义表栏目
  1. 表视图分类
  • 普通表视图,

    主要用于动态表,而动态表一般在单元格数目未知的情况下使用

    图片 5

  • 分组表视图,

    一般用于静态表,用来进行界面布局,分成一个个组管理

    图片 6

     

     

Table表视图简单介绍,iostable Table在IOS应用开发中非常重要,现在我们就来学习一下 1. 首先我们来了解一下Table的视图结构 表头视...

<a href="#one">一、表视图的组成</a>
<a href="#two">二、表视图类型</a>
<a href="#three">三、cell 的相关样式</a>
<a href="#four">四、数据源协议 UITableViewDataSource</a>
<a href="#five">五、委托协议 UITableViewDelegate</a>
<a href="#six">六、自定义cell</a>
<a href="#seven">七、搜索栏</a>
<a href="#eight">八、cell 插入删除</a>
<a href="#nine">九、cell 移动</a>
<a href="#ten">十 、分页模式</a>
<a href="#eleven">十一 、下拉刷新</a>
PS:添加的锚点貌似不好使

TableView


1.表视图组成及相关概念

1.表头视图(table header view)。表视图最上边的视图,用于展示表视图的信息。
2.表脚视图(table footer view)。表视图最下边的视图。
3.单元格(cell)。是组成表视图每一行的单位视图。
4.节(section)。由多个单元格组成,有节头(section header)和节脚(section footer)。

<a id="one">一、表视图的组成 </a>

  • 表头视图(table header view) 表示图最上边
  • 表脚视图(table footer view) 表示图最下边
  • 单元格 (cell) 组成表示图每一行的单位视图
  • 节(section) 有多个单元格组成,有节头(左对齐)和节脚(左对齐),一般节头描述节的信息,节脚描述节的信息和声明
2.一个基本的通用表格组件需要考虑

->数据集输入 ➡️ data source
->每行数据的显示 ➡️ view factory(row data)
->行操作 ➡️ event handler
-->点击
-->编辑、删除、插入行
-->调整行顺序

<a id="two"> 二、表视图类型</a>

UITableView 创建时

- initWithFrame:(CGRect) style:(UITableViewStyle)

UITableViewController 创建时

- initWithStyle:(UITableViewStyle)

UITableViewStyle 有两种样式

  • UITableViewStylePlain 普通表视图,一般用于动态表,单元格数目未知
  • UITableViewStyleGrouped 分组表视图,一般用于静态表,以孤岛进行界面布局,同时也用于控件的界面布局
3.UITable View 的结构

图片 7

UITableView结构.png

图片 8

UITableView主要相关类.png

UITableView继承自UIScrollView,有两个协议:UITableViewDelegate委托协议和UITableViewDataSource数据源协议。

<a name="three">三、cell 的相关样式</a>

一般通过以下方式创建

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *cellIdentifier = @"CellIdentifier";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];

    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
    }

    NSInteger row = [indexPath row];
    cell.textLabel.text = self.listData[row];
    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

    return cell;
}
4.UITableView学习地图

图片 9

学习地图.png

cell类型

  • UITableViewCellStyleDefault 默认样式,只有图标和主标题
  • UITableViewCellStyleSubtitle Subtitle样式,图标、主标题、副标题(位于主标题下方)
  • UITableViewCellStyleValue1 Value1样式,主标题和副标题,主标题左对齐,副标题右对齐,图标可有可无
  • UITableViewCellStyleValue2 Value2样式,主标题和副标题,两者居中对齐,无图标
5.UITableView分类

1)普通视图。主要用于动态表,一般在单元格数目未知的情况下使用。
2)分组视图。一般用于静态表,用来进行界面布局。
也可以带有索引列、选择列和搜索栏等。

cell扩展视图类型

  cell.accessoryType = UITableViewCellAccessoryType;
  • UITableViewCellAccessoryNone 没有扩展图标
  • UITableViewCellAccessoryDisclosureIndicator 扩展指示器,触摸该图标将切换到下一级表视图,图标为">"
  • UITableViewCellAccessoryDetailDisclosureButton 细节展示按钮,触摸该单元格时,表视图会以视图的方式显示当前单元格的更多详细信息,图标为“ⓘ”
  • UITableViewCellAccessoryCheckmark 选中标志,表示该行被选中,图标为“✔️”
5.单元格

由图标、标题和扩展视图等组成。

图片 10

单元格的组成.png

<a name="four">四、数据源协议 UITableViewDataSource</a>

//为表视图单元格提供数据,必须实现
@protocol UITableViewDataSource<NSObject>

@required
//返回某个节点中的行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;
//为表视图单元格提供数据
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

@optional
//返回节的个数
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;   
//返回节头标题           
- (nullable NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section;   
//返回节脚标题
- (nullable NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section;

//Individual rows can opt out of having the -editing property set for them. If not implemented, all rows are assumed to be editable.
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath;

// Moving/reordering
// Allows the reorder accessory view to optionally be shown for a particular row. By default, the reorder control will be shown only if the datasource implements -tableView:moveRowAtIndexPath:toIndexPath:
- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath;

//提供表视图节索引标题
- (nullable NSArray<NSString *> *)sectionIndexTitlesForTableView:(UITableView *)tableView __TVOS_PROHIBITED;   

// tell table which section corresponds to section title/index (e.g. "B",1))                                               
- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index __TVOS_PROHIBITED;  

//为删除修改提供数据
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath;
- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath;

@end
6.UITableViewDataSource 和 UITableViewDelegate

->.dataSource
-numberOfSectionsInTableView: 返回类型:Int,返回节的个数。
-tableView:numberOfRowsInSection: 返回类型:Int,返回某个节中的行数。
-tableView:cellForRowAtIndexPath: 返回类型:UITableViewCell,为表视图单元格提供数据。
-tableView:viewForHeader/FooterInSection: 返回类型:String,返回节头/脚的标题。
->.delegate
-tableView:didSelectRowAtIndexPath: 返回类型:无,响应选择表视图单元格时调用的方法。

<a name="five">五、委托协议 UITableViewDelegate</a>

@protocol UITableViewDelegate<NSObject, UIScrollViewDelegate>

@optional

// Display customization

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath;
- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section NS_AVAILABLE_IOS(6_0);
- (void)tableView:(UITableView *)tableView willDisplayFooterView:(UIView *)view forSection:(NSInteger)section NS_AVAILABLE_IOS(6_0);
- (void)tableView:(UITableView *)tableView didEndDisplayingCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath*)indexPath NS_AVAILABLE_IOS(6_0);
- (void)tableView:(UITableView *)tableView didEndDisplayingHeaderView:(UIView *)view forSection:(NSInteger)section NS_AVAILABLE_IOS(6_0);
- (void)tableView:(UITableView *)tableView didEndDisplayingFooterView:(UIView *)view forSection:(NSInteger)section NS_AVAILABLE_IOS(6_0);

// Variable height support

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section;
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section;

// Use the estimatedHeight methods to quickly calcuate guessed values which will allow for fast load times of the table.
// If these methods are implemented, the above -tableView:heightForXXX calls will be deferred until views are ready to be displayed, so more expensive logic can be placed there.
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(7_0);
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForHeaderInSection:(NSInteger)section NS_AVAILABLE_IOS(7_0);
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForFooterInSection:(NSInteger)section NS_AVAILABLE_IOS(7_0);

// Section header & footer information. Views are preferred over title should you decide to provide both

- (nullable UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;   // custom view for header. will be adjusted to default or specified header height
- (nullable UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section;   // custom view for footer. will be adjusted to default or specified footer height

// Accessories (disclosures). 

- (UITableViewCellAccessoryType)tableView:(UITableView *)tableView accessoryTypeForRowWithIndexPath:(NSIndexPath *)indexPath NS_DEPRECATED_IOS(2_0, 3_0) __TVOS_PROHIBITED;
- (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath;

// Selection

// -tableView:shouldHighlightRowAtIndexPath: is called when a touch comes down on a row. 
// Returning NO to that message halts the selection process and does not cause the currently selected row to lose its selected look while the touch is down.
- (BOOL)tableView:(UITableView *)tableView shouldHighlightRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(6_0);
- (void)tableView:(UITableView *)tableView didHighlightRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(6_0);
- (void)tableView:(UITableView *)tableView didUnhighlightRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(6_0);

// Called before the user changes the selection. Return a new indexPath, or nil, to change the proposed selection.
- (nullable NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath;
- (nullable NSIndexPath *)tableView:(UITableView *)tableView willDeselectRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(3_0);
// Called after the user changes the selection.
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;
- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(3_0);

// Editing

// Allows customization of the editingStyle for a particular cell located at 'indexPath'. If not implemented, all editable cells will have UITableViewCellEditingStyleDelete set for them when the table has editing property set to YES.
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath;
- (nullable NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(3_0) __TVOS_PROHIBITED;
- (nullable NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(8_0) __TVOS_PROHIBITED; // supercedes -tableView:titleForDeleteConfirmationButtonForRowAtIndexPath: if return value is non-nil

// Controls whether the background is indented while editing.  If not implemented, the default is YES.  This is unrelated to the indentation level below.  This method only applies to grouped style table views.
- (BOOL)tableView:(UITableView *)tableView shouldIndentWhileEditingRowAtIndexPath:(NSIndexPath *)indexPath;

// The willBegin/didEnd methods are called whenever the 'editing' property is automatically changed by the table (allowing insert/delete/move). This is done by a swipe activating a single row
- (void)tableView:(UITableView *)tableView willBeginEditingRowAtIndexPath:(NSIndexPath *)indexPath __TVOS_PROHIBITED;
- (void)tableView:(UITableView *)tableView didEndEditingRowAtIndexPath:(nullable NSIndexPath *)indexPath __TVOS_PROHIBITED;

// Moving/reordering

// Allows customization of the target row for a particular row as it is being moved/reordered
- (NSIndexPath *)tableView:(UITableView *)tableView targetIndexPathForMoveFromRowAtIndexPath:(NSIndexPath *)sourceIndexPath toProposedIndexPath:(NSIndexPath *)proposedDestinationIndexPath;               

// Indentation

- (NSInteger)tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath; // return 'depth' of row for hierarchies

// Copy/Paste.  All three methods must be implemented by the delegate.

- (BOOL)tableView:(UITableView *)tableView shouldShowMenuForRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(5_0);
- (BOOL)tableView:(UITableView *)tableView canPerformAction:(SEL)action forRowAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender NS_AVAILABLE_IOS(5_0);
- (void)tableView:(UITableView *)tableView performAction:(SEL)action forRowAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender NS_AVAILABLE_IOS(5_0);

// Focus

- (BOOL)tableView:(UITableView *)tableView canFocusRowAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(9_0);
- (BOOL)tableView:(UITableView *)tableView shouldUpdateFocusInContext:(UITableViewFocusUpdateContext *)context NS_AVAILABLE_IOS(9_0);
- (void)tableView:(UITableView *)tableView didUpdateFocusInContext:(UITableViewFocusUpdateContext *)context withAnimationCoordinator:(UIFocusAnimationCoordinator *)coordinator NS_AVAILABLE_IOS(9_0);
- (nullable NSIndexPath *)indexPathForPreferredFocusedViewInTableView:(UITableView *)tableView NS_AVAILABLE_IOS(9_0);

@end

详细的请参考 ios 表视图UITableViewController

7.UITableViewCell 的使用

重复使用与 Cell Identifier

UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@"FirstCell"];
if (cell == nil) {
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"FirstCell"];
}
return cell;

代码中,字符串FirstCell是可以重用单元格的标识符。
通过表视图的dequeueReusableCellWithIdentifier :方法查找是否有可以重用的单元格,如果没有,通过
-initWithStyle: reuseIdentifier:构造器创建一个。

8.UITableViewController

->static cell
-->仅嵌在UITableViewController 里时可以使用
->下拉刷新界面(iOS6+)
-->启用: Interface Builder 或者代码

self.refreshControl = [[UIRefreshControl alloc] init];
self.refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:@"Ssss"];
[self.refreshControl addTarget:self action:@selector(refreshing:) forControlEvents:UIControlEventValueChanged];

-->响应

- (IBAction)startRefresh:(id)sender {
  ...
  [self.refreshControl endRefreshing];
  [self.tableView reloadData];
}
9.刷新 TableView

->TableView reload系列方法
1)reloadData 刷新整个表格。
2)reloadRowsAtIndexPaths:withRowAnimation: 刷新行。
3)reloadSections:withRowAnimation: 整组刷新。
4)reloadSectionIndexTitles 刷新索引。

//初始化UIRefreshControl,创建UIRefreshControl对象
UIRefreshControl *rc = [[UIRefreshControl alloc] init];
//设置attributedTitle属性,显示下拉控件的标题
rc.attributedTitle = [[NSAttributedString alloc] initWithString:@"下拉刷新"];
//添加UIControlEventValueChanged事件,refreshTableView是该事件处理方法
[rc addTarget:self action:@selector(refreshTableView) forControlEvents:UIControlEventValueChanged];
    self.refreshControl = rc;

- (void) refreshTableView {
//refreshing属性判断是否处于刷新状态
if (self.refreshControl.refreshing) {
    self.refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:@"加载中..."];
    //模拟数据
    NSDate * date = [[NSDate alloc] init];
    [self.logs addObject:date];
    //刷新操作完,endRefreshing停止下拉刷新控件
    [self.refreshControl endRefreshing];
    //显示标题
    self.refreshControl.attributedTitle = [[NSAttributedString alloc] initWithString:@"下拉刷新"];
    //重新加载表视图
    [self.tableView reloadData];
}
}
10.TableView 交互

10.1 选中
->响应
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath
->用代码选中

- (void)selectRowAtIndexPath:(nullable NSIndexPath *)indexPath animated:(BOOL)animated scrollPosition:(UITableView ScrollPosition)scrollPosition;
- (void)deselectRowAtIndexPath:(NSIndexPath *)indexPath animated:(BOOL)animated;

->读取

NSIndexPath * indexPathForSelectedRow
NSArray<NSIndexPath *> * indexPathsForSelectedRows

10.2控制表格滚动

- scrollToRowAtIndexPath:(NSIndexPath *)indexPathatScrollPosition:(UITableViewScrollPosition)scrollPosition animated:(BOOL)animated
- scrollToNearestSelectedRowAtScrollPosition:(UITableViewScrollPosition)scrollPosition animated:(BOOL)animated

10.3编辑模式
->UITableView 内建表格编辑支持:.editing
不提供该方法则默认为Delete

- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath

默认所有行均可编辑

- (BOOL)tableView:(UITableView *) tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath

提供该方法,会打开左划编辑手势,在这里响应删除/新建操作

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyleforRowAtIndexPath:(NSIndexPath *)indexPath

提供该方法,编辑态会显示移动控件,在这里响应移动操作

- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)fromIndexPathtoIndexPath:(NSIndexPath *)toIndexPath

beginUpdates/endUpdates其间的所有编辑动作会同时动画显示

图片 11

处理过程.png

10.4带索引的表格

- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
- (NSString *) tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
- (NSInteger) tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index

10.5高亮与菜单
高亮

- (BOOL)tableView:(UITableView *)tableView shouldHighlightRowAtIndexPath:(NSIndexPath *)indexPath 
- (void)tableView:(UITableView *)tableView didHighlightRowAtIndexPath:(NSIndexPath *)indexPath
- (void)tableView:(UITableView *)tableView didUnhighlightRowAtIndexPath:(NSIndexPath *)indexPath

菜单

- (BOOL)tableView:(UITableView *)tableView shouldShowMenuForRowAtIndexPath:(NSIndexPath *)indexPath
- (BOOL)tableView:(UITableView *)tableView canPerformAction:(SEL)action forRowAtIndexPath:(NSIndexPath *)indexPath withSender:(id)sender
- (void)tableView:(UITableView *)tableView performAction:(SEL)action forRowAtIndexPath:(NSIndexPath *)indexPath withSender:(id)sender

10.6表格与搜索
UISearchBar
->[tableView setTableHeaderView:searchBar]

ConllectionView

界面组成

Cells 单元格。
section 一个行数据,由多个单元格组成。
Supplementary Views 节的头和脚。
Decoration Views 是集合视图的背景视图。

图片 12

界面组成.png

图片 13

类的构成.png

UIConllectionView继承自UIScrollView,有两个协议:UIConllectionViewDelegate委托协议和UIConllectionViewDataSource数据源协议。

Cell供应
[collectionView registerClass:BasicCell class forCellWithReuseIdentifier:@"CollectionCell"];
[collectionView registerNib:basicCellNib class forCellWithReuseIdentifier:@"CollectionCell"];
动态确定格子的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
insetForSectionAtIndex:(NSInteger)section;
minimumLineSpacingForSectionAtIndex:(NSInteger)section;
minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
referenceSizeForHeaderInSection:(NSInteger)section;
referenceSizeForFooterInSection:(NSInteger)section;
交互

->点选

-collectionView:should Select ItemAtIndexPath:
-collectionView:did Select ItemAtIndexPath:
-collectionView:should Deselect ItemAtIndexPath:
-collectionView:did Deselect ItemAtIndexPath:

->编辑格子
-->插入、删除
-->移动格子的位置

beginInteractiveMovementForItemAtIndexPath://开始拖动指定的格子
updateInteractiveMovementTargetPosition://更新选定格子被拖到的位置
endInteractiveMovement 或者 cancelInteractiveMovement//结束

->刷新数据

reloadData
reloadSections:(NSIndexSet *)
reloadItemAtIndexPaths:(NSArray<NSIndexPath *> *)

->将一组编辑或刷新动作合并到一个动画过程里 - performBatchUpdates:completion:
->滚动到某个格子
->动态更换布局

返回顶部