logo标签列表

iOS上如何实现类似Facebook的侧边栏菜单？

iosobjective-cfacebooksidebar
14

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

我该如何创建它？

我对iPhone开发还很陌生。

请给我一些指导或告诉我一些基本的教程，以便我可以按步骤完成它。

尝试以下网址：URL1 URL2 顺便说一下，您可以检查www.cocoacontrols.com网站，它相当不错。 - Tarek Hallak
@zeeshan shaikh - 有很多答案。如果您接受任何一个答案是有用的，它将有助于其他人更容易地识别解决方案。 - Durai Amuthan.H
3个回答
39

我们可以轻松地自己完成它。这很容易。

我在我的应用中使用的方法。

目标:

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

步骤:

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

2) 在视图控制器上添加工具栏

3) 在侧边栏(左侧视图)中:

i) 建立一个UIView(要添加到vc上)，宽度为所需的侧边栏宽度，在其中添加项目所需的视图

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

iii) 您必须有两个CGRect，一个用于按钮和结果视图，一个CGrect是扩展状态的另一个CGrect是折叠状态

iv) 就按钮而言，它的x为sidebarwidth-buttonwidth，对于扩展状态，其x为0+buttonwidth，对于视图而言，其x为0表示扩展状态，其x为-sidebarwidth则为折叠状态

4) 在主视图(右侧视图)中:

i) 建立一个UIView并将其添加到UIscrollView(要添加到vc上)

ii) UIView将具有两个CGREcts用于UIscrollView，一个用于展开和一个用于折叠

iii) UIview的x为0 y为0 width为1024 height为726(横向视图高度-vc工具栏宽度)

iv) 在折叠时，uIscrollview的x为sidebarwidth，y为42(vc'toolbar高度)，宽度为1024-sidebarwidth，高度与uiview相同

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

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

5) 在视图控制器(home page)中:

i) 将侧边栏和主视图都添加到主页中

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

iii) 在按钮触摸事件中调用toggle事件

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

    [sideBarObj ToggleVuPosition];

    [mainVuObj ToggleVuSize];

 }];

}

以下代码对我有效...（我只是为了自己的方便重命名了一些字段）

为更好地理解以下代码：

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

2）我仅编写了横向屏幕的代码...您可以根据需要自定义成纵向屏幕。

侧边栏：

#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

首页（在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

以上代码可以进一步定制，方法是不使用主函数并将该代码添加到Home视图控制器中，同样可以避免为侧边栏创建单独的类，并将其包含在home视图控制器中。

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

希望这可以帮助你。

8
如果你提供了一个样例项目或者 Git 仓库链接，那会更好，而不是一个这么冗长的回答！（原意：表示希望对方能提供一个示例项目或Git存储库的链接，以替代之前过长的回答。） - rohan-patel
@rohan-patel 我很快会将它添加到Github并发布链接，这样大家就可以更快地尝试了。 - Durai Amuthan.H
1
你把这个上传到GitHub了吗？ - Mike Flynn
@MikeFlynn 目前还没有，我还没有找到足够的空闲时间去做这件事。一旦我有足够的空闲时间，我肯定会在 Github 上发布它！ - Durai Amuthan.H
你把这个上传到 GitHub 上了吗？ - Suraj Sukale
显示剩余4条评论
4
有很多实现方式，但我建议你使用JTRevealSidebarDemo，它简单易用且易于定制，你也可以使用ViewDeck或JASidePanels。 JASidePanels有良好的文档，并为像你这样的新开发人员提供基本示例！
1
你可以使用用Swift编写的InteractiveSideMenu库。它文档良好且具有许多自定义选项。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接