【QQ好友列表展示-设置HeaderView03 Objective-C语言】

一、上午咱们说到，可以点击实现展开、和合上了吧

1.那么，接下来，我们再说一下，通过点击实现这个小三角图片的旋转

当它是合上的时候，让这个图片向右、指向右边

当它点开、展开的时候，让这个小箭头儿，指向下边、向下

向下转，是不是等于转了90度吧

那么，我们让这个图片旋转，是通过什么来实现的

是不是我们可以通过transform、来实现旋转吧

当我们点击这个按钮的时候，除了让它展开以外，还要实现让这个图片旋转90度

所以，我们这个代码，是不是也要在按钮的点击事件里面去写

找到我们这个自定义的headerView、找到里面这个click事件

这个就是我们这个按钮的点击事件

在这个里面，

1）第一步，就是让组的状态变一下

变成它的相反的状态

如果原来是展开、就合上

如果原来是合上、就展开

2）第二步，就是刷新tableView，调用一下控制器里面的这个

groupHeaderViewDidClickTitleButton

把数据刷新一下

可以看到它展开的一个效果

3）第三步，让按钮上的图片，实现旋转

OK，要想实现旋转，是不是得拿到我们按钮里面这个图片

self.btnGroupTitle

这是那个按钮

按钮中的图片，是不是叫imageView啊

self.btnGroupTitle.imageView

这样就拿到了按钮中的图片

怎么让它旋转呢，就是设置它的transform属性

让它这个transform，是不是等于这个旋转的值，就OK了

等于一个旋转的值

那么，这个值，等于多少呢

这个旋转，它本来是一个结构体

所以说，我们这个旋转的结构体，应该是

CGAffineTransformMakeRotation（CGFloat angle）

就是让它旋转一下啊

旋转多少度呢

是不是90度

90度怎么写，M_PI_2

我们说，PI 除以 2 ， 就是90 度吧

运行起来看一下

点一下，这个小三角，往下转了一下，是不是马上又转回去了

转过来，又转回去了，我给大家解释一下啊

1）首先：点击按钮的时候，设置这个visible，是不是让它等于状态给它变一下吧

2）然后：是不是要调这个代理方法

代理方法，是要干什么，是要让数据是不是重新刷新一下

让数据重新刷新一下

3）然后：这句话的意思是

让当前这个headerView的图片旋转一下啊

那么，现在，我只要把这个代码注释掉

把这个刷新这个代码注释掉

注释掉以后，我们再看一下

看到了吗，变了没

变了吧

也就是说，只要没有这个重新刷新UITableView的这个代码

我们发现，就可以转吧

但是，有了这个代码以后，转了以后，是不是立刻就回去了

谁能告诉我，为什么，

因为，注意看，

控制器里面，这，是不是我们重新刷新tableView的代码

因为我们这里用的是一个动画

所以，能看到它先转过来，是不是又转回去了

如果这里没有动画的话，你根本看不到这个转过来

你一点它，看到的就像没转一样

因为我们这里刷新那个UITableView，使用了一个动画的方式

所以说，是不是稍微慢点儿吧，所以你才能看到先转过来，又转过去

如果这个地方不是使用动画，你根本就看不到这个效果，点了跟没点一样

看起来，就以为没转呢

我说一下原因，就是这样的

比如说，这是我们的什么

这是我们一个一个组的Cell

一个、两个、三个

每个组的Cell里面，是不是都有一个按钮啊

是不是都有这个按钮

然后呢，按钮里面，有一个什么

是不是有一个图片吧

现在这儿是不是有这么一个按钮

这里是有这么样的一个按钮

那么，假设后面这些都是一样的，就不一个一个画了

那么，当我点击按钮的时候

1）首先，让visible改一个状态吧

首先，执行这句代码

self.group.visible = ! self.group.isVisible;

2）执行完这句代码以后，是不是要执行这句代码，这个旋转的代码啊

self.btnGroupTitle.imageView.transform = CGAffineTransformMakeRotation(M_PI_2);

执行这句旋转的代码

那么，接下来，执行完这句代码之后，执行一个旋转的时候，是怎么执行

就是，执行旋转，就直接让这个图片，转、转、转

我这样吧，我先在这儿给它放一个图片框

这是一个图片框

把三角加进来

我们说，这个图片，是不是在这个图片框里啊

现在我们是不是就看到这个效果了

这里有个图片框，图片框里有个图片

当我旋转的时候，就把这个图片转、转、转、转、转

是不是转成这个效果了

转成这个效果以后，因为它要拉伸，所以图片看起来窄了吧

好，那么这样的话，把这个拉伸了

当我们点击按钮的时候，是不是首先执行的这句话，就把它拉伸了

但是，我们紧接着，这里是不是有个调用代理方法啊

