表使开发中经常遇到的容器类控件，很多的APP都用到了表，因为它作为一个列表来说能够展示很多很多的信息。
我这里介绍一下 tableView 和 它的升级版 collectionView 的简单用法
一、UITableView
首先来说你tableView，作为一个控件，基本的一些用法肯定与其它的控件都一样了，肯定要创建并设置属性，然后就是它包含的一些东西，比如它可以上下滑动，这是scrollView的性质，它可以在自己上面添加单元格用来展示东西(单元格可以自定义，这就是灵活之处)，单元格上面又可以添加别的控件，而且还可以在表编辑的时候删除或者移动单元格，表上还有一些控件，比如通讯录右侧的字母列表等等~
@interface TableViewController (){
UITableView *tableview;
NSArray *titleArray;
NSMutableArray *numberArray;
}
@end
@implementation TableViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor purpleColor];
titleArray = [[NSArray alloc] initWithObjects:@"A",@"B",@"C",@"D",@"E",@"F",@"G",@"H",@"I",@"J",@"K",@"L",@"M", nil];
numberArray = [[NSMutableArray alloc] initWithObjects:@"1",@"2",@"3",@"4",@"5", nil];
[self createTable];
}
- (void)createTable{
// 表
// 创建表的对象
// 样式有两种 1.单一的 普通
// 2.分组的
tableview = [[UITableView alloc] initWithFrame:self.view.frame style:UITableViewStyleGrouped];
// separator 分隔线的颜色
tableview.separatorColor = [UIColor redColor];
// 行高的默认值是 44
// 设置行高
// tableView.rowHeight = 100;
// 设置数据源
tableview.dataSource = self;
// 设置代理
tableview.delegate = self;
// 如果行高 区头 区尾的高度都一样 就使用属性 来设置
// 因为使用方法的执行效率较低
tableview.rowHeight = 60;
//
tableview.sectionHeaderHeight = 50;
[self.view addSubview:tableview];
NSLog(@" 区头 %f",tableview.sectionHeaderHeight);
NSLog(@"区 尾 %f",tableview.sectionFooterHeight);
}
#pragma mark -
#pragma mark datasource
//设置表中有多少个区 如果不实现这个方法默认值为1
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return titleArray.count;
}
//Section 部分 区
//row 行
//必须要实现的方法啊
//设置区中有多少行
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return numberArray.count;
}
//原理：单元格的重用，创建屏幕内所能显示的单元格的个数，当第一个没有完全出屏幕时，新的一行就显示时 就是新创建的，当第一行完全滑出屏幕时，剩下的单元格就不会新建 都是重用的！
//用来配置单元格的内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
// 创建一个静态变量 作为标示符
static NSString *cellIndentifier = @"cell";
//queue 队列 Reusable 可以重用的
// dentifier 标示符号
// 在队列中寻找可以使用的单元格
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIndentifier];
// 如果没有cell !cell
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIndentifier];
NSLog(@"新建cell");
}
// 创建cell 并且添加标示符
else{
NSLog(@"重用的cell");
}
// 三大属性
// 设置图片
cell.imageView.image = [UIImage imageNamed:@"0.jpg"];
// 设置文本
cell.textLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];
// accessory 附属的
// 挂件
// 样式中有可以点击的 有不可以点击的 请看 api的英文注释
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
UIView *view = [[UIView alloc] init];
view.backgroundColor = [UIColor redColor];
// 设置选中后的状态
// cell.selectionStyle = UITableViewCellSelectionStyleNone;
// 设置选中后的颜色
cell.selectedBackgroundView = view;
return cell;
}
#pragma mark -
#pragma mark delegate
//设置行高，默认行高是44
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
// if (indexPath.section == 2) {
// if (indexPath.row == 4) {
// return 40;
// }
// }
// // indexpath
// // 两个属性 row section
// // 区和行都是从0开始的
// if (indexPath.row == 4){
// // tableView.rowHeight = 200;
// return 200;
// }
return 100;
}
//已经选择了某一行
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@" ======= ======= ===== %ld === %ld",indexPath.row,indexPath.section);
// 失去选中后的效果
[tableView deselectRowAtIndexPath:indexPath animated:YES];
}
//当滑动cell的时候让表处于编辑状态
//点击delete按钮时会调用此方法
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath{
// 删除数据源
[numberArray removeObjectAtIndex:indexPath.row];
[tableView setEditing:NO animated:YES];
// 刷新表
[tableView reloadData];
NSLog(@"= === %@",numberArray);
//
NSLog(@"delete 被点击了");
}
//设置删除按钮的标题
- (NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath{
return @"删除";
}
//设置挂件的样式 可以使用if判断进行选择区中某一行的样式
- (UITableViewCellAccessoryType)tableView:(UITableView *)tableView accessoryTypeForRowWithIndexPath:(NSIndexPath *)indexPath{
if (indexPath.row == 0){
return UITableViewCellAccessoryDetailDisclosureButton;
}
return UITableViewCellAccessoryNone;
}
//小挂件被点击后调用的方法
- (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath{
NSLog(@"被点击了 ");
// 让表处于编辑状态
[tableView setEditing:YES animated:YES];
}
//当表处于编辑状态时 想要改变编辑样式的状态 是删除还是插入 还是没有 就通过以下方法来完成
//- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
//{
// return UITableViewCellEditingStyleInsert;
//}
// 自定义区头 区尾
//- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
//{
//
//}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UIView *view = [[UITableView alloc] init];
view.backgroundColor = [UIColor blueColor];
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(210, 18, 60, 30)];
if (tableview.editing == NO) {
[btn setTitle:@"编辑" forState:UIControlStateNormal];
btn.backgroundColor = [UIColor redColor];
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
btn.tag = 100;
[view addSubview:btn];
}else{
[btn setTitle:@"完成" forState:UIControlStateNormal];
btn.backgroundColor = [UIColor greenColor];
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
btn.tag = 101;
[view addSubview:btn];
}
return view;
}
- (void)btnClick:(UIButton *)btn{
if (btn.tag == 100 ) {
[tableview setEditing:YES animated:YES];
[tableview reloadData];
}
if (btn.tag == 101) {
[tableview setEditing:NO animated:YES];
[tableview reloadData];
}
}
//设置区头 区尾的高度
//- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
//{
// return 50;
//}
//- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
//{
// return 30;
//}
#pragma mark - datasource
//设置区尾的标题
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
return [titleArray objectAtIndex:section];
}
//设置区头的标题
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
return [titleArray objectAtIndex:section];
}
//设置右边索引小标题
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView{
return titleArray;
}
二、UICollectionView
collectionView跟表的用法差不多，只是表横向的都是一个单元格，而collection横向不止一个单元格，而且collection需要设置单元格的布局，这就为我们后面做瀑布流提供了可能
#define kUICollectionViewCell @"cell"
@interface CollectionViewController (){
UICollectionView *collectionview;
NSMutableArray *sourceArray;
}
@end
@implementation CollectionViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor blueColor];
sourceArray = [NSMutableArray array];
for (int i = 0; i < 50; i ++) {
[sourceArray addObject:[UIImage imageNamed:@"001.gif"]];
}
[self createCollection];
}
- (void)createCollection{
//UICollectionView 是 UITableView加强版.
//可以布局出各种展示的效果. 可以以多列展示数据,也可以支持水平滚动.
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
//1.设置每个item的大小
layout.itemSize = CGSizeMake(100, 100);
//2.设置分区的缩进量, 上, 左, 下, 右
layout.sectionInset = UIEdgeInsetsMake(5, 5, 10, 5);
//3.设置最小行间距
layout.minimumLineSpacing = 20;
//4.设置最小item间距
layout.minimumInteritemSpacing = 10;
//5.设置滑动的方向
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
//6.设置页眉的大小
layout.headerReferenceSize = CGSizeMake(0, 30);
//7.设置页脚的大小
layout.footerReferenceSize = CGSizeMake(0, 40);
// 创建collectionView对象
collectionview = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:layout];
// 配置属性
collectionview.backgroundColor = [UIColor lightGrayColor];
// 设置数据源代理
collectionview.dataSource = self;
//配置代理对象
collectionview.delegate = self;
// 添加到主视图
[self.view addSubview:collectionview];
//以注册的方式创建cell，比较适合自定义
[collectionview registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:kUICollectionViewCell];
// //注册页眉
// [collectionView registerClass:[HeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
// //注册页脚
// [collectionView registerClass:[FooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];
//
}
#pragma mark - UICollectionViewDataSource
//设置collectionView分区的个数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
//设置每个分区item的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return sourceArray.count;
}
//针对于每一个item返回对应的cell对象, cell重用
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kUICollectionViewCell forIndexPath:indexPath];
// 取出数组中对应位置的元素
UIImage *image = [sourceArray objectAtIndex:indexPath.item];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.contentMode = UIViewContentModeCenter;
[cell.contentView addSubview:imageView];
cell.backgroundColor = [UIColor greenColor];
return cell;
}
//针对于每个分区的页眉和页脚 返回对应的视图对象, 重用.
//- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
// if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
// //页眉
// HeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"header" forIndexPath:indexPath];
// headerView.titleLabel.text = @"页眉";
// return headerView;
// } else {
// //页脚
// FooterView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"footer" forIndexPath:indexPath];
// return footerView;
// }
//}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@"点击了第%ld个cell",indexPath.item);
}
#pragma mark - UICollectionViewDelegateFlowLayout
//动态设置每个item的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
return indexPath.section == 0 ? CGSizeMake(100, 100) : CGSizeMake(100, 150);
}
//动态设置每个分区的缩进量
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
return UIEdgeInsetsMake(5, 5, 10, 5);
}
//动态设置每个分区的最小行间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
return 10;
}
//动态设置每个分区的最小item间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
return 10;
}
//动态设置每个分区的页眉的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
return CGSizeMake(0, 30);
}
//动态设置每个分区的页脚的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section {
return CGSizeMake(0, 40);
}
