侧边栏模块的主要功能是在主页面和分页面之间进行切换，侧边栏展示的分页面模块包括随便逛逛、精华、有图有真相、穿越、我收藏的、我参与的、热门囧图、内涵图片、加入糗百，设置10个子模块组成。。侧边栏模块设计界面如图4-3所示。
图4-3 侧边栏设计界面
（1）随便逛逛
随便逛逛由干货和嫩草两个子页面组成，干货分页面用于展示干货类别的糗事信息，嫩草分页面用于展示嫩草类别的糗事信息。随便逛逛设计界面如图4-4所示。 图4-4 随便逛逛-干货设计界面
随便逛逛界面的设计主要是Switch控件及Tableview控件的应用，设置Switch控件及Tableview控件的相关属性。通过切换Switch按钮来进行干货和嫩草分页面的切换，其核心代码如下：
_sliderSwitch = [[XWSliderSwitch alloc] initWithFrame:CGRectMake(0, 0, 118, 29)];
_sliderSwitch.labelCount = 2;
_sliderSwitch.delegate = self;
[_sliderSwitch initSliderSwitch];
[_sliderSwitch setSliderSwitchBackground:[UIImage
imageNamed:@\"top_tab_background2.png\"]];
[_sliderSwitch setLabelOneText:@\"干货\"];
[_sliderSwitch setLabelTwoText:@\"嫩草\"];
点击按钮控件时，通过改变获取数据的url来改变分页面的内容，从而达到随着按钮切换内容也随着改变的效果，其核心代码如下：
NSURL *url = nil;
if (type == QiuShiTypeSuggest) {
url = [NSURL URLWithString:api_stroll_suggest(30, page)];
}
else {
url = [NSURL URLWithString:api_stroll_latest(30, page)];
}
self.strollRequest = [ASIHTTPRequest requestWithURL:url];
self.strollRequest.delegate = self;
[self.strollRequest startAsynchronous];
（2）精华
精华模块主要用于展示精华模块的糗事信息，其中包括日，周，月的分页面。分页面根据近一日，一周，一月的糗事信息进行分类。其精华模块界面设计如图4-5所示。
图4-5 精华设计页面
（3）穿越
该模块主要用于显示穿越模块的相关信息，通过点击穿越按钮可以穿越到随机的一个时间查看当天糗事信息。穿越模块界面设计如图4-6所示。
图4-6 穿越界面
首先需要创建穿越页面，其核心代码如下所示：
[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage
imageNamed:@\"main_background.png\"]]];//设置背景图片
self.navigationItem.leftBarButtonItem =[[[UIBarButtonItem
alloc]initWithCustomView:_sideButton] autorelease];
self.navigationItem.rightBarButtonItem=[[[UIBarButtonItem alloc] initWithCustomView:_timeAgainButton] autorelease];
self.traversingTableView.scrollsToTop = YES;
在穿越页面，点击穿越按钮，获取一个随机的穿越时间，之后获取该时间的糗事进行刷新显示，点击按钮后的穿越效果如下图4-7所示：
图4-7 穿越-设计界面
实现穿越随机穿越的核心代码如下所示：
//随机按钮，获取随机日期，重新请求
self.title = @\"穿越中...\";
self.dateString = [Toolkit dateStringAfterRandomDay];
_currentTraversingPage = 1;
[_traversingTableView setContentOffset:CGPointZero animated:YES];
[self initTraversingRequestWithType:_qiushiType
andPage:_currentTraversingPage];
请求数据的关键代码如下所示：
NSURL *url = [NSURL
URLWithString:api_traversing_history(self.dateString, 30, page)]; self.traversingRequest = [ASIHTTPRequest requestWithURL:url]; self.traversingRequest.delegate = self;
[self.traversingRequest startAsynchronous];
（5）有图有真相
有图有真相模块主要用于有图的糗事显示。其中包括硬菜和时令两个分页面。硬菜是网络获取的随机的糗事信息，而时令是当前季节时令对应相关的糗事信息。页面效果图如图4-8所示：
图4-8有图有真相-
实现创建页面的核心代码如下所示：
[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@\"main_background.png\"]]]； self.navigationItem.leftBarButtonItem=[[[UIBarButtonItem alloc] initWithCustomView:_sideButton] autorelease];
self.navigationItem.rightBarButtonItem=[[[UIBarButtonItem alloc] initWithCustomView:_postButton] autorelease];
self.navigationItem.titleView = _sliderSwitch;
self.imageTruthTableView.scrollsToTop = YES;
实现硬菜和时令分页面的切换效果的关键代码如下所示：
_sliderSwitch = [[XWSliderSwitch alloc] initWithFrame:CGRectMake(0, 0, 118, 29)];
_sliderSwitch.labelCount = 2;
_sliderSwitch.delegate = self;
[_sliderSwitch initSliderSwitch];
[_sliderSwitchsetSliderSwitchBackground:[UIImageimageNamed:@\"top_tab_background2.png\"]];
[_sliderSwitch setLabelOneText:@\"硬菜\"];
[_sliderSwitch setLabelTwoText:@\"时令\"];
（5）内涵图片
本模块主要用于展示内涵图片，其中图片可以全屏查看，保存到手机相册。页面效果如下图4-9所示：
图4-9内涵图片设计界面
首先需要创建本页面的基本框架，创建的代码如下所示：
[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@\"main_background.png\"]]]; self.navigationItem.leftBarButtonItem=[[[UIBarButtonItem alloc] initWithCustomView:_sideButton] autorelease];
self.collectionView=[[PSCollectionView
alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[self.view addSubview:self.collectionView];
本页面的主要采用了PSCollectionView来实现瀑布流效果的展示。运用
PSCollectionView实现页面信息的刷新和不断加载功能。其中实现刷新和加载的关键代码如下所示：
if (_refreshHeaderView == nil) {//下拉刷新页面信息
EGORefreshTableHeaderView *view=[[EGORefreshTableHeaderView alloc] initWithFrame:CGRectMake(0,0-CGRectGetHeight(_collectionView.bounds), CGRectGetWidth(self.view.frame),
CGRectGetHeight(_collectionView.bounds))];
view.delegate = self;
_collectionView.headerView = view;
_refreshHeaderView = view;
[view release];
}
[_refreshHeaderView refreshLastUpdatedDate];
if (_loadMoreFooterView ==nil) {//上拉加载更多美图信息
_loadMoreFooterView = [[LoadMoreFooterView alloc]
initWithFrame:CGRectMake(0, 0, 320, 40)];
_loadMoreFooterView.delegate = self;
_collectionView.footerView = _loadMoreFooterView;
}
当选中其中一个图片（cell）时，就会进入全屏查看图片页面，在这个页面可以进行保存操作。效果如下图4-10所示：
图4-10图片保存
实现这个图片详情页面的关键代码如下所示：
NSDictionary *dict = [_girlArray objectAtIndex:index];
QiuShiImageViewController *qiushiImageVC=[[QiuShiImageViewController alloc]
initWithNibName:@\"QiuShiImageViewController\" bundle:nil];
[qiushiImageVC setQiuShiImageURL:[dict
objectForKey:@\"large_url\"]];
qiushiImageVC.modalTransitionStyle =
UIModalTransitionStyleCrossDissolve;
[[UIApplication sharedApplication] setStatusBarHidden:YES
withAnimation:UIStatusBarAnimationFade];
[self presentViewController:qiushiImageVC animated:YES completion:nil];
[qiushiImageVC release];
（6）热门囧图
本模块主要用于最近时段热门的一些搞笑的，囧的糗事图片。和上个内涵图片类似也是主要运用了瀑布流效果来展示图片。同时也可进入图片详情进行图片的全屏查看和保存。效果图如下图4-11所示：
图4-11热门囧图设计界面
（7）糗事详情页面各功能实现
本页面主要用于实现包括糗事详情的查看，糗事的评论等功能。
详情页面效果如下图4-12所示：
图4-12糗事详情设计界面
详情页面评论的展示采用tableview进行展示，创建详情页面的核心代码如下所示：
[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@\"main_background.png\"]]]; UIImage *backgroundImage = [UIImage
imageNamed:@\"block_background.png\"]; backgroundImage=[backgroundImage
resizableImageWithCapInsets:UIEdgeInsetsMake(15, 320, 14, 0)]; _commentBackgroundImageView.image = backgroundImage;
self.navigationItem.leftBarButtonItem=[[[UIBarButtonItem alloc] initWithCustomView:_backButton] autorelease];
self.navigationItem.rightBarButtonItem=[[[UIBarButtonItem alloc] initWithCustomView:_shareButton] autorelease];
[_qiushiDetailTableView setSeparatorColor:[UIColor
colorWithPatternImage:[UIImage
imageNamed:@\"block_line.png\"]]];
在点击添加评论后进入评论页面，通过下面代码简单创建该页面：
[self initBackgroundView];
[self initToolBar];
_commentTextView.placeHolder = @\"这里不欢迎贴小广告、谩骂、色情、贩毒、卖军火等行为，否则您的言论将有可能作为禁言的呈堂证供的哟。\";
[_commentTextView becomeFirstResponder];
创建后的评论页面效果如下图4-13所示：
图4-13发表评论设计界面