代理方法，当调用代理方法的时候，它里面会怎么做呢

它会重新刷新数据

控制器里面，reload方法

控制器

控制器里面，是不是有个reloadSections

reload“组”这个方法

reload这个方法，当重新刷新的时候

其实，意思就是，把当前的这个UITableView里面的所有的内容

全都给它删掉

把所有的内容都给它删掉

把这所有的内容都给它删掉

删掉

然后，重新再创建一个一个的组、包括里面的图片

是不是全都重新创建啊

也就是说，为什么我们刚才看到的效果是，先转过来，又转回去了呢

原因就是，当我们点击了这个按钮的时候

首先执行这句话

把当前被点击的这个按钮当中的图片，是不是转过来了

当转过来以后，这里是不是还有一个调用代理方法，这个方法啊

当你调代理方法的时候，它会重新刷新数据，重新刷新数据，本来你一点，让这个按钮转过来了

结果一重新刷新数据，把整个这个按钮是不是全都给它删掉了

重新创建新的按钮

所以说，我们看到就是，先转过来，又转过去

那么，有同学会说，不对吧

你这个不是说，先调的代理方法吗

你先调的代理方法，后转过去的吧

那么，注意，因为代理方法里面，有个动画

所以说，当调代理方法的时候，动画还没有执行完的时候，当调代理方法的时候，是不是可以看到那个动画那个效果吧

因为它转的时候，是不是有动画那个效果啊

有动画那个效果，然后，相当于我们在点击这个按钮的时候，

当你执行代理方法的时候，

本来应该直接就刷新

直接刷新，你根本什么都看不到

但是因为执行代理方法的时候，它有一个动画的一个时间

在动画的那个时间还没到的时候，下面这句话先把它转过来了

转过来以后，然后再执行动画，然后是不是就看到中间有一个短暂的一个反复的一个过程吧

关键是这个时候，转的时候，让谁转了

比如说，这里还是有我们这么一个按钮

有这么一个按钮

一开始是，这里有这么一个按钮

注意，当你点击的时候

一点击这个按钮，里面有一个self

self表示谁，是不是当前被点击那个groupHeader

也就是说，这个self，当你点击这个按钮的时候，

在这个点击事件里面

self，表示是当前被点击的这个按钮所在的那个headerView吧

那么，所以说，这个self，表示的就是当前这个headerView

然后，通过这个self，拿到的按钮，就是当前这个按钮

所以说，一点击，这里一点击，立刻让当前这个按钮的图片旋转

是让当前被点的这个按钮的图片，执行旋转

让它转了一下

当它转完以后，我们后面代理方法，开始执行

代理方法开始执行，当它转完以后，那么，继续

这是动画吗，然后接着执行

代理方法一执行，意味着，重新刷新UITableView的指定的组

一重新刷新着一组，刚才是什么样的，这个被点的按钮

给它刷新了

当这个组重新刷新的时候，

所有的，刚才已经，所有这些内容，全都作废

都删掉

然后，重新增加新的一批那个headerView

所以说，刚才那个转的东西，是不是又回来了

是这个意思

7.那么，怎么解决这个问题呢

解决这个问题的思路，就是

刚才，之所以产生这个问题，

是因为什么啊，

对，是因为你先点击了这个按钮

它是不是先旋转了

然后，重新加载的时候，又加载了一批新的一些headerView吧

又加载了新的一批headerView

也就是说，刚才那个旋转，无论如何，是不是迟早都会被替代的啊

所以说，这个时候，怎么办

就是，我们在这个headerView，不要当我们点击的时候，当用户点击它的时候，

转完以后，一旦它被覆盖的话，是不是就白转了

而是任何一个headerView，点击的时候，其实我根本不转

就是把它这个状态给它改一下

就是，当我点的时候，把它的状态改一下

将来我要转，什么时候转呢

当这个，我们说，这个headerView

在控制器的这个数据源方法当中

我们是不是要创建一个新的headerView吧

创建的这个新的headerView

那么，它返回以后，

返回以后，是不是迟早都会加到这个UITableView里面

当这个新的headerView，加到UITableView里面的时候，我判断一下，它所对应的那个group模型里面的isVisible，状态应该是“展开”、还是“合上”

如果是“展开”，我就把它那个图片转一下，向下

也就是说，每次有一个新的headerView，它是不是迟早都要加到UITableView里面

当它刚刚加到UITableView里面的时候，这个时候，再根据当前这组的对应的状态，是不是让它转一下啊

所以说，其实分成两个地方来执行，当你点击这个按钮的时候，

当你点击这个按钮的时候：

1）只是把这个headerView对应的状态改一下

2）然后，当你重新刷新UITableView的时候，是不是重新创建headerView

