ICViewPager MJRefresh NewsFourApp 左侧抽屉菜单 新闻类APP模板详解（iOS版）

1.概述

用过头条、网易等新闻客户端的用户是不是觉得页面很简洁、好用！那这类应用是如何实现的？有没有可以直接拿来使用的开源模板呢？

本文就提供了一个模板，是由作者整合了网上各类资源后整理出来的，希望对大家有所帮助！

android版新闻类app模板详见：

新闻类APP模板详解（android版）

环境：xcode 5.1.1，iOS SDK 7.1

先上图：

 

2.具体实现

要想实现该模板，需要完成以下几个重要组成部分。

（1）主页左右滑动的ViewPager

主页里显示各类新闻专题的页面是一个viewpager，响应用户左右滑动切换专题页。

该部分参考了ICViewPager，是Code4App上的一个开源工程，效果图如下：

回到本模板！

我们的主视图控制器（GTMainViewController）继承了ICViewPager的ViewPagerController，需要实现一些protocol方法。

其中，ViewPagerDataSource就非提不可了，先看代码：

[objc] view plain copy

1. #pragma mark - ViewPagerDataSource  
2. // Tab数量  
3. - (NSUInteger)numberOfTabsForViewPager:(ViewPagerController *)viewPager {  
4.     return categoryList.count;  
5. }  
6.   
7. // “类别-0”、“类别-1”这些Tab内容添加处  
8. - (UIView *)viewPager:(ViewPagerController *)viewPager viewForTabAtIndex:(NSUInteger)index {  
9.       
10.     GTCategoryItem *item = [categoryList objectAtIndex:index];  
11.       
12.     UILabel *label = [UILabel new];  
13.     label.backgroundColor = [UIColor clearColor];  
14.     label.font = [UIFont systemFontOfSize:13.0];  
15.     if (item) {  
16.         label.text = item.categoryName;  
17.     }  
18.     label.textAlignment = NSTextAlignmentCenter;  
19.     label.textColor = [UIColor blackColor];  
20.     [label sizeToFit];  
21.       
22.     return label;  
23. }  
24.   
25. // 每个Tab对应的视图控制器（也就是新闻列表页面）  
26. - (UIViewController *)viewPager:(ViewPagerController *)viewPager contentViewControllerForTabAtIndex:(NSUInteger)index {  
27.       
28.     GTNewsViewController *vCtrl = [self.storyboard instantiateViewControllerWithIdentifier:@"NewsViewController"];  
29.     [vCtrl setPViewCtrl:self];  
30.     return vCtrl;  
31. }  

其中，categoryList里存放着多个新闻专题信息的对象，是一个列表。

第一个方法里，categoryList.count返回的就是新闻专题种类，也就是Tab数量。

第二个方法里，创建了每个Tab控件的主体，本例子创建了一个UILabel，内容填充未新闻专题名字（item.categoryName）。

第三个方法里，创建了每个Tab对应的视图控制器，本例子里每个Tab所属的viewcontroller是GTNewsViewController，是一个UITableViewController，显示具体某类新闻列表。

除此之外，还要实现ViewPagerDelegate协议方法，用于设定一些显示属性，代码如下：

[objc] view plain copy

1. #pragma mark - ViewPagerDelegate  
2. - (CGFloat)viewPager:(ViewPagerController *)viewPager valueForOption:(ViewPagerOption)option withDefault:(CGFloat)value {  
3.     CGFloat result = 0.0;  
4.     switch (option) {  
5.         case ViewPagerOptionStartFromSecondTab:  
6.             result = 1.0;  
7.             break;  
8.         case ViewPagerOptionCenterCurrentTab:  
9.             result = 0.0;  
10.             break;  
11.         case ViewPagerOptionTabLocation:  
12.             result = 1.0;  
13.             break;  
14.         case ViewPagerOptionTabWidth:  
15.             result = self.view.frame.size.width / 5;  
16.             break;  
17.         default:  
18.             result = value;  
19.             break;  
20.     }  
21.       
22.     return result;  
23. }  
24. - (UIColor *)viewPager:(ViewPagerController *)viewPager colorForComponent:(ViewPagerComponent)component withDefault:(UIColor *)color {  
25.       
26.     switch (component) {  
27.         case ViewPagerIndicator:  
28.             return [[UIColor redColor] colorWithAlphaComponent:0.64];  
29.             break;  
30.         default:  
31.             break;  
32.     }  
33.       
34.     return color;  
35. }  

本例子程序里ICViewPager模块源码详见3rd/ICViewPager文件夹。

（2）列表上下拖拽自动更新

当用户上拉或下拉新闻列表时，会自动获取更多新闻消息，所谓的自动刷新。

这部分主要参考了MJRefresh，GitHub上的开源库（源码），效果图如下：

回到本模板！

