【团购-HeaderView Objective-C语言】

一、那么,我们看上面这个东西,这就是我们保存在HeaderView里面的一个东西吧,

HeaderView

HeaderView里面的一个东西,

HeaderView

1.因为这个东西,看起来,是不是也是一个这个样子,也是一个固定的样子啊,

所以我们这个UITableView的HeaderView,也可以使用一个xib来描述,也可以使用xib来描述,

上面,这是不是就是一个UIScrollView,

是不是用来滚动的,这个咱们昨天已经给大家说过了,

然后,下面,这儿有一根线,这儿有一个“猜你喜欢”,一个Label,下面是不是又有一根线啊,

猜你喜欢

2.来,咱们把上面这个HeaderView,给大家实现一下,

注意,实现的时候,这个UIScrollView的图片轮播起,我就不实现了,可以吧,因为这个在前几次课中已经讲过了,

这个图片轮播器,是不是就是咱们那天做那个代码,

我就告诉大家,在哪儿去写这个代码,就可以了,

告诉大家在哪儿去写这个代码以后,你写的时候,直接把咱们那天那个代码,直接就是用那个代码写,就OK了,

3.那么,我就把上面这个两根线,包括这个Label,以及如何来实现,给大家说一下,

1)注意,我们说,这两根线,怎么来实现啊,

两根线

有人说,这两根线,不就是那个设置UITableView的saperator,线的那个Style吗,对吧,

但是不是,但是不是,

因为,注意,我们这个UITableView的saperatorStyle,

是不是我们UITableView中,每行和每行之间的分割线吧,

分割线

是每行和每行之间的分割线,

而这两个线,是我UITableView的tableHeaderView里面,是不是自己要的两根线啊,

你有可能要三根、四根、五根、六根、,

是不是都有可能,

所以说,这两根线,是我们自己实现的,这两根线,怎么实现,

就是拽两个UIView,把UIView的宽度,设成320,高度设成1,

设个背景色,设个透明度,就好了,

就是用UIView来实现的,

有人说,这样做,是不是效率太低了,一根线就这么做,

这样做,没啥问题,除非你后面学了绘图以后,你可以通过绘图来绘制,否则用UIView,本身就没有任何问题,

3.OK,来,我们看一下这个东西,

这里

我们这里,在这个UITableView里,需要给它来个头,所以,我们再建一个xib,

这个xib,就是我们那个headerView吧,

在User Interface里面,建一个xib,

xib

叫什么,

叫什么

CZHeaderView,

CZHeaderView

3.好,里面,需要一个View,

拽一个View过来,

View

那么,这个View,一开始是不是不能改大小啊,

大小

给它的Size变成什么,freeform,

freeform

设置它的大小,宽320,高150,

宽

然后呢,上面是不是有一个UIScrollView啊,

拽一个UIScrollView上来,

UIScrollView

这个ScrollView,它并不是320,

不是320

我们看一下,它不是320啊,左右都各有个10吗,给它来个10吧,

因为这个是iPhone6吧,iPhone6模拟器下我截的图,

给它来个宽度300,距离左边10,距离上边0,高度呢,100吧,

距离

距离上边是0,太宽了对吧,宽度改成280,距离左边20,

然后,距离上边,来个10,

距离上边

这样是不是好点儿,

4.然后,我们有了UIScrollView以后,下面是不是应该来两根线了,

那么,这个是10,它自身高度是150,那么,这儿来根线,应该是在160的位置吧,

在160的位置来根线,所以我拽一个UIView过来,

拽过来

这个UIView,是不是也大的不得了,

首先,把Size改成freeform,

改成

再把宽度,改成320,高度1,

高度

拽错地方了吧,应该把它拽到这个View里面,

里面

宽度320,高度1,距离左边0,我们看一下,是不是紧贴着左边啊,

紧贴着左边

距离左边,是0,然后呢,先给它来个背景色,喜欢什么颜色,Light gray color,浅灰色,