当你重新创建headerView的时候，新的headerView一定会加到UITableView里面，

3）然后呢，在我们这个headerView里面，有一个方法，就是didMoveToSuperview

然后，选中上面这句旋转的代码

command + X

到这个didMoveToSuperview方法里面，command + V

然后，就是我们，当你点击这个组：

1）第一步：先把这个组的状态，改成你要的“展开”、或者说是“合上”

2）第二步：刷新UITableView

当刷新UITableView的时候

就会重新创建一个新的headerView

当前这个headerView，是不是就不要了

当前这个self对象，就是当前我们看到的这个headerView，是不是就会

即将被销毁了

即将被销毁，它就不要了

然后呢，你刷新的时候，创建一个新的headerView

那么当前，创建新的headerView，当新的headerView，加到它的父控件里面的时候

在这个里面，做一个判断

如果，if（condition）

如果，当前的这个self.group.isVisible

如果是展开

就让它旋转90度吧，选中下面这句话，command + X

是不是向下旋转啊

如果要是“闭合”的状态，就让它干什么

让它是不是，旋转回到原来的位置啊

回到原来的位置，是不是就OK了

0 ， 回到原来的位置

OK，这就是我们这里这个东西

注意，这个方法是什么时候调用

//当一个新的headerView，已经加到某个父控件中的时候执行这个方法

当当前这个headerView，加到某个父控件里面的时候，会执行我们当前的这么一个方法

好，这就是我们这里所说的，这么一个意思

那么，我再说一下这个流程

1）第一步：当点击的时候，设置组的状态

2）第二步：刷新UITableView

3）第三步：刷新的时候，就会重新创建新的headerView

新的headerView，就会加到父控件中

当这个新的headerView，加到父控件的时候

4）第四步：看一下，这个headerView对应的这个组的状态，是“展开”、还是“合上

如果是“展开”，把它向下旋转90度

如果是”闭合“，把它转到原始的位置

好，运行一下看看

转过来了吧

好看不好看，不好看，为啥不好看

变长了吧

为啥变长了

这是不是还有其他问题啊，我们先解决这个变长的问题

变长的问题，就是刚才给大家说的

按钮中，这个图片框，是不是长的啊

一开始，是这么一个效果

然后，当你旋转的时候，

把它转成向下

把它转成向下以后，它要适应这个图片框

所以说，它会怎么样

变长、变窄

这样，是不是适应这个图片框了吧

所以说，是不是变得难看了

这是因为，按钮中这个图片框，默认里面显示图片的模式，造成的

contentMode

造成的

来，我们改一下这个图片的模式

找到这个自定义的headerView里面

找到我们创建按钮的这个方法

这是创建按钮，创建按钮的方法里面

这里，设置按钮中图片的显示模式

//设置按钮中图片的显示模式

当前这个按钮的imageView，是不是里面的图片

里面有一个叫contentMode的属性

显示模式，是UIViewContentMode类型

把它改成一个UIViewContentMode，是什么

额，center，

center，是不是显示在中间

显示在中间，不要给我拉伸、缩放了

就给我显示到中间

然后，我们看看，改成这样以后，我们再运行

看到了吗

好看吗，

注意，这个是它转过来以后，发现两边是不是超出了imageView，是不是截掉了吧

直接截掉了，

把超出部分，截掉了

那么，如果不想让它截掉的话，怎么办

设置一个属性，

//设置图片框超出的部分不要截掉

按钮的imageView，有一个叫做clipsToBounds属性

按照边界给我截取一下，要截取吗，不要，NO

再看看

好看了吗

好看了吧，这样儿就好看了吧

这就是我们这里这个图片旋转的思路：

1）点击的时候，只修改它的状态

2）然后刷新UITableView

3）当刷新UITableView的时候，会重新创建一个headerView

4）当这个新的headerView加到父控件的时候，然后再根据状态，来让它旋转一下

好，这是我们这里的一个旋转

关于这个旋转，我们就说到这里

然后，还有一个问题

8.因为一开始，所有按钮的小三角图片，是不是都是闭合状态的

所以说，所有三角，是不是都是向右的吧，都是指向右的吧

然后呢，我让第一个按钮点开

让第二个展开

让第三个展开

让第四个展开

然后，注意看，第五个这个大学

我还没点，它就展开了，为什么

再看，这个展开了吧，这个怎么合上了？

这个明明应该展开，为什么合上了、为什么没有展开呢

对，这就是我们单元格重用的时候，造成的吧

因为刚才最上面那个“我的好友”，它滚上去以后，它是不是展开状态啊

把它滚上去以后，后面滚进来的

新的这个，这一组，是不是它要重用刚才“我的好友”那个组的headerView

重用那个headerView的时候，因为headerView是不是展开的，向下的

