iOS上的边栏菜单实现，如Facebook？

我想在iOS 6中创build像Facebook iPhone应用程序中的边栏菜单。

我如何创build它？

我是这个iPhone开发的新手。

请给我一些指点或告诉我一些基本的教程，我可以一步一步来实现它。

Answer 1

我们可以很容易地做到这一点。它很容易。

我在这里解释的方法正在我的应用程序中使用。

目的：

在标题栏中按下button时，侧栏必须从左侧滑入和滑出。

脚步：

1） 创build一个视图控制器（home）和两个nsObject类（侧边栏，主）

2） 在视图控制器上添加一个工具栏

3） 在侧栏（左侧视图）中：

ⅰ）build立一个uiview（在vc上添加）与所需的侧栏宽度添加视图为您的项目需要

ii）然后创buildbutton，并将其作为属性bcuz它的目标事件将不得不在视图控制器中发生

iii）你必须有两个CGRects的button和结果视图一CGCRC是扩展状态另一个CGCODE是为了崩溃

iv）就button而言，它的x是sidebarwidth-buttonwidth用于展开状态，它的x是0 + buttonwidth用于折叠状态，并且就视图而言，它的x是0表示展开状态，x是collabed状态的-sidebarwidth

4） 主要（右侧视图）：

我）build立一个UIView，并将其添加到UiscollView（要添加到VC）

ii）UIView将有两个用于UIscrollView的CGRect，一个用于展开，一个用于折叠

iii）UIview的x为0 y为0宽度为1024，高度为726（vc上的横向视图高度 – 工具栏宽度）

iv）在折叠时间uIscrollview的x是sidebarwidth y是42（vc'tool酒吧高度）和宽度是1024 sidebarwidth并且高度是与uiview

v）扩展时间Uiscrollview的x是0，宽度是1024

vi）UiscrollView的内容大小总是应该是1024,726，因为如果大小比这个缩小，我们需要滚动

5） 在视图控制器（主页）中：

我）添加边栏和主家

ii）然后添加和事件的侧边栏button，然后将其添加到工具栏usign addsubview方法

iii）在button触摸事件调用里面切换事件

-(void)OnCollapsibleExtenderTouchUpInside { [UIView animateWithDuration:1.0 animations:^{ [sideBarObj ToggleVuPosition]; [mainVuObj ToggleVuSize]; }]; } 

下面的代码适用于我…（我只是为了我自己而改名了一些字段）

要更好地理解下面的代码：

1）视图控制器名称为Home，侧栏名称为侧栏，右侧区域名称为Main

2）我已经编写了风景编码…你可以自定义它的portait也使用它。

边栏：

 #import <Foundation/Foundation.h> @interface SideBar : NSObject { UIView *vuSideBar; UIScrollView *scrollVuSideBar; UIImageView *imgProfilePicture; CGRect rectVuSideBar,rectExpandedScrollVuSideBar,rectCollapsedScrollVuSideBar,rectImgProfilePicture,rectExpandedBtnCollapsibleExtender,rectCollapsedBtnCollapsibleExtender; int sideBarWidth,sideBarHeight; } @property(strong,nonatomic)UIButton *btnCollapsibleExtender; -(id)initWithParent:(UIView *)vuParent andToolBar:(UIToolbar *)toolBarParent; -(void)ToggleVuPosition; @end 