显示新闻列表的视图控制器是GTNewsViewController，上面提到过。该类集成了MJRefresh的刷新功能。

首先，引入头文件。

[objc] view plain copy

1. #import "MJRefresh.h"  

其次，设置刷新控件。

[objc] view plain copy

1. /** 
2.  *  集成刷新控件 
3.  */  
4. - (void)setupRefresh  
5. {  
6.     // 1.下拉刷新(进入刷新状态就会调用self的headerRereshing)  
7.     [self.tableView addHeaderWithTarget:self action:@selector(headerRereshing)];  
8.     //    [self.tableView headerBeginRefreshing];  
9.       
10.     // 2.上拉加载更多(进入刷新状态就会调用self的footerRereshing)  
11.     [self.tableView addFooterWithTarget:self action:@selector(footerRereshing)];  
12. }  

最后，实现顶部刷新（headerRereshing）和底部刷新（footerRereshing）方法。

[objc] view plain copy

1. - (void)headerRereshing  
2. {  
3.     for (int i = 0; i < 5; i++) {  
4.         GTNewsItem *item = [[GTNewsItem alloc] init];  
5.         item.newsID = [NSString stringWithFormat:@"%d", i];  
6.         item.newsTitle = [NSString stringWithFormat:@"热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻 -- %d", i];  
7.         item.newsFrom = @"腾讯新闻";  
8.         item.newsPic = nil;  
9.         item.timestamp = [[NSDate date] timeIntervalSince1970] * 1000;  
10.         item.readCount = i * 1000;  
11.         item.commentCount = i * 2000;  
12.           
13.         [arrNews insertObject:item atIndex:0];  
14.     }  
15.       
16.     [self.tableView reloadData];  
17.     [self.tableView headerEndRefreshing];  
18. }  
19.   
20. - (void)footerRereshing  
21. {  
22.     for (int i = 0; i < 5; i++) {  
23.         GTNewsItem *item = [[GTNewsItem alloc] init];  
24.         item.newsID = [NSString stringWithFormat:@"%d", i];  
25.         item.newsTitle = [NSString stringWithFormat:@"热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新 -- %d", i];  
26.         item.newsFrom = @"搜狐新闻";  
27.         item.newsPic = nil;  
28.         item.timestamp = [[NSDate date] timeIntervalSince1970] * 1000;  
29.         item.readCount = i * 10;  
30.         item.commentCount = i;  
31.           
32.         [arrNews addObject:item];  
33.     }  
34.       
35.     [self.tableView reloadData];  
36.     [self.tableView footerEndRefreshing];  
37. }  

其中，arrNews存放着多条新闻消息，两个方法新增消息后刷新一下tableView。

本例子程序里MJRefresh模块源码详见3rd/MJRefresh文件夹。

（3）新闻列表顶部广告栏

本模板新闻列表顶部还插入广告栏，可以滚动显示。其实，就是将列表第一条记录设置成广告控件啦。

[objc] view plain copy

1. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath  
2. {  
3.     NSInteger row = indexPath.row;  
4.     UITableViewCell *cell;  
5.     if (row == 0) {  
6.         cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier1];  
7.     } else {  
8.         cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier2];  
9.     }  
10.       
11.       
12.     float contentWid = self.view.frame.size.width - 33 * gtNewsPadding;  
13.       
14.     //定义新的cell  
15.     if(cell == nil)  
16.     {  
17.         if (row == 0) {  
18.             cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier1];  
19.               
20.             ASScroll *asScroll = [[ASScroll alloc] initWithFrame:CGRectMake(0.0, 0.0, self.view.frame.size.width, self.view.frame.size.width * 0.3)];  
21.             asScroll.tag = news_content_ads;  
22.             [cell.contentView addSubview:asScroll];  
23.               
24.         } else {  
25.             cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier2];  
26.               
27.             // 新闻图片  
28.             CGRect picRect = CGRectMake(gtNewsPadding, gtNewsPadding, contentWid / 3, contentWid / 4);  
29.             UIImageView *ivPic = [[UIImageView alloc] initWithFrame:picRect];  
30.             ivPic.tag = news_content_pic;  
31.             [cell.contentView addSubview:ivPic];  
32.               
33.             // 新闻标题  
34.             UILabel *lbTitle = [[UILabel alloc] init];  
35.             lbTitle.font = [UIFont boldSystemFontOfSize:gtFontSizeBig];  
36.             lbTitle.tag = news_content_title;  
37.             lbTitle.textColor = [UIColor brownColor];  
38.             [cell.contentView addSubview:lbTitle];  
39.               
40.             // 新闻来源  
41.             UILabel *lbFrom = [[UILabel alloc] init];  
42.             lbFrom.font = [UIFont boldSystemFontOfSize:gtFontSizeSmall];  
43.             lbFrom.tag = news_content_from;  
44.             lbFrom.textColor = [UIColor grayColor];  
45.             [cell.contentView addSubview:lbFrom];  
46.               
47.             // 新闻阅读数量（图标）  
48.             UIImageView *ivReadCount = [[UIImageView alloc] init];  
49.             ivReadCount.tag = news_content_read_img;  
50.             [cell.contentView addSubview:ivReadCount];  
51.               
52.             // 新闻阅读数量  
53.             UILabel *lbReadCount = [[UILabel alloc] init];  
54.             lbReadCount.font = [UIFont boldSystemFontOfSize:gtFontSizeSmall];  
55.             lbReadCount.tag = news_content_read_count;  
56.             lbReadCount.textColor = [UIColor grayColor];  
57.             [cell.contentView addSubview:lbReadCount];  
58.               
59.             // 评论数量（图片）  
60.             UIImageView *ivCommentCount = [[UIImageView alloc] init];  
61.             ivCommentCount.tag = news_content_comment_img;  
62.             [cell.contentView addSubview:ivCommentCount];  
63.               
64.             // 评论数量  
65.             UILabel *lbCommentCount = [[UILabel alloc] init];  
66.             lbCommentCount.font = [UIFont boldSystemFontOfSize:gtFontSizeSmall];  
67.             lbCommentCount.tag = news_content_comment_count;  
68.             lbCommentCount.textColor = [UIColor grayColor];  
69.             [cell.contentView addSubview:lbCommentCount];  
70.         }  
71.     }  
72.       
73.     if (row == 0) {  
74.         ASScroll *asScroll = (ASScroll *)[cell.contentView viewWithTag:news_content_ads];  
75.           
76.         NSMutableArray * imagesArray = [[NSMutableArray alloc] init];  
77.         int noOfImages = 3 ;  
78.         for (int imageCount = 0; imageCount < noOfImages; imageCount++)  
79.         {  
80.             [imagesArray addObject:[UIImage imageNamed:[NSString stringWithFormat:@"ad_%d.jpg",imageCount+1]]];  
81.         }  
82.         [asScroll setArrOfImages:imagesArray];  
83.     } else {  
84.         GTNewsItem *obj = [arrNews objectAtIndex:(row - 1)];  
85.           
86.         float fHei = gtNewsPadding;  
87.           
88.         // 新闻图片  
89.         UIImageView *ivPic = (UIImageView *)[cell.contentView viewWithTag:news_content_pic];  
90.         ivPic.image = [UIImage imageNamed:@"placeholder_logo.png"];  
91.           
92.         // 新闻标题  
93.         UILabel *lbTitle = (UILabel *)[cell.contentView viewWithTag:news_content_title];  
94.         CGSize ttlSize = {0, 0};  
95.         ttlSize = [obj.newsTitle sizeWithFont:[UIFont systemFontOfSize:gtFontSizeBig]  
96.                             constrainedToSize:CGSizeMake(22 * contentWid / 3, 5000)  
97.                                 lineBreakMode:NSLineBreakByWordWrapping];  
98.         lbTitle.numberOfLines = 0;  //表示label可以多行显示  
99.         lbTitle.lineBreakMode = NSLineBreakByWordWrapping;  //换行模式  
100.         CGRect ttlRect = CGRectMake(contentWid / 3 + 22 * gtNewsPadding, fHei, 22 * contentWid / 3, ttlSize.height);  
101.         [lbTitle setFrame:ttlRect];  
102.         lbTitle.text = obj.newsTitle;  
103.           
104.         fHei += ttlSize.height + gtNewsPadding;  
105.           
106.         // 控件位置 从右算起  
107.         float widPos = self.view.frame.size.width - gtNewsPadding - 104;  
108.           
109.         // 新闻来源  
110.         UILabel *lbFrom = (UILabel *)[cell.contentView viewWithTag:news_content_from];  
111.         float fromWid = widPos - (contentWid / 3 + 22 * gtNewsPadding + 4);  
112.         CGRect fromRect;  
113.         if (fromWid > 0) {  
114.             fromRect = CGRectMake(contentWid / 3 + 22 * gtNewsPadding, fHei, fromWid, 16);  
115.         } else {  
116.             fromRect = CGRectMake(contentWid / 3 + 22 * gtNewsPadding, fHei, 0, 16);  
117.         }  
118.         [lbFrom setFrame:fromRect];  
119.         lbFrom.text = obj.newsFrom;  
120.         lbFrom.textAlignment = NSTextAlignmentLeft;  
121.           
122.         // 阅读数量  
123.         UILabel *rcLabel = (UILabel *)[cell.contentView viewWithTag:news_content_read_count];  
124.         CGRect rcLRect = CGRectMake(widPos, fHei, 30, 16);  
125.         [rcLabel setFrame:rcLRect];  
126.         rcLabel.text = [NSString stringWithFormat:@"%ld",obj.readCount];  
127.         rcLabel.textAlignment = NSTextAlignmentRight;  
128.         widPos += 30 + 4;  
129.           
130.         // 阅读数量（图标）  
131.         UIImageView *ivReadCount = (UIImageView *)[cell.contentView viewWithTag:news_content_read_img];  
132.         CGRect rcRect = CGRectMake(widPos, fHei, 16, 16);  
133.         [ivReadCount setFrame:rcRect];  
134.         ivReadCount.image = [UIImage imageNamed:@"icon_read_count.png"];  
135.         widPos += 16 + 4;  
136.           
137.         // 评论数量  
138.         UILabel *ccLabel = (UILabel *)[cell.contentView viewWithTag:news_content_comment_count];  
139.         CGRect ccLRect = CGRectMake(widPos, fHei, 30, 16);  
140.         ccLabel.text = [NSString stringWithFormat:@"%ld",obj.commentCount];  
141.         ccLabel.textAlignment = NSTextAlignmentRight;  
142.         [ccLabel setFrame:ccLRect];  
143.         widPos += 30 + 4;  
144.           
145.         // 评论数量（图标）  
146.         UIImageView *ivCommentCount = (UIImageView *)[cell.contentView viewWithTag:news_content_comment_img];  
147.         CGRect ccRect = CGRectMake(widPos, fHei, 16, 16);  
148.         [ivCommentCount setFrame:ccRect];  
149.         ivCommentCount.image = [UIImage imageNamed:@"icon_comment_count.png"];  
150.     }  
151.       
152.     return cell;  
153. }  