所以说，重用的时候，这个是不是也是向下的

所以说，怎么解决这个问题

在每次重用这个单元格、headerView的时候，把它所有的状态，是不是先给它重新判断、重新改一下，就OK了

就是，要把一个新的、要把重用的一个headerView、或者重用的一个Cell

要把它们所有的状态、数据，全都改一下，就可以了

这就是我们headerView重用的时候，也有这样的问题

8.来，看一下怎么去改

在我们这里，设置数据的时候

选中上面的代码

command + C

除了把这个按钮的数据给它设置完毕以后

然后再设置一个什么，设置按钮中的图片旋转问题

//设置按钮中的图片旋转问题

command + V

//设置按钮中的图片旋转问题

就是说，因为你当前拿到这个headerView，可能是上一个被别人重用的一个headerView

为了让这个headerView里面的图片，和你当前这一组的这个状态保持一致

所以说，每次当你拿到一个新的headerView以后，

先根据headerView、先根据这个组的状态

把这个新的headerView，是不是旋转一下吧

这样的话，保证新的headerView，是不是不会保留上次旧的headerView的状态啊

让它再转一下，这样就没错了

运行一下看看

看看，这回没有问题了吧

这是我们这里所说的一个header重用的这么一个问题

三、这个好友的昵称，要根据当前这个好友是不是会员

1.如果是会员，就让它的文字变成红色

如果不是会员，就让它的文字变成黑色

这个在哪儿写呢

是不是要根据当前这个好友的那个是不是vip来设置

是不是在设置好友数据那个地方

OK，我们说，好友那个自定义Cell

在哪里

这个是不是好友的自定义Cell啊

在这里地方，设置数据的时候

在这里，设置数据的时候

这个是自定义的Cell，刚才是自定义的headerView

//根据当前的好友是不是vip来决定是否要将“昵称”显示为红色

这里怎么显示

让当前的这个self“点”textLabel

self“点”textLabel“点”textColor，是不是要等于一个颜色

self.textLabel.textColor =

但是，到底什么颜色，取决于什么

取决于当前friendModel

friendModel“点”是不是有个vip属性

friendModel.isVip

如果它是会员，什么颜色

红色

如果它不是会员，什么颜色，黑色

这样的话，就设置了这个Label的颜色了

每次，执行这个设置数据的时候，都会根据我们当前这个朋友、当前这个好友，是不是会员，而设置不同的颜色

再看看，会员，是不是都红了

OK，这样的话，我们关于这个案例，基本就告一段落了

2.来，咱们回忆一下，在这个里面，我们

1）显示数据，是不是和之前那几天的案例都是一样的

2）唯独是不是就增加了一个这个点击这个效果啊，唯独就是headerView，分组的头里面，变成一个view，不是一个文字了

3）然后呢，它有点击事件，点击事件，展开的时候，这个小三角旋转

无非就加了这么三个新功能啊

嗯，这个是

小三角图片的旋转问题

会员名字变红

然后，图片旋转，搞定了

然后呢，展开、闭合，搞定了

自定义headerView，搞定了

设置headerView里面，每一个子控件的大小、位置，这个也搞定了

好，这儿需要给大家强调一点，说一下这点，注意听

OK，来看看，我们这里要说的是一个什么东西呢

刚才，我们有没有发现，在我们，就是这个headerView里面

这个东西，我们是不是自己写了一个类，来表示这个headerView啊

那么，其实我们想想，每一组的这个headerView

是不是都是长的一样的，都是一个按钮、和一个Label吧

都是一个按钮、和一个Label

其实我们这儿，用xib是不是就OK了

用xib里面，拖一个view，然后往里面拖个按钮，是不是就OK了

拖一个那个UITableViewHeaderFooterView，

然后，里面拖两个按钮，

是不是没有必要，完全自定义一个headerViewCell

然后里面动态去创建这些子控件、设置坐标吧

这么做，是不是写了一堆代码啊

但是，为什么咱们这里没有用xib呢

原因是，我们xib里面，是没法拖这个控件的

就是我们这个控件

这个，UITableViewHeaderFooterView

这个控件，是没法拖的

UIView，我们说，是不是在工具箱里面，是不是直接有个UIView，

直接拖到我们xib里面吧

UITableViewCell，是也有一个控件，能直接拖进来

但是，这个UITableViewHeaderFooterView，

这个控件，工具箱里面，是没有这个控件的

没法拖到xib上的

明白，所以说，这个地方，虽然这个headerView

可以用xib，但是我们也是手写的

用一个完全动态创建子控件的方式，

原因就是xib，它拖不上这个headerFooterView吧

这个也搞定了

懒加载数据，也搞定了

好，关于我们QQ好友列表，这个就搞定了