侧栏执行：

  #import "SideBar.h" @interface SideBar() -(void)initRects; -(void)initVus; -(void)initOtherIvars; -(void)AddViewsOnHierarchy; -(void)AddToParentVu:(UIView *)ParentVu; -(void)OnCollapsibleExtenderTouchUpInside; @end @implementation SideBar @synthesize btnCollapsibleExtender; -(id)initWithParent:(UIView *)vuParent andToolBar:(UIToolbar *)toolBarParent { self = [super init]; //calls init because UIResponder has no custom init methods if (self) { [self initOtherIvars]; [self initRects]; [self initVus]; [self AddViewsOnHierarchy]; [self AddToParentVu:vuParent]; [self AddToParentToolbar:toolBarParent]; } return self; } -(void)initOtherIvars { NSLog(@"initOtherIvars"); sideBarWidth=300; sideBarHeight=768; } -(void)initRects { NSLog(@"initRects"); rectExpandedScrollVuSideBar=CGRectMake(0,42,sideBarWidth,sideBarHeight); rectCollapsedScrollVuSideBar=CGRectMake(-sideBarWidth,42,sideBarWidth,sideBarHeight); rectExpandedBtnCollapsibleExtender=CGRectMake(sideBarWidth-30,6,30,30); rectCollapsedBtnCollapsibleExtender=CGRectMake(6,6,30,30); rectVuSideBar=CGRectMake(0,0,sideBarWidth,sideBarHeight); rectImgProfilePicture=CGRectMake(5,5,sideBarWidth-10,200); } -(void)initVus { NSLog(@"initVus"); scrollVuSideBar=[[UIScrollView alloc]initWithFrame:rectExpandedScrollVuSideBar]; [scrollVuSideBar setContentSize:CGSizeMake(sideBarWidth,sideBarHeight)]; btnCollapsibleExtender=[[UIButton alloc]initWithFrame:rectExpandedBtnCollapsibleExtender]; UIImage *imgCollapsibleExtender=[UIImage imageNamed:@"SideBarExpandCollapse.png"]; [btnCollapsibleExtender setImage:imgCollapsibleExtender forState:UIControlStateNormal]; vuSideBar=[[UIView alloc]initWithFrame:rectVuSideBar]; [vuSideBar setBackgroundColor:[UIColor darkGrayColor]]; imgProfilePicture=[[UIImageView alloc]initWithFrame:rectImgProfilePicture]; UIImage *imgDefaultProfile=[UIImage imageNamed:@"defaultProfileImage.png"]; [imgProfilePicture setImage:imgDefaultProfile]; } -(void)AddViewsOnHierarchy { NSLog(@"AddViewsOnHierarchy"); [vuSideBar addSubview:imgProfilePicture]; [scrollVuSideBar addSubview:vuSideBar]; } -(void)AddToParentVu:(UIView *)ParentVu { NSLog(@"AddToParent vu"); [ParentVu addSubview:scrollVuSideBar]; } -(void)AddToParentToolbar:(UIToolbar *)ParentToolBar { NSLog(@"AddToParent toolbar"); [ParentToolBar addSubview:btnCollapsibleExtender]; } -(void)ToggleVuPosition { switch ((int)scrollVuSideBar.frame.origin.x) { case 0: scrollVuSideBar.frame=rectCollapsedScrollVuSideBar; btnCollapsibleExtender.frame=rectCollapsedBtnCollapsibleExtender; break; default: scrollVuSideBar.frame=rectExpandedScrollVuSideBar; btnCollapsibleExtender.frame=rectExpandedBtnCollapsibleExtender; break; } } @end 

主（右侧视图）：

  #import <Foundation/Foundation.h> @interface MainView : NSObject { UIView *vuMain; UIScrollView *scrollVuMain; CGRect rectVuMain,rectScrollVuMainExpanded,rectScrollVuMainCollpased; int mainWidth,mainHeight,sideBarWidth,HeaderBarHeight; } -(id)initWithParent:(UIView *)vuParent; -(void)ToggleVuSize; @end 

