像 Facebook 这样的 iOS 侧边栏菜单实现？

Sidebar menu implementation on iOS like Facebook?

提问by zeeshan shaikh

I want to create side-bar menu like in Facebook iPhone app in iOS 6.

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

How can I create it?

我怎样才能创建它？

I'm new to this iPhone development.

我是这个 iPhone 开发的新手。

Please give me some pointers or tell me some basic tutorial that I can follow step by step to achieve it.

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

回答by Durai Amuthan.H

We can easily do it by ourselves. It's so easy.

我们可以很容易地自己做。它是如此容易。

The approach I explain here is being used in my app.

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

objective:

客观的：

When a button is pressed in title bar a side bar has to slide in and out from left side.

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

Steps:

脚步：

1) Create a view controller(home) and two nsObject classes(sidebar,main)

2) add a tool bar on view controller

3) In sidebar (Left side view):

i) Build a uiview(to be added on vc) with desired sidebar width within that add views as needed for your project

ii) then create button and make it as property because it's target events will have to occur in view controller

iii) you have to have two CGRects for both button and the resultant view one CGrect is for expanded state another CGrect is for collapsed

iv) as far as button is cocerned it's x is sidebarwidth-buttonwidth for expanded state and it's x is 0+buttonwidth for collapsed state and as far as view is concerned it's x is 0 for expanded state and it's x is -sidebarwidth for collapsed state

4) In main(right side view):

i) Build a UIView and add it to UiscollView(to be added on vc)

ii) UIView will have two CGREcts for UIscrollView one for expanded and one for collapsed

iii) UIview's x is 0 y is 0 width is 1024 and height is 726(landscape view height-toolbar width on vc)

iv) On Collapsed time uIscrollview's x is sidebarwidth y is 42(vc'tool bar height) and width is 1024-sidebarwidth and height is same as uiview's

v) on expanded time Uiscrollview's x is 0 and width becomes 1024

vi) Uiscrollview content size always should be 1024,726 as we need scrolling if the size is shrunk than this

5) In view controller (home page):

i) add both the side bar and main in home

ii) then add and event for the button in sidebar and then add it on the tool bar usign addsubview method

iii) In the button touch event call toggle events inside

 -(void)OnCollapsibleExtenderTouchUpInside
{
   [UIView animateWithDuration:1.0 animations:^{

    [sideBarObj ToggleVuPosition];

    [mainVuObj ToggleVuSize];

 }];

}

The below code works for me..(I just renamed some field for my own sake)

1)创建一个视图控制器(home)和两个nsObject类(sidebar,main)

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

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

i) 构建一个具有所需侧边栏宽度的 uiview（将添加到 vc），根据项目需要添加视图

ii) 然后创建按钮并将其设为属性，因为它的目标事件必须在视图控制器中发生

iii) 两个按钮都必须有两个 CGRects，结果视图一个 CGrect 用于展开状态，另一个 CGrect 用于折叠

iv) 就按钮而言，它的 x 是展开状态的 sidebarwidth-buttonwidth，它的 x 是折叠状态的 0+buttonwidth，就视图而言，它的 x 是展开状态的 0，它的 x 是折叠状态的 -sidebarwidth

4)主视图（右侧视图）：

i) 构建一个 UIView 并将其添加到 UiscollView（在 vc 上添加）

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

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

iv) 在折叠时间 uIscrollview 的 x 是侧边栏宽度 y 是 42（vc'工具栏高度）和宽度是 1024-sidebarwidth 和高度与 uiview 的相同

v) 展开时，Uiscrollview 的 x 为 0，宽度变为 1024

vi) Uiscrollview 内容大小始终应为 1024,726，因为如果大小比此缩小，我们需要滚动

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

i) 在 home 中添加侧边栏和主栏

ii) 然后为侧栏中的按钮添加和事件，然后将其添加到工具栏上使用 addsubview 方法

iii) 在按钮触摸事件里面调用切换事件

 -(void)OnCollapsibleExtenderTouchUpInside
{
   [UIView animateWithDuration:1.0 animations:^{

    [sideBarObj ToggleVuPosition];

    [mainVuObj ToggleVuSize];

 }];

}

下面的代码对我有用..（我只是为了我自己重命名了一些字段）

To understand the below code better:

为了更好地理解下面的代码：

1) The View controller name is Home and side bar name is side bar and right side area name is Main

2) I have wrote the coding for landscape alone...you can customize it for portrait also one use it.

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

2）我单独写了风景的编码......你可以为肖像定制它也可以使用它。

Side bar:

边栏：

#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

Side bar implementation:

侧边栏实现：

 #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

Main(Right side view):

主要（右侧视图）：

 #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

Main(Right side view) implementation:

主要（右侧视图）实现：

#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

Home(Embedding the above two one a VC):

主页（嵌入以上两个一个VC）：

#import <UIKit/UIKit.h>

@interface Home : UIViewController

@end

Home implementation:

家庭实施：

#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

The above code can be customized further by without using main and adding the code for that in Home view controller likewise one can avoid a separate class for sidebar and include that in home viewcontroller itself.

上面的代码可以通过不使用 main 并在主视图控制器中添加代码来进一步定制，同样可以避免侧边栏的单独类并将其包含在主视图控制器本身中。

As far as when user presses button in sidebar, for changes in main view you can use protocol delegates or we can have the buttons in sidebar as property and add events in view controller.

至于当用户按下侧栏中的按钮时，对于主视图中的更改，您可以使用协议委托，或者我们可以将侧栏中的按钮作为属性并在视图控制器中添加事件。

I hope this helps.

我希望这有帮助。

回答by German Attanasio

There are lots of implementations but I will suggest you JTRevealSidebarDemoits simple and easy to customize, you can also use ViewDeckor JASidePanels. JASidePanels is well documented and has basic examples for new developers like you!

有很多实现，但我建议你JTRevealSidebarDemo它简单且易于定制，你也可以使用ViewDeck或JASidePanels。JASidePanels 文档齐全，并为像您这样的新开发人员提供了基本示例！

回答by Olga Konoreva

You can use InteractiveSideMenulibrary written in Swift. It's quite good documented and has a lot of customizations.

您可以使用用 Swift 编写的InteractiveSideMenu库。它有很好的文档记录并且有很多自定义。