黑色也行,Dark,黑色,

看的是不是非常清楚,

黑色

距离上边,110,

UIScrollView高度是100,这个View距离上边的距离是,110,

距离上边

是不是在这个地方,这儿是不是看到这个东西了,

110,是不是紧贴着这个ScrollView,是不是也不好看,

给它来个115,

来个115

差不多吧,这儿是不是有根儿线了,

这根儿线,是不是太黑了,

是不是我们给它来个半透明效果,

Alpha,来个,0.5,

半透明

看着是不是还有点儿黑,Alpha,改成0.4,差不多了吧,

选中这根儿线,command + C、command + V,

复制一根儿线吧,

复制

是不是两根儿线了,

第二根儿线,给它设一下Y坐标,就可以了,

刚才是115吧,现在来一个135,

135

是不是在这里,

145,是不是这样就OK了,

145

然后,这样的话,就有两根线了,

在这两根线中间,是不是要放一个Label啊,

Label

这个Label里写的是什么,

猜你喜欢

但是它是紧贴住左边吗,

不是,是不是和上面UIScrollView差不多对齐,

然后呢,这个大小,改成15号字,

15号字

Text,改成“猜你喜欢”,

Editor-Size to fit content,不能用,不能用就算了,

选中不能用

这样,这里是不是就有个Label了吧,

有这个Label以后,上面我们这个HeaderView,是不是基本就OK了,

然后,接下来,我们等会儿是不是要通过代码,来操作这个UIScrollView,

操作

然后,我们还要给它封装一个,通过xib,创建这个HeaderView,这个代码,换句话说,就是说,你上面现在这个UIView,是不是得指定一个自己的类,

来和这个UIView相关联,

自己的类

就像footerView一样,这儿需要自己指定一个类,和它相关联,

所以我们这里,是不是还得再建一个,用来描述HeaderView的一个类啊,

HeaderView

继承自UIView,

CZHeaderView

给它起个名字,叫什么,CZHeaderView吧,

它是不是继承自UIView啊,

CZHeaderView

把这个CZHeaderView,写在这个地方,View里面,这个Class,变成我们自己这个类吧,

CZHeaderView

好,变成我们自己这个类以后,我们编译一下,是不是就可以拖线了,

接下来,就可以拖线了,

比如说,我们选中我们这里的scrollView,等会儿可能会用到它,

选中这个辅助编辑器,

然后呢,这里打开的是.m文件吗,

m文件

是不是.h文件啊,

h文件

拖线是不是拖到.m文件里,

文件

拖线到.m文件里面,

但是拖线的时候,需要一个什么,是不是需要一个类扩展啊,

类扩展

scrollView,拖线,

scrollView

scrollView,拖线,来个Name,叫scrollView,

这样的话,我们在这里,是不是就可以访问到这个scrollView了,

如果你希望访问其他控件的话,这里再把其他控件,也拖过来,

但是我们这里不需要,就先给它,拖这么一个,

好,拖了这一个以后,接下来,我们这个HeaderView,有了,

接下来,我们只要在控制器的viewDidLoad里面,控制器的viewDidLoad,这个方法,里面,

viewDidLoad

在控制器的viewDidLoad方法里面,

viewDidLoad

在这个方法里面,

在这里

在这个方法里面,是不是给大家创建一个HeaderView,设置一下,就OK了,

5.创建HeaderView,

OK,怎么创建,

//创建HeaderView,

CZHeaderView,但是有吗,没有,所以说,要在前面导入头文件,

导入头文件

//创建HeaderView

CZHeaderView *headerView = 我们说,这里我们是不是得自己通过xib来创建啊,

通过xib创建,那个代码,怎么写,NSBundle mainBundle,然后呢,这里,loadNibNamed,这里是不是写成xib名称吧,

CZHeaderView *headerView = [[[NSBundle mainBundle] loadNibNamed:@“CZHeaderView” owner:nil options:nil] lastObject];

headerView