主（右侧视图）执行：

 #import "MainView.h" @interface MainView () -(void)initRects; -(void)initVus; -(void)initOtherIvars; -(void)AddViewsOnHierarchy; -(void)AddToParentVu:(UIView *)ParentVu; @end @implementation SGGI_MainView -(id)initWithParent:(UIView *)vuParent { self = [super init]; //calls init because UIResponder has no custom init methods if (self) { [self initOtherIvars]; [self initRects]; [self initVus]; [self AddViewsOnHierarchy]; [self AddToParentVu:vuParent]; } return self; } -(void)initRects { rectVuMain=CGRectMake(0,0,1024,726); rectScrollVuMainExpanded=CGRectMake(0,HeaderBarHeight,mainWidth,mainHeight-HeaderBarHeight); rectScrollVuMainCollpased=CGRectMake(sideBarWidth,HeaderBarHeight,mainWidth-sideBarWidth,mainHeight-HeaderBarHeight); } -(void)initVus { scrollVuMain=[[UIScrollView alloc]initWithFrame:rectScrollVuMainCollpased]; [scrollVuMain setContentSize:CGSizeMake(mainWidth,mainHeight-HeaderBarHeight)]; vuMain=[[UIView alloc]initWithFrame:rectVuMain]; UILabel *lbl=[[UILabel alloc]initWithFrame:CGRectMake(0,0,1024,30)]; [lbl setText:@"Details123456789abcdefghijklmnopqrstuvwxyz987654321abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvwxyz9876"]; [vuMain addSubview:lbl]; } -(void)initOtherIvars { NSLog(@"initOtherIvars"); mainWidth=1024; mainHeight=768; sideBarWidth=300; HeaderBarHeight=42; } -(void)AddViewsOnHierarchy { [scrollVuMain addSubview:vuMain]; } -(void)AddToParentVu:(UIView *)ParentVu { [ParentVu addSubview:scrollVuMain]; } -(void)ToggleVuSize { switch ((int)scrollVuMain.frame.size.width) { case 1024: scrollVuMain.frame=rectScrollVuMainCollpased; break; default: scrollVuMain.frame=rectScrollVuMainExpanded; break; } } @end 

首页（embedded上述两个VC）：

 #import <UIKit/UIKit.h> @interface Home : UIViewController @end 

首页实施：

 #import "Home.h" #import "sideBar.h" #import "Main.h" @interface Home () { sideBar *sideBarObj; Main *mainVuObj; UIToolbar *HeaderBarObj; } -(void)AddSideBar; -(void)AddMainView; -(void)AddHeaderBar; -(void)AddCollapsibleExtenderEvent; -(void)OnCollapsibleExtenderTouchUpInside; @end @implementation Home - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil { self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]; if (self) { // Custom initialization } return self; } - (void)viewDidLoad { [super viewDidLoad]; [self.view setBackgroundColor:[UIColor grayColor]]; [self AddHeaderBar]; [self AddSideBar]; [self AddMainView]; [self AddCollapsibleExtenderEvent]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } -(void)AddHeaderBar { HeaderBarObj=[[UIToolbar alloc]initWithFrame:CGRectMake(0,0,1024,42)]; [self.view addSubview:HeaderBarObj]; } -(void)AddSideBar { sideBarObj=[[SideBar alloc]initWithParent:self.view andToolBar:HeaderBarObj]; } -(void)AddMainView { mainVuObj=[[MainView alloc]initWithParent:self.view]; } -(void)AddCollapsibleExtenderEvent { SEL selCollapsibleTouch=@selector(OnCollapsibleExtenderTouchUpInside); [sideBarObj.btnCollapsibleExtender addTarget:self action:selCollapsibleTouch forControlEvents:UIControlEventTouchUpInside]; } -(void)OnCollapsibleExtenderTouchUpInside { [UIView animateWithDuration:1.0 animations:^{ [sideBarObj ToggleVuPosition]; [mainVuObj ToggleVuSize]; }]; } @end 

上面的代码可以进一步自定义，不需要使用main，也可以在Home view controller中添加代码，同样可以避免在sidebar中使用单独的类，并将其包含在home viewcontroller中。

至于当用户按下边栏中的button，对于主视图中的变化，你可以使用协议委托，或者我们可以在边栏中的button作为属性，并添加视图控制器中的事件。

我希望这有帮助。

Answer 2

有很多的实现，但我会build议你JTRevealSidebarDemo其简单和易于定制，你也可以使用ViewDeck或JASidePanels 。 JASidePanels是有据可查的，并且有像你这样的新开发者的基本例子！

Answer 3

您可以使用Swift编写的InteractiveSideMenu库。 这是很好的logging和有很多的定制。