1. @required
3. //askthedelegatehowmanyviewshewantstopresentinsidethehorizontalscroller
5. -(NSInteger)numberOfViewsForHorizontalScroller:(HorizontalScroller*)scroller;
9. //askthedelegatetoreturntheviewthatshouldappearat<index>
11. -(UIView*)horizontalScroller:(HorizontalScroller*)scrollerviewAtIndex:(int)index;
15. //informthedelegatewhattheviewat<index>hasbeenclicked
17. -(void)horizontalScroller:(HorizontalScroller*)scrollerclickedViewAtIndex:(int)index;
21. @optional
23. //askthedelegatefortheindexoftheinitialviewtodisplay.thismethodisoptional
25. //anddefaultsto0ifit'snotimplementedbythedelegate
27. -(NSInteger)initialViewIndexForHorizontalScroller:(HorizontalScroller*)scroller;

这里你既有必需的方法也有可选方法。必需的方法要求委托必须实现它，因为它提供一些必需的数据。在这里，必需的是视图的数量，指定索引位置的视图，以及用户点击视图后的行为，可选的方法是初始化视图；如果它没有实现，那么HorizontalScroller将缺省用第一个索引的视图。

下一步，你需要在 HorizontalScroller 类中引用新建的委托。但是委托的定义是在类的定义之后的，所以在类中它是不可见的，怎么办呢？

解决方案就是前置声明委托协议以便编译器（和 Xcode ）知道协议的存在。如何做？你只需要在 @interface 行前面增加下面的代码即可：

@protocol HorizontalScrollerDelegate;

继续在 HorizontalScroller.h 文件中，在 @interface 和 @end 之间增加如下的语句：

Objective-c代码

1. @property(weak)id<HorizontalScrollerDelegate>delegate;
2. -(void)reload;

这里你声明属性为 weak. 这样做是为了防止循环引用。如果一个类强引用它的委托，它的委托也强引用那个类，那么你的 app 将会出现内存泄露，因为任何一个类都不能释放调分配给另一个类的内存。

id 意味着 delegate 属性可以用任何遵从 HorizontalScrollerDelegate 的类赋值，这样可以保障一定的类型安全。

reload 方法在 UITableView 的 reloadData 方法之后被调用，它重新加载所有的数据去构建水平滚动视图。

用如下的代码取代 HorizontalScroller.m 的内容：

Objective-c代码

1. #import"HorizontalScroller.h"
5. //1
7. #defineVIEW_PADDING10
9. #defineVIEW_DIMENSIONS100
11. #defineVIEWS_OFFSET100
15. //2
17. @interfaceHorizontalScroller()<UIScrollViewDelegate>
19. @end
22. //3
24. @implementationHorizontalScroller
26. {
28. UIScrollView*scroller;
30. }
34. @end

让我们来对上面每个注释块的内容进行一一分析：

1. 定义了一系列的常量以方便在设计的时候修改视图的布局。水平滚动视图中的每个子视图都将是 100*100,10 点的边框的矩形 .

2. HorizontalScroller 遵循 UIScrollViewDelegate 协议。因为 HorizontalScroller 使用 UIScrollerView 去滚动专辑封面，所以它需要用户停止滚动类似的事件

3. 创建了 UIScrollerView 的实例。

下一步你需要实现初始化器。增加下面的代码：

Objective-c代码