这样是不是拿到我们xib里面的这个HeaderView了吧,

然后呢,让我们的self.tableView.tableHeaderView = headerView;

HeaderView

等于这个headerView,

headerView

这样是不是设置好了,

但是,这里的代码,和我们上面这个footerView是一个意思,

footerView

是不是也是最好把它封装到一个类方法里面,吧,

最好把这句话封装到一个类方法里面,

所以说,我们怎么写,

找到我们的headerView里面,给它写一个类方法,

headerView

找到我们的CZHeaderView.h文件,在里面写一个类方法,

+ (instancetype)headerView;

headerView

然后呢,我们在这里,

headerView

然后呢,我们在这里,CZHeaderView.m文件里面,实现一下,

实现

+ (instancetype)headerView{

//code;

}

在这里面,是不是就这么一句话,

headerView

就这么一句话,然后返回这个headerView,

返回headerView

是不是直接这么写,就OK了,

6.然后,接下来,我们在控制器里面,

控制器

这儿就可以怎么写,

CZHeaderView *headerView = [CZHeaderView headerView];

self.tableView.tableHeaderView = headerView;

这样是不是就创建好这个HeaderView了,然后把headerView设置给我们这个UITableView的一个tableHeaderView的属性,

设置

这样的话,当你再运行的时候,就可以看到,

scrollView

我给上面这个UIScrollView,设个背景色,不然的话,可能看不清楚,

背景色

设个背景色,backgroundColor,

背景色

OK,这样的话,就能看到了吧,

背景色

这样的话,上面这个scrollView,就有了吧,

这样我们再滚动的时候,是不是基本,headerView这个效果就有了,

7.然后,接下来,我们要做的就是把这个scrollView代码实现,就OK了,

实现这个scrollView的代码,我相信,这个大家应该没有问题,

无非就是加几个控件,设置它们的size,就可以滚动了,

再加timer,实现自动轮博,是不是就OK了,

但是,我现在的问题是,你要让上面这个UIScrollView实现滚动,

是不是一定要设置这个UIScrollView的contentSize啊,

那么,我的问题是,你在哪里去设置UIScrollView的contentSize,

在哪个地方来写这个代码,

是不是肯定是在headerView里面,

然后,这时候,给大家打开这个HeaderView,

headerView

这是不是我们打开HeaderView,这个代码啊,

好,请你告诉我,在HeaderView里面的哪行上,去写这个UIScrollView的contentSize,

headerView

在HeaderView里面的什么地方,去设置UIScrollView的contentSize,

是这里吗?

是这里吗

这是声明,不可能在这里吧……,

这里吗,

这里吗

这里吗?也不可能,这里既不是声明,也不是实现,不可能在这儿写代码吧,

在这里吗?

在这里吗

来,咱们不管这个问题啊,换一个问题,

回忆回忆,咱们第一天学UIScrollView的时候,咱们是不是要设置UIScrollView的contentSize,吧,然后它就可以滚动了,

设置它的contentSize,等于UIScrollView里面,实际内容的大小,

回忆一下,那天咱们设置的时候,是在哪里,在什么地方,设置的UIScrollView的contentSize,哪里,

是不是控制器的viewDidLoad,方法,

也就是说,如果说,当前,你是在控制器里面,的话,只要控制器里面的这个View,控制器所管理的这个View加载完毕,也就意味着,View里面的所有子控件,包括UIScrollView,是不是全都加载完毕了,

也就是说,当之前UIScrollView都加载完毕以后,这个时候,你就可以用这个UIScrollView了,用UIScrollView,我们就可以设置UIScrollView的contentSize,等于它的实际大小,

在控制器的viewDidLoad方法当中,等我们的UIScrollView,包括控制器所管理的View,全都加载完毕以后,表示它们都准备好了,

准备好以后,接下来,我们就可以使用这个UIScrollView,通过self,拿到scrollView,就可以设置它的contentSize,了吧,

