iOS仿网易新闻客户端左右侧栏

2014-11-24 02:31:57 · 作者: · 浏览: 4

左右侧栏已经是当前APP最流行的布局,很多客户端软件都使用了左右侧栏,例如网易新闻,人人网,Weico等等。


这篇博客以当前网易新闻客户端的模式为例仿写了一个左右侧栏架构实现。


先看一下Demo的实现效果


iOS仿网易新闻客户端左右侧栏


iOS仿网易新闻客户端左右侧栏


iOS仿网易新闻客户端左右侧栏


实现主要思路以及细节:


视图控制器有三个视图按不同层次排列,最上层的是主要显示视图_mainContentView,下面的为左右侧栏视图;


点击左侧栏不同按钮压入不同的主视图控制器;


在显示侧栏时点击视图空白区域闭合,利用tap手势;


拖动主页面根据不同的方向和位置进行移动和缩放, 利用pan手势;


向右拖显示左侧栏,向左拖显示右侧栏;


首先,点击左侧栏时,左侧栏将点击的数据模型传给分栏控制器,让其更改主视图内容


iOS仿网易新闻客户端左右侧栏Demo源码下载


具体下载目录在 /2013年资料/10月/15日/iOS仿网易新闻客户端左右侧栏


模型:


@interface ClassModel : NSObject


@property (strong, nonatomic) NSString *title;
@property (strong, nonatomic) NSString *className;
@property (strong, nonatomic) NSString *contentText;
@property (strong, nonatomic) NSString *imageName;


+ (id)classModelWithTitle:(NSString *)title className:(NSString *)className contentText:(NSString *)text andImageName:(NSString *)imageName;


@end


一个工厂方法,模型存入不同选择下的不同视图控制器的具体内容。


以新闻页为例:


ClassModel *newscm = [ClassModel classModelWithTitle:@"新闻" className:@"NewsViewController" contentText:@"新闻视图内容" andImageName:@"sidebar_nav_news"];


来看主视图切换不同界面的方法:


- (void)showContentControllerWithModel:(ClassModel *)model
{
[self closeSideBar];

UIViewController *controller = _controllersDict[model.className];
if (!controller)
{
Class c = NSClassFromString(model.className);
HRViewController *vc = [[c alloc] init];
controller = [[UINavigationController alloc] initWithRootViewController:vc];

vc.contentText = model.contentText;
[_controllersDict setObject:controller forKey:model.className];
}

if (_mainContentView.subviews.count > 0)
{
UIView *view = [_mainContentView.subviews firstObject];
[view removeFromSuperview];
}

controller.view.frame = _mainContentView.frame;
[_mainContentView addSubview:controller.view];
}