1. -(id)initWithFrame:(CGRect)frame
3. {
5. self=[superinitWithFrame:frame];
7. if(self)
9. {
11. scroller=[[UIScrollViewalloc]initWithFrame:CGRectMake(0,0,frame.size.width,frame.size.height)];
13. scroller.delegate=self;
15. [selfaddSubview:scroller];
17. UITapGestureRecognizer*tapRecognizer=[[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(scrollerTapped:)];
19. [scrolleraddGestureRecognizer:tapRecognizer];
21. }
23. returnself;
25. }

滚动视图完全充满了 HorizontalScroller 。 UITapGestureRecognizer 检测滚动视图的触摸事件，它将检测专辑封面是否被点击了。如果专辑封面被点击了，它会通知 HorizontalScroller 的委托。

现在，增加下面的代码：

Objective-c代码

1. -(void)scrollerTapped:(UITapGestureRecognizer*)gesture
3. {
5. CGPointlocation=[gesturelocationInView:gesture.view];
7. //wecan'tuseanenumeratorhere,becausewedon'twanttoenumerateoverALLoftheUIScrollViewsubviews.
9. //wewanttoenumerateonlythesubviewsthatweadded
11. for(intindex=0;index<[self.delegatenumberOfViewsForHorizontalScroller:self];index++)
13. {
15. UIView*view=scroller.subviews[index];
17. if(CGRectContainsPoint(view.frame,location))
19. {
21. [self.delegatehorizontalScroller:selfclickedViewAtIndex:index];
23. [scrollersetContentOffset:CGPointMake(view.frame.origin.x-self.frame.size.width/2+view.frame.size.width/2,0)animated:YES];
25. break;
27. }
29. }
31. }

Gesture 对象被当做参数传递，让你通过 locationInView ：导出点击的位置。

接下来，你调用了 numberOfViewsForHorizontalScroller: 委托方法， HorizontalScroller 实例除了知道它可以安全的发送这个消息给委托之外，它不知道其它关于委托的信息，因为委托必须遵循 HorizontalScrollerDelegate 协议。

对于滚动视图中的每个子视图，通过 CGRectContainsPoint 方法发现被点击的视图。当你已经找到了被点击的视图，给委托发送 horizontalScroller:clickedViewAtIndex: 消息。在退出循环之前，将被点击的视图放置到滚动视图的中间。

现在增加下面的代码去重新加载滚动视图：

Objective-c代码

1. -(void)reload
3. {
5. //1-nothingtoloadifthere'snodelegate
7. if(self.delegate==nil)return;
11. //2-removeallsubviews
13. [scroller.subviewsenumerateObjectsUsingBlock:^(idobj,NSUIntegeridx,BOOL*stop){
15. [objremoveFromSuperview];
17. }];
21. //3-xValueisthestartingpointoftheviewsinsidethescroller
23. CGFloatxValue=VIEWS_OFFSET;
25. for(inti=0;i<[self.delegatenumberOfViewsForHorizontalScroller:self];i++)
27. {
29. //4-addaviewattherightposition
31. xValue+=VIEW_PADDING;
33. UIView*view=[self.delegatehorizontalScroller:selfviewAtIndex:i];
35. view.frame=CGRectMake(xValue,VIEW_PADDING,VIEW_DIMENSIONS,VIEW_DIMENSIONS);
37. [scrolleraddSubview:view];
39. xValue+=VIEW_DIMENSIONS+VIEW_PADDING;
41. }
45. //5
47. [scrollersetContentSize:CGSizeMake(xValue+VIEWS_OFFSET,self.frame.size.height)];
51. //6-ifaninitialviewisdefined,centerthescrolleronit
53. if([self.delegaterespondsToSelector:@selector(initialViewIndexForHorizontalScroller:)])
55. {
57. intinitialView=[self.delegateinitialViewIndexForHorizontalScroller:self];
59. [scrollersetContentOffset:CGPointMake(initialView*(VIEW_DIMENSIONS+(2*VIEW_PADDING)),0)animated:YES];
61. }
63. }

我们来一步步的分析代码中有注释的地方：

1. 如果没有委托，那么不需要做任何事情，仅仅返回即可。

2. 移除之前添加到滚动视图的子视图

3. 所有的视图的位置从给定的偏移量开始。当前的偏移量是 100 ，它可以通过改变文件头部的 #DEFINE 来很容易的调整。

4. HorizontalScroller 每次从委托请求视图对象，并且根据预先设置的边框来水平的放置这些视图。

5. 一旦所有视图都设置好了以后，设置 UIScrollerView 的内容偏移（ contentOffset ）以便用户可以滚动的查看所有的专辑封面。

6. HorizontalScroller 检测是否委托实现了 initialViewIndexForHorizontalScroller: 方法，这个检测是需要的，因为这个方法是可选的。 如果委托没有实现这个方法， 0 就是缺省值。最后设置滚动视图为协议规定的初始化视图的中间。

当数据已经发生改变的时候，你要执行 reload 方法。当增加 HorizontalScroller 到另外一个视图的时候，你也需要调用 reload 方法。增加下面的代码来实现后面一种场景：

Objective-c代码

1. -(void)didMoveToSuperview
2. {
4. [selfreload];
6. }

didMoveToSuperview 方法会在视图被增加到另外一个视图作为子视图的时候调用，这正式重新加载滚动视图的最佳时机。

最后我们需要确保所有你正在浏览的专辑数据总是在滚动视图的中间。为了这样做，当用户的手指拖动滚动视图的时候，你将需要做一些计算。

再一次在 HorizontalScroller.m 中增加如下方法：

Objective-c代码

1. -(void)centerCurrentView
3. {
5. intxFinal=scroller.contentOffset.x+(VIEWS_OFFSET/2)+VIEW_PADDING;
7. intviewIndex=xFinal/(VIEW_DIMENSIONS+(2*VIEW_PADDING));
9. xFinal=viewIndex*(VIEW_DIMENSIONS+(2*VIEW_PADDING));
11. [scrollersetContentOffset:CGPointMake(xFinal,0)animated:YES];
13. [self.delegatehorizontalScroller:selfclickedViewAtIndex:viewIndex];
15. }

为了计算当前视图到中间的距离，上面的代码考虑了滚动视图当前的偏移量，视图的尺寸以及边框。最后一行代码是重要的，一当子视图被置中，你将需要将这种变化通知委托。

为了检测用户在滚动视图中的滚动，你必需增加如下的 UIScrollerViewDelegate 方法：

Objective-c代码

1. -(void)scrollViewDidEndDragging:(UIScrollView*)scrollViewwillDecelerate:(BOOL)decelerate
3. {
5. if(!decelerate)
7. {
9. [selfcenterCurrentView];
11. }
13. }
17. -(void)scrollViewDidEndDecelerating:(UIScrollView*)scrollView
19. {
21. [selfcenterCurrentView];
23. }

scrollViewDidEndDragging:willDecelerate: 方法在用户完成拖动的时候通知委托。如果视图还没有完全的停止，那么 decelerate 参数为 true. 当滚动完全停止的时候，系统将会调用 scrollViewDidEndDecelerating. 在两种情况下，我们都需要调用我们新增的方法去置中当前的视图，因为当前的视图在用户拖动以后可能已经发生了变化。

你的 HorizontalScroller 现在已经可以使用了。浏览你刚刚写的代码，没有涉及到任何与 Album 或 AlbumView 类的信息。这个相对的棒，因为这意味着这个新的滚动视图是完全的独立和可复用的。

构建的工程确保每个资源可以正确编译。

现在 HorizontalScroller 完整了，是时候去在 app 使用它了。打开 ViewController.m 增加下面的导入语句：

Objective-c代码

1. #import"HorizontalScroller.h"
2. #import"AlbumView.h"

增加 HorizontalScrollerDelegate 协议为 ViewController 遵循的协议：

Objective-c代码

1. @interfaceViewController()<UITableViewDataSource,UITableViewDelegate,HorizontalScrollerDelegate>

在类的扩展中增加下面的实例变量：

HorizontalScroller *scroller;

现在你可以实现委托方法；你可能会感到惊讶，因为只需要几行代码就可以实现大量的功能啦。

在 ViewController.m 中增加下面的代码：

Objective-c代码

1. #pragmamark-HorizontalScrollerDelegatemethods
3. -(void)horizontalScroller:(HorizontalScroller*)scrollerclickedViewAtIndex:(int)index
4. {
5. currentAlbumIndex=index;
7. [selfshowDataForAlbumAtIndex:index];
9. }

它设置保存当前专辑数据的变量，然后调用 showDataForAlbumAtIndex: 方法显示专辑数据。

注意 : 在 #pragma mark 指令后面写方法代码是一种通用的实践。 c 编译器会忽略调这些行，但是如果你通过 Xcode 的弹出框的时候，你将看到这些指令会帮你把代码组织成有独立和粗体标题的组。这可以帮你使得你的代码更方便在 Xcode 中导航。

接下来，增加下面的代码：

Objective-c代码

1. -(NSInteger)numberOfViewsForHorizontalScroller:(HorizontalScroller*)scroller
2. {
3. returnallAlbums.count;
4. }

正如你意识到的，这个是返回滚动视图所有子视图数量的协议方法。因为滚动视图要显示所有专辑的封面，这个数量就是专辑记录的数量。

现在，增加下面的代码：

Objective-c代码

1. -(UIView*)horizontalScroller:(HorizontalScroller*)scrollerviewAtIndex:(int)index
2. {
4. Album*album=allAlbums[index];
6. return[[AlbumViewalloc]initWithFrame:CGRectMake(0,0,100,100)albumCover:album.coverUrl];
8. }

这里你创建了一个新的AlbumView，并且将它传递给HorizontalScroller。

够了，仅仅三个简短的方法就可以显示一个漂亮的水平滚动视图。

是的，你任然需要创建滚动视图，并且把它增加到你的主视图中，但是在这样做之前，你增加下面的方法先：

Objective-c代码

1. -(void)reloadScroller
3. {
5. allAlbums=[[LibraryAPIsharedInstance]getAlbums];
7. if(currentAlbumIndex<0)currentAlbumIndex=0;
9. elseif(currentAlbumIndex>=allAlbums.count)currentAlbumIndex=allAlbums.count-1;
11. [scrollerreload];
15. [selfshowDataForAlbumAtIndex:currentAlbumIndex];
17. }

这个方法通过 LibraryAPI 加载专辑数据，然后根据当前视图的索引设置当前显示的视图。如果当前的视图索引小于 0 ，意味着当前没有选定任何视图，此时可以选择第一个专辑来显示，否则下面一个专辑将会显示。

现在在 viewDidLoad 的 [self showDataForAlbumAtIndex:0] 之前增加下面的代码来初始化滚动视图：

Objective-c代码

1. scroller=[[HorizontalScrolleralloc]initWithFrame:CGRectMake(0,0,self.view.frame.size.width,120)];
3. scroller.backgroundColor=[UIColorcolorWithRed:0.24fgreen:0.35fblue:0.49falpha:1];
5. scroller.delegate=self;
7. [self.viewaddSubview:scroller];
11. [selfreloadScroller];

上 面的代码简单的创建了一个 HorizontalScroller 类的实例，设置它的背景色，委托，增加它到主视图，然后加载所有子视图去显示专辑数据。

注意 : 如果一个协议变得特别冗长，包含太多的方法。你应该考虑将它氛围更家细粒度的协议。 UITableViewDelegate 和 UITableViewDataSource 是一个好的例子。因为它们都是 UITableView 的协议。试着设计你的协议以便每个协议都关注特定的功能。

构建并运行你的 on 过程，查看一下你帅气十足的水平滚动视图吧：

对了，等等。水平滚动视图没问题，但是为什么没有显示封面呢？

是的，那就对了 - 你还没有实现下载封面的代码。为了实现这个功能，你需要去新增一个下载图片的方法。因为所有对服务的访问都通过 LibraryAPI, 那我们就可以在 LibraryAPI 中实现新的方法。然而我们首先需要虑一些事情：

1. AlbumView 不应该直接和 LibraryAPI 交互。你不想混淆显示逻辑和网络交互逻辑。

2. 同样的原因， LibraryAPI 也不应该知道 AlbumView 。

3. 一旦封面已经下载， LibraryAPI 需要通知 AlbumView ，因为 AlbumView 显示专辑封面。

听上去是不是挺糊涂的？不要灰心。你将学习如何使用观察者模式来实现它。

观察者（Observer）模式

在观察者模式中，一个对象任何状态的变更都会通知另外的对改变感兴趣的对象。这些对象之间不需要知道彼此的存在，这其实是一种松耦合的设计。当某个属性变化的时候，我们通常使用这个模式去通知其它对象。

此模式的通用实现中，观察者注册自己感兴趣的其它对象的状态变更事件。当状态发生变化的时候，所有的观察者都会得到通知。苹果的推送通知（ Push Notification ）就是一个此模式的例子。

如果你要遵从 MVC 模式的概念，你需要让模型对象和视图对象在不相互直接引用的情况下通信。这正是观察者模式的用武之地。

Cocoa 通过通知（ Notifications ）和 Key-Value Observing(KVO) 来实现观察者模式。

通知（Notifications）

不要和远程推送以及本地通知所混淆，通知是一种基于订阅 - 发布模式的模型，它让发布者可以给订阅者发送消息，并且发布者不需要对订阅者有任何的了解。

通知在苹果官方被大量的使用。举例来说，当键盘弹出或者隐藏的时候，系统会独立发送 UIKeyboardWillShowNotification / UIKeyboardWillHideNotification 通知。当你的应用进入后台运行的时候，系统会发送一个 UIApplicationDidEnterBackgroundNotification 通知。

注意 : 打开 UIApplication.h, 在文件的末尾，你将看到一个由系统发出的超过 20 个通知组成的列表。

如何使用通知（Notifications）

打开 AlbumView.m ，在 initWithFrame:albumCover:: 方法的 [self addSubview:indicator]; 语句之后加入如下代码：

Objective-c代码

1. [[NSNotificationCenterdefaultCenter]postNotificationName:@"BLDownloadImageNotification"
2. object:self
3. userInfo:@{@"imageView":coverImage,@"coverUrl":albumCover}];

这行代码通过 NSNotificationCenter 单例发送了一个通知。这个通知包含了 UIImageView 和需要下载的封面 URL ，这些是你下载任务所需要的所有信息。

在 LibraryAPI.m 文件 init 方法的 isOnline=NO 之后，增加如下的代码：

Objective-c代码

1. [[NSNotificationCenterdefaultCenter]addObserver:selfselector:@selector(downloadImage:)name:@"BLDownloadImageNotification"object:nil];

这个是观察者模式中两部分的另外一部分：观察者。每次 AlbumView 发送一个 BLDownloadImageNotification 通知，因为 LibraryAPI 已经注册为同样的通知的观察者，那么系统就会通知 LibraryAPI,LibraryAPI 又会调用 downloadImage: 来响应。

然而在你实现 downloadImage: 方法之前，你必须在你的对象销毁的时候，退订所有之前订阅的通知。如果你不能正确的退订的话，一个通知发送给一个已经销毁的对象会导致你的 app 崩溃。

在 Library.m 中增加下面的代码 :

Objective-c代码

1. -(void)dealloc
2. {
3. [[NSNotificationCenterdefaultCenter]removeObserver:self];
5. }

当对象被销毁的时候，它将移除所有监听通知的观察者。

还有一件事情需要去做，将已经下载的封面图片本地存储起来是个不错的主意，这样可以避免每次都重新下载相同的封面。

打开 PersistencyManager.h 文件，增加下面两个方法原型：

Objective-c代码

1. -(void)saveImage:(UIImage*)imagefilename:(NSString*)filename;
3. -(UIImage*)getImage:(NSString*)filename;

在 PersistencyManager.m 文件中，增加方法的实现：

Objective-c代码

1. -(void)saveImage:(UIImage*)imagefilename:(NSString*)filename
3. {
5. filename=[NSHomeDirectory()stringByAppendingFormat:@"/Documents/%@",filename];
7. NSData*data=UIImagePNGRepresentation(image);
9. [datawriteToFile:filenameatomically:YES];
11. }
15. -(UIImage*)getImage:(NSString*)filename
17. {
19. filename=[NSHomeDirectory()stringByAppendingFormat:@"/Documents/%@",filename];
21. NSData*data=[NSDatadataWithContentsOfFile:filename];
23. return[UIImageimageWithData:data];
25. }

上面的代码相当直接。下载的图片会被保存在文档（ Documents ）目录，如果在文档目录不存在指定的文件， getImage: 方法将返回 nil.

现在在 LibraryAPI.m 中增加下面的方法：

Objective-c代码

1. -(void)downloadImage:(NSNotification*)notification
3. {
5. //1
7. UIImageView*imageView=notification.userInfo[@"imageView"];
9. NSString*coverUrl=notification.userInfo[@"coverUrl"];
13. //2
15. imageView.image=[persistencyManagergetImage:[coverUrllastPathComponent]];
19. if(imageView.image==nil)
21. {
23. //3
25. dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,0),^{
27. UIImage*image=[httpClientdownloadImage:coverUrl];
31. //4
33. dispatch_sync(dispatch_get_main_queue(),^{
35. imageView.image=image;
37. [persistencyManagersaveImage:imagefilename:[coverUrllastPathComponent]];
39. });
41. });
43. }
45. }