这是没有问题的,那么,其实同样的道理,在我们这里,headerView里面,也是,在什么情况下,这个UIScrollView,就已经准备好了呢,

只要当它准备好了,我们是不是接下来,就可以去设置它的contentSize,了吧,,

也就是说,我们现在这个设置UIScrollView的contentSize,

这个代码,应该写在什么地方,其实我不管它写在什么地方,反正这个地方,一定是等这个UIScrollView,等这个UIScrollView加载好以后,才能用它啊,

也就是说,我们这里在找一个方法,这个方法是等我们这个headerView,完全加载完毕以后,也就意味着里面,

HeaderView

也就意味着里面子控件,UIScrollView,是不是也加载完毕了,

在这个headerView完全加载完毕以后,在那个地方,我要拿到这个HeaderView当中的UIScrollView,设置它的contentSize,

也就是说,我们得等这个HeaderView,加载完毕,才能拿到里面控件,才能让里面的控件干活儿啊,

那么现在的问题就是,又回到了这么一个地方,

在这个HeaderView里面,哪个方法才表示我们HeaderView,完全加载完毕了呢,

哪个方法?

9.其实,这里就给大家介绍一个新的这么一个方法,

一个什么方法呢,

来,我们看一下,给大家打开我们的这个笔记,

笔记里面有这么一个方法,

方法

往下找一下,

找到这个方法

找到这个方法,

我们在这个View里面,有一个方法,叫做

awakeFromNib,

awake,什么意思,

唤醒,醒来吧,

醒来,from,Nib,

Nib,指的是什么意思,

Nib,就是那个xib,吧,

我们说,在这个UIView里面呢,它有这么一个方法,

方法

我们这里的awakeFromNib,这个awake方法啊,

我们看一下,我们这个awake方法,

awakeFromNib

看一下这个awakeFromNib,方法,

awakeFromNib方法

那么,在我们的View里面,有一个叫做awakeFromNib,的方法,

这个方法,我解释一下,什么意思,

唤醒,从,Nib,就是从这个xib,里面唤醒,

苹果它假设,它想象,它认为,这一个一个的小控件,

小控件

这一个一个的小控件,都是在我们这个xib里面,

是不是都在我们xib里面啊,

这些控件,是不是都在xib里面,

它认为,当这个xib没有被加载的时候,当xib没有被加载的时候,在手机上放着,没有被加载起来的时候,它认为xib,把里面所有的控件,都给冻结了,

都给冻结了,好比说,这些控件,都在这个xib里面,被冻住了,

冻结

这些控件,它们就像小精灵一样,被冻住了,它们不能动,

当你调用loadNibNamed,时候,当你加载这个xib的时候,意味着,把这个xib里面这个小控件,给它唤醒了,

唤醒以后,它就能干活儿了,

也就是说,我们在这里,这个方法,

awakeFromNib

- (void)awakeFromNib

这个方法,意味着,唤醒了,当这个方法一被执行,也就意味着,在这个xib中,这些控件,都被唤醒了,

控件都被唤醒了,意味着,控件是不是就可以用了,

所以说,我们要的就是,当这个控件可以加载完毕以后,当这个控件加载完毕,可以被用的时候,我们是不是就要访问这个控件啊,

那么,这个从xib中唤醒的意思就是,当这个控件,已经从xib中被唤醒了,意思就是说,这个控件已经准备好了,

它可以被用了,

当它可以被用的时候,在这个地方,我们就可以用它了,

10.怎么来用呢,就是我们这个,

self.scrollView.contentSize = … ;

然后我们在这里,是不是就可以设置它的内容了,

可以使用

然后,我们在这里,可以设置它的contentSize,contentInset,contentOffset,

是不是都可以设置了,

所以说,在这个地方,就可以操作我们的scrollView,

当我们的控件,从xib里面一加载起来的时候,

就是,当这个对象一创建好以后,

对象

就可以执行这个方法,

方法

这个方法,awakeFromNib,就类似于一个事件,

事件

