表视图
数据一列多行的列表形式展示数据的一种视图UITableView,父类是UIScrollView优势：无需计算每行的坐标，只需要关注每行的数据如何展示以及数据是什么就可以了
- 如何使用表视图？
表视图有两个重要的属性，一个叫dataSource,一个叫delegate。其实两个都是表视图的代理，dataSource代理负责表格要显示数据来源，delegate负责表格与用户的交互响应即表格的自定义样式。其中dataSource必须设置
步骤：
step1:设置表格的dataSource数据源代理为当前控制器
step2:让当前控制器遵守UITableViewDataSource协议
step3:实现方法
方法一：表格有几个分区numberOfSectionsInTableView
方法二：每个分区有几行numberOfRowsInSection
方法三：每行的内容什么样cellForRowAtIndexPath
MyViewController.m
#import "MyViewController.h"
@interface MyViewController ()<UITableViewDataSource,UITableViewDelegate>
@property(nonatomic,strong)UITableView *tableView;
@end
@implementation MyViewController
#pragma mark - 以下是tableView数据源的代理方法 TableView DataSource
//设置分区头
//问一：有多少个分区（可选则实现代理方法， 如果不实现默认是1分区）
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 3;
}
//问二：每个分区有多少行
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
if(section == 0) return 5;
if(section == 1) return 10;
return 8;
}
//问三：每行长什么样子
-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
//当前的分区号
NSInteger section = indexPath.section;
//当前是第几行
NSInteger row = indexPath.row;
UITableViewCell *cell = [[UITableViewCell alloc]init];
cell.textLabel.text = [NSString stringWithFormat: @"这是第%ld个分区，这是第%ld个单元格",section,row];
return cell;
}
//设置分区头文本的 数据源代理方法 nullable可以返回字符串空
//- (nullable NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{ // fixed font style. use custom view (UILabel) if you want something different
// return [NSString stringWithFormat:@"这是第%ld个分区 分区头",section];
//
//}
//设置分区尾文本的 数据源代理方法
//- (nullable NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
// return [NSString stringWithFormat:@"这是第%ld个分区 分区尾",section];
//}
#pragma mark - 以下TableView Datagate 的代理方法
//设置分区头的高度
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return 60;
}
//设置分区头视图（自定义分区头 一定要设置分区头高度）
-(UIView*)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, tableView.frame.size.width, 40)];
label.backgroundColor = [UIColor yellowColor];
label.text = [NSString stringWithFormat:@"%ld分区",section];
label.textAlignment = NSTextAlignmentCenter;
return label;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.tableView = [[UITableView alloc]initWithFrame:self.view.frame style:UITableViewStylePlain];
//设置tableView的数据源
self.tableView.dataSource =self;
//设置tableView的代理
self.tableView.delegate = self;
//表头和表尾 只能通过属性 来完成设置
//表头
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.tableView.frame.size.width, 200)];
imageView.image = [UIImage imageNamed:@"timg2"];
self.tableView.tableHeaderView =imageView;
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
button.frame = CGRectMake(0, 0, self.tableView.frame.size.width, 40);
[button setTitle:@"加载更多内容" forState:UIControlStateNormal];
button.backgroundColor =[UIColor colorWithRed:0 green:0.5 blue:1 alpha:1];
[button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
button.titleLabel.font = [UIFont systemFontOfSize:24];
self.tableView.tableFooterView = button;
[self.view addSubview:self.tableView];
}
- 单元格重用
将那些已经滚动出屏幕以外的cell对象，能够取回来，修改一下上面显示的文字，再重新放到表格的可见区域，用于展示数据
- 系统已经为我们做了哪些事情？
系统会自动将那些已经完整的超出屏幕的cell对象，自动放在一个队列中存储起来
解决方案一：
进到第三个方法后，不要着急立即新建cell,而是先去队列中尝试着去取，看有没有已经被回收了的cell对象
如果能够取到cell，则直接修改cell中的内容，然后返回即可
如果取不到cell，再新建cell对象，然后返回
//问三：每行长什么样子
-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
//当前的分区号
NSInteger section = indexPath.section;
//当前是第几行
NSInteger row = indexPath.row;
//从tableView的空闲队列中 取出名字叫 张三的 单元格
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"张三"];
if(!cell){
static int index = 0;
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"张三"];
index++;
NSLog(@"创建了%d个",index);
}
cell.textLabel.text = [NSString stringWithFormat: @"这是第%ld个分区，这是第%ld个单元格",section,row];
return cell;
}
解决方案二：
提前将单元格德类型注册一下，即让系统tableView记录一下单元格类的信息，然后，回答第三问，再去dequeque取可重用单元格时，如果没有取到，则有系统根据提前注册的类型，为我们自动新建一个cell对象。
这样，保证在dequeque之后，一定会有一个cell对象，我们不关注这个对象是旧的，还是系统为我们自动创建的cell.直接赋值显示，返回即可。
MyViewController.m
import "MyViewController.h"
@interface MyViewController ()<UITableViewDataSource>
@end
@implementation MyViewController
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return 1;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return 40;
}
-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
//从tabelView 队列中 取空闲cell,如果没有取到有tableView根据我之前注册的cell类，来帮我创建一个cell
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"张三" forIndexPath:indexPath];
cell.textLabel.text = @"abc";
return cell;
}
- (void)viewDidLoad {
[super viewDidLoad];
UITableView *tableView = [[UITableView alloc]initWithFrame:self.view.frame style:UITableViewStylePlain];
tableView.dataSource =self;
//向tableView 注册一个 cell 类的样式，在复用时会根据这个注册的来创建cell对象
[tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"张三"];
[self.view addSubview:tableView];
}
UITableViewController表视图控制器
天生自带一个tableView类型的视图，并且当前控制器已经被设置成为这个tableView的数据源即delegate代理。同时，控制器也已经遵守UITableViewDataSource及UITableViewDelegate协议
- 如何使用？
编写一个类，继承自UITableViewController，然后只需要关注三问，完成数据的显示即可。
UITableViewCell
左边叫内容视图contenView，右边叫辅助视图accessoryView
- 内容视图
系统版：cell内部天生就有三个子控件，为两个标签一个图片框，直接赋值显示即可，无需创建添加contentView中
通过textLabel和datailTextLabel访问两个标签，通过imageView属性访问图片框。
系统还提供了四种摆放三个子视图的方式。通过在创建cell对象实例时的style参数可以决定三个视图如何摆放
syle:default，value1，value2，subtitle
default：只有图片+textLabel
value1:也叫right右对齐，detail在右侧
value2:也叫left左对齐，detail在左侧
subtitle:三个都可见，detail在下侧 - 辅助视图
系统版：
通过给accessoryType属性即可。一共四种选择，checkmark对勾样式，disclosure大于号样式，detail圆圈I样式，detail+disclosure既有大于号又有圆圈i
自定义版：通过给accessoryView属性一个视图对象即可。
MyTableViewController.m
#import "MyTableViewController.h"
@interface MyTableViewController ()
@end
@implementation MyTableViewController
#pragma mark - Table view data source
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 40;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"张三"];
if(!cell){
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"张三"];
}
//设置内容视图
// cell.textLabel.text = @"标题";
// cell.detailTextLabel.text = @"详细";
// cell.imageView.image = [UIImage imageNamed:@"timg5"];
UILabel *label = [cell.contentView viewWithTag:100];
if(!label){
label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, cell.contentView.frame.size.width,80)];
label.tag = 100;
label.font = [UIFont systemFontOfSize:36];
label.textAlignment =NSTextAlignmentCenter;
[cell.contentView addSubview:label];
}
label.text = [NSString stringWithFormat:@"第%ld行",indexPath.row];
//设置系统版辅助视图
// UITableViewCellAccessoryNone
// UITableViewCellAccessoryDisclosureIndicator 大于号
// UITableViewCellAccessoryDetailDisclosureButton 圈i加大于号
// UITableViewCellAccessoryCheckmark 对勾
// UITableViewCellAccessoryDetailButton 圈i
if(indexPath.row != 1)
{
cell.accessoryView = nil;
cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;
}else{
UISwitch *mySwitch = [[UISwitch alloc]init];
cell.accessoryView = mySwitch;
}
return cell;
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(nonnull NSIndexPath *)indexPath{
return 80;
}
封装图片滚动视图
HeaderView.h
#import <UIKit/UIKit.h>
@class HeaderView;
@protocol HeadViewDelegate <NSObject>
-(void)headerView:(HeaderView*)headerView didTapPageNum:(NSInteger)pageNum;
@end
@interface HeaderView : UIView
-(instancetype)initWithImageNameArray:(NSArray*)imageNames frame:(CGRect)frame;
@property(nonatomic,strong)id<HeadViewDelegate>delegate;
@end
HeaderView.m
#import "HeaderView.h"
@interface HeaderView ()<UIScrollViewDelegate>
@property(nonatomic,strong)UIScrollView *sv;
@property(nonatomic,strong)UIPageControl *pageControl;
@property(nonatomic,strong)NSArray *imageArray;
@end
@implementation HeaderView
-(instancetype)initWithImageNameArray:(NSArray*)imageNames frame:(CGRect)frame{
if(self = [super initWithFrame:frame]){
self.imageArray = imageNames;
[self sv];
[self pageControl];
}
return self;
}
-(instancetype)initWithFrame:(CGRect)frame{
if(self = [super initWithFrame:frame]){
[self sv];
[self pageControl];
}
return self;
}
-(UIPageControl *)pageControl
{
if(!_pageControl){
_pageControl = [[UIPageControl alloc]init];
_pageControl.frame = CGRectMake(0, self.frame.size.height-20-40, self.frame.size.width, 40);
_pageControl.numberOfPages = self.imageArray.count;
_pageControl.currentPage = 0;
//设置当前选中的颜色
[_pageControl setPageIndicatorTintColor:[UIColor redColor]];
//设置其他未选中的颜色
[_pageControl setPageIndicatorTintColor:[UIColor greenColor]];
[self addSubview:_pageControl];
_pageControl.enabled = NO;
}
return _pageControl;
}
-(void)tap:(UITapGestureRecognizer*)sender{
NSInteger pageNum =self.pageControl.currentPage;
[self.delegate headerView:self didTapPageNum:pageNum];
}
//懒加载
-(UIScrollView *)sv
{
if(!_sv)
{
_sv = [[UIScrollView alloc]init];
_sv.delegate = self;
_sv.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
_sv.contentSize= CGSizeMake(self.frame.size.width * self.imageArray.count, self.frame.size.height);
for(NSInteger i = 0; i<self.imageArray.count;i++)
{
UIImageView *iv = [[UIImageView alloc]initWithFrame:CGRectMake(self.frame.size.width * i, 0, self.frame.size.width, self.frame.size.height)];
NSString *imageName =self.imageArray[i];
iv.image = [UIImage imageNamed:imageName];
[_sv addSubview:iv];
}
//隐藏水平滚动条
_sv.showsVerticalScrollIndicator = NO;
//取消弹性效果
_sv.bounces = NO;
//设置整屏滑动 是针对 frame来说的
_sv.pagingEnabled = YES;
[self addSubview:_sv];
//给scrollView添加点击手势
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
[_sv addGestureRecognizer:tap];
}
return _sv;
}
//实现代理方法
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
//round c 的四舍五入
NSInteger page = round(scrollView.contentOffset.x / self.frame.size.width);
self.pageControl.currentPage = page;
}
@end
ViewController.m
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
HeaderView *hv1 = [[HeaderView alloc]initWithImageNameArray:@[@"timg",@"timg1",@"timg3",@"timg5",@"psc"] frame:CGRectMake(50, 50, 300, 200)];
[self.view addSubview:hv1];
HeaderView *hv2 = [[HeaderView alloc]initWithImageNameArray:@[@"timg3",@"psc"] frame:CGRectMake(50, 500, 300, 200)];
[self.view addSubview:hv2];
HeaderView *hv3 = [[HeaderView alloc]initWithImageNameArray:@[@"timg1",@"timg5"] frame:CGRectMake(50, 300, 300, 100)];
[self.view addSubview:hv3];
}
MyViewController.m
//选中某行 如何处理
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@"选中了%ld分区，%ld行",indexPath.section,indexPath.row);
}
//当某行被反选时 如何处理（相当于取消当前选择）
-(void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@"%ld分区，%ld行被反选了",indexPath.section,indexPath.row);
}
网友评论