下面是以上代码分段描述：

1. downloadImage 方法是通过通知被执行的，所以通知对象会当作参数传递。 UIImageView 和图片 URL 都会从通知中获取。

2. 如果图片已经被下载过了，直接从 PersistencyManager 方法获取。

3. 如果图片还没有被下载，通过 HTTPClient 去获取它。

4. 当图片下载的时候，将它显示在 UIImageView 中，同时使用 PersistencyManager 保存到本地。

再一次，你使用了门面（ Facade ）模式隐藏了下载图片的复杂性。通知的发送者不需要关心图片是来自网络还是来自本地文件系统。

构建并运行你的应用，看看那些在滚动视图中的漂亮封面吧：

停止你的应用再一次运行它，你会注意到不会存在加载图片的延迟，因为它们都已经被保存到了本地。甚至你可以断开网络，你的应用也可以完美地运行。然而这里有点奇怪，图片上的提示转盘一直在转动，出了什么问题呢？

当开始下载图片的时候，你启动了提示图片正在加载的旋转提示器，但是你还没有实现图片下载完成后停止它的逻辑。你应该在每次图片下载完成的时候发送一个通知，但是这里你使用 KVO 这种观察者模式。

Key-Value Observing(KVO)模式

在 KVO 中，一个对象可以要求在它自身或者其它对象的属性发送变化的时候得到通知。如果你对 KVO 感兴趣的话，你可以更进一步的阅读这篇文章： Apple’s KVO Programming Guide .