这个awakeFromNib,方法,就相当于一个事件,不需要我们手动调用,

它是自动的,

当加载完毕以后,它会自动来调这个方法,

就相当于是个事件,

//在这里,就表示CZHeaderView已经从xib中创建好了,

当这个方法被执行的时候,就表示当前这个HeaderView,已经从xib里面被加载好了,

//当这个方法被执行的时候,就表示CZHeaderView已经从xib中创建好了,那么也就意味着,在CZHeaderView中的所有的子控件也都创建好了,所以就可以使用UIScrollView,了吧,

//UIScrollView,是不是也是它里面的一个子控件,

//也就表示,UIScrollView,也创建好了,

//所以,在这里去写那个图片轮播,那个代码,就OK了,

- (void)awakeFromNib{

//在这里就表示CZHeaderView已经从xib中创建好了,

//self.scrollView.contentSize = … ;

}

那么,图片轮播,是不是需要一个NSTimer吧,

NSTimer,你直接在这里写NSTimer属性,然后呢,在下面,动态创建一个NSTimer,就OK了,

计时器

然后,监听事件,设代理,是不是都让它自己作为代理了,

代理

让它自己作为代理,都可以写了,

OK,这是我们这个,图片轮播,

图片

那么,现在大家只要把这个代码填完,这个功能就基本上OK了,