当row等于0（第一行）时，填充内容换成了ASScroll控件，它是一个横向滚动的视图（view）。由于广告栏和消息记录对应的UITableViewCell不一样，所有我们创建了两种cell。

[objc] view plain copy

1. static NSString *CellIdentifier1 = @"NewsAdsCell";  
2. static NSString *CellIdentifier2 = @"NewsListCell";  

更多ASScroll相关信息，请参见ASScrollView，是Code4App上的一个开源工程，本人做了一些改动。
本例子程序里ASScroll模块源码详见3rd/ASScroll文件夹。

（4）左侧抽屉菜单

这一段参考了NewsFourApp，是Code4App上的一个开源工程，效果图如下：

回到本模板！

首先，到Main.storyboard，将应用入口设为slide navigation controller，对应的视图控制器为SlideNavigationController。SlideNavigationController是抽屉菜单核心类，其中有包含菜单添加、显示、隐藏等内容，详情见源码。

然后，创建一个菜单类视图控制器页面，对应的类为GTMenuViewController。该视图包含一个UIImageView（头像）、UILable（昵称）和UITableView（菜单项列表）。

然后，到AppDelegate文件GTAppDelegate.m里添加菜单初始化代码。

[objc] view plain copy

1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  
2. {  
3.     UIStoryboard *mainStoryboard = [UIStoryboard storyboardWithName:@"Main"  
4.                                                              bundle: nil nil];  
5.       
6.     // 左侧菜单视图控制器  
7.     GTMenuViewController *leftMenu = [mainStoryboard instantiateViewControllerWithIdentifier:@"MenuViewController"];  
8.     leftMenu.view.backgroundColor = [UIColor lightGrayColor];  
9.       
10.     // 无右侧菜单  
11.     [SlideNavigationController sharedInstance].righMenu = nil;  
12.     // 设置左侧菜单  
13.     [SlideNavigationController sharedInstance].leftMenu = leftMenu;  
14.       
15.     return YES;  
16. }  

最后，设置主视图控制器GTMainViewController。

实现SlideNavigationControllerDelegate协议方法：

[objc] view plain copy

1. #pragma mark - SlideNavigationController Methods  
2. // 可以显示左侧菜单  
3. - (BOOL)slideNavigationControllerShouldDisplayLeftMenu  
4. {  
5.     return YES;  
6. }  
7. // 不显示右侧菜单  
8. - (BOOL)slideNavigationControllerShouldDisplayRightMenu  
9. {  
10.     return NO;  
11. }  

设置菜单控制器GTMenuViewController对象的父类控制器，用于页面跳转。这个很重要！因为GTMenuViewController类本身没有navigationController，所以不能跳转页面。可以在GTMainViewController的viewDidLoad方法里初始化。

[objc] view plain copy

1. - (void)viewDidLoad  
2. {  
3.     ...  
4.       
5.     GTMenuViewController *lMenu = (GTMenuViewController *)[SlideNavigationController sharedInstance].leftMenu;  
6.     [lMenu setPViewCtrl:self];  
7.       
8.     ...  
9.       
10.     [super viewDidLoad];  
11. }  

谢天谢地，总算讲完了！不知道大伙能不能理解，不理解的可以看源码，可能更直观一些！

3.源码

工程源码