如何使用KVO

正如上面所说的， KVO 机制让对象可以感知到属性的变化。在本例中，你可以使用 KVO 去观察 UIImageView 的 image 属性的变化。

打开 AlbumView.m 文件，在 initWithFrame:albumCover: 方法 [self addSubview:indicator] 这一行后，增加下面的代码：

Objective-c代码

1. [coverImageaddObserver:selfforKeyPath:@"image"options:0context:nil];

这里它增加了它自己（当前的类）作为 image 属性的观察者。

当完成的时候，你同样需要注销相应的观察者。仍然在 AlbumView.m 中增加下面的代码：

Objective-c代码

1. -(void)dealloc
2. {
3. [coverImageremoveObserver:selfforKeyPath:@"image"];
5. }

最后增加下面的方法：

Objective-c代码

1. -(void)observeValueForKeyPath:(NSString*)keyPathofObject:(id)objectchange:(NSDictionary*)changecontext:(void*)context
3. {
5. if([keyPathisEqualToString:@"image"])
7. {
9. [indicatorstopAnimating];
11. }
13. }

你必须在每个观察者类中实现这个方法。系统会在被观察的属性发送变化的时候通知观察者。在上面的代码中，当 image 属性变化的时候，你停止了封面上面的旋转提示器。这样以来，当图片加载完后，旋转提示器将会停止。