然后,大家先休息一下吧,休息一下吧,

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
iOS 开发中,TableView 是一个非常重要的视图控件,用于展示大量数据。而 TableView 中的 HeaderView 和 FooterView 也是非常重要的组件,可以用于展示一些额外的信息或者操作按钮。在 TableView 中,我们可以通过注册重用标识符来复用 Cell,但是对于 HeaderView 和 FooterView 却没有提供类似的注册方法。本文将介绍如何在 TableView 中循环利用 HeaderView,并且还会介绍如何自定义 HeaderView。 ## 循环利用 TableView 中的 HeaderView 在 TableView 中,我们可以通过以下方法来设置 HeaderView: ``` - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.bounds.size.width, 44)]; headerView.backgroundColor = [UIColor grayColor]; return headerView; } - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { return 44; } ``` 上面的代码中,我们通过实现 `tableView:viewForHeaderInSection:` 方法来设置 HeaderView 的内容和样式,通过实现 `tableView:heightForHeaderInSection:` 方法来设置 HeaderView 的高度。但是如果我们在 TableView 中有很多组数据,每次都创建一个新的 HeaderView 会非常消耗性能,因此我们需要对 HeaderView 进行循环利用。 循环利用 HeaderView 的实现方法非常简单,我们只需要在 TableView 的代理方法中通过 `dequeueReusableHeaderFooterViewWithIdentifier:` 方法来获取 HeaderView,如果获取到的 HeaderView 为 nil,就创建一个新的 HeaderView,否则就返回重用的 HeaderView。 ``` - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { static NSString *headerIdentifier = @"headerIdentifier"; UITableViewHeaderFooterView *headerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:headerIdentifier]; if (!headerView) { headerView = [[UITableViewHeaderFooterView alloc] initWithReuseIdentifier:headerIdentifier]; headerView.contentView.backgroundColor = [UIColor grayColor]; } return headerView; } ``` 上面的代码中,我们首先定义一个静态的重用标识符 `headerIdentifier`,然后通过 `dequeueReusableHeaderFooterViewWithIdentifier:` 方法获取重用的 HeaderView。如果获取到的 HeaderView 为 nil,我们就创建一个新的 HeaderView,并且设置它的重用标识符为 `headerIdentifier`。最后,我们设置 HeaderView 的背景颜色,并且返回 HeaderView。 ## 自定义 TableView 中的 HeaderView 除了循环利用 HeaderView,我们还可以自定义 HeaderView。自定义 HeaderView 的方法与自定义 Cell 的方法类似,我们需要在 XIB 或者代码中创建一个自定义的 HeaderView,然后在 TableView 的代理方法中返回它。 ### 在 XIB 中创建自定义 HeaderView 在 XIB 中创建自定义 HeaderView 的方法非常简单,我们只需要创建一个新的 XIB 文件,然后在 XIB 中添加一个 UIView,将它的 Class 设置为 UITableViewHeaderFooterView,接着就可以在 XIB 中自定义 HeaderView 的内容和样式了。 创建完成后,我们需要在代码中注册这个 XIB 文件,并且设置它的重用标识符。在 TableView 的初始化方法中,我们可以通过以下方法来注册 XIB 文件: ``` UINib *headerNib = [UINib nibWithNibName:@"HeaderView" bundle:nil]; [tableView registerNib:headerNib forHeaderFooterViewReuseIdentifier:@"headerIdentifier"]; ``` 上面的代码中,我们首先通过 `nibWithNibName:bundle:` 方法加载 XIB 文件,然后通过 `registerNib:forHeaderFooterViewReuseIdentifier:` 方法注册 XIB 文件,并且设置它的重用标识符为 `headerIdentifier`。 最后,在 TableView 的代理方法中,我们可以通过以下方法来获取自定义的 HeaderView: ``` - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { static NSString *headerIdentifier = @"headerIdentifier"; UITableViewHeaderFooterView *headerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:headerIdentifier]; return headerView; } ``` ### 在代码中创建自定义 HeaderView 在代码中创建自定义 HeaderView 的方法也非常简单,我们只需要创建一个继承自 UITableViewHeaderFooterView 的类,然后在这个类中实现自定义 HeaderView 的内容和样式。 ``` @interface CustomHeaderView : UITableViewHeaderFooterView @property (nonatomic, strong) UILabel *titleLabel; @end @implementation CustomHeaderView - (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier { if (self = [super initWithReuseIdentifier:reuseIdentifier]) { self.contentView.backgroundColor = [UIColor grayColor]; self.titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 0, self.contentView.bounds.size.width - 20, self.contentView.bounds.size.height)]; self.titleLabel.font = [UIFont systemFontOfSize:16]; self.titleLabel.textColor = [UIColor whiteColor]; [self.contentView addSubview:self.titleLabel]; } return self; } @end ``` 上面的代码中,我们创建了一个名为 `CustomHeaderView` 的类,继承自 UITableViewHeaderFooterView。在这个类的初始化方法中,我们设置了 HeaderView 的背景颜色,并且创建了一个 UILabel 来显示标题,最后将它添加到 HeaderView 的 contentView 上。 创建完成后,我们需要在代码中注册这个自定义 HeaderView,并且设置它的重用标识符。在 TableView 的初始化方法中,我们可以通过以下方法来注册自定义 HeaderView: ``` [tableView registerClass:[CustomHeaderView class] forHeaderFooterViewReuseIdentifier:@"headerIdentifier"]; ``` 上面的代码中,我们通过 `registerClass:forHeaderFooterViewReuseIdentifier:` 方法注册自定义 HeaderView,并且设置它的重用标识符为 `headerIdentifier`。 最后,在 TableView 的代理方法中,我们可以通过以下方法来获取自定义的 HeaderView: ``` - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { static NSString *headerIdentifier = @"headerIdentifier"; CustomHeaderView *headerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:headerIdentifier]; headerView.titleLabel.text = [NSString stringWithFormat:@"Header %ld", section]; return headerView; } ``` 上面的代码中,我们首先定义一个静态的重用标识符 `headerIdentifier`,然后通过 `dequeueReusableHeaderFooterViewWithIdentifier:` 方法获取自定义的 HeaderView,并且设置它的标题为 `Header section`。最后,我们返回自定义的 HeaderView。 总结 在本文中,我们介绍了如何在 TableView 中循环利用 HeaderView,并且还介绍了如何自定义 HeaderView。循环利用 HeaderView 可以提高 TableView 的性能,自定义 HeaderView 可以让我们更加灵活地控制 HeaderView 的样式和内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清风清晨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值