左右側欄已經是當前APP最流行的布局,很多客戶端軟件都使用了左右側欄,例如網易新聞,人人網,Weico等等。
這篇博客以當前網易新聞客戶端的模式為例仿寫了一個左右側欄架構實現。
先看一下Demo的實現效果
實現主要思路以及細節:
視圖控制器有三個視圖按不同層次排列,最上層的是主要顯示視圖_mainContentView,下面的為左右側欄視圖;
點擊左側欄不同按鈕壓入不同的主視圖控制器;
在顯示側欄時點擊視圖空白區域閉合,利用tap手勢;
拖動主頁面根據不同的方向和位置進行移動和縮放, 利用pan手勢;
向右拖顯示左側欄,向左拖顯示右側欄;
首先,點擊左側欄時,左側欄將點擊的數據模型傳給分欄控制器,讓其更改主視圖內容
iOS仿網易新聞客戶端左右側欄Demo源碼下載:
免費下載地址在 http://linux.linuxidc.com/
用戶名與密碼都是www.linuxidc.com
具體下載目錄在 /2013年資料/10月/15日/iOS仿網易新聞客戶端左右側欄
下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm
模型:
@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];
}
更多詳情請繼續閱讀第2頁的內容:http://www.linuxidc.com/Linux/2013-10/91441p2.htm