构建并运行的你的工程。旋转提示器应该会消失：

注意 : 你要总是记得去移除已经销毁的观察者，否则当给不存在的观察者发送消息的时候，你的应用可能会崩溃。

如果你玩一回你的应用后终止它，你会发现你的应用状态没有被保存，你上次查看的专辑不是下次启动时候的缺省专辑。

为了修正这个问题，你可以使用列表中的下个模式：备忘录（ Memento ）模式 .

优质内容筛选与推荐>>
1、about：42qu
2、Java String类习题
3、I.MX6 查看baudrate确定是否被其他程序占用
4、Oracle 截取指定长度的字符
5、向java全台推送数据等

赞赏

长按二维码向我转账

受苹果公司新规定影响，微信 iOS 版的赞赏功能被关闭，可通过二维码转账支持公众号。

阅读

好看

已推荐到看一看

你的朋友可以在“发现”-“看一看”看到你认为好看的文章。

取消 推荐

我知道了

已取消，“好看”想法已同步删除

知道了

已推荐到看一看 和朋友分享想法

最多200字，当前共字 发送

已发送

朋友将在看一看看到

确定

分享你的想法...

取消

分享想法到看一看

确定

最多200字，当前共字

发送中

网络异常，请稍后重试

知道了

微信扫一扫
关注该公众号

0 │ 收藏 │ 举报