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

时间：2013-06-10 08:21:02

标签： ios objective-c facebook sidebar

我想像iOS 6中的Facebook iPhone应用程序一样创建侧栏菜单。

我该如何创建它？

我是这个iPhone开发的新手。

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

3 个答案:

答案 0 :(得分：39)

我们可以轻松地自己做。这很容易。

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

目的：

  

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

步骤：

  

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

     

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

     

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

     

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

     

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

     

iii）你必须为按钮和结果提供两个CGRect   查看一个CGrect用于展开状态另一个CGrect用于折叠

     

iv）就按钮而言，它的x是sidebarwidth-buttonwidth   对于展开状态，它的x是0 +按钮宽度，用于折叠状态和   就视图而言，对于扩展状态，x为0，而x为x   是折叠状态的-sidebarwidth

     

4）在主要（右侧视图）中：

     

i）构建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）在视图控制器（主页）中：

     

i）在家里添加侧栏和主页

     

ii）然后为侧边栏中的按钮添加和事件，然后将其添加   工具栏usign addsubview方法

     

iii）在按钮触摸事件中调用

内的切换事件 
 -(void)OnCollapsibleExtenderTouchUpInside
{
   [UIView animateWithDuration:1.0 animations:^{

    [sideBarObj ToggleVuPosition];

    [mainVuObj ToggleVuSize];

 }];

}
     

以下代码适用于我..（我刚刚为我自己重命名了一些字段   缘故）

更好地了解以下代码：

  

1）View控制器名称为Home，侧栏名称为side bar和   右侧区域名称为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

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

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

我希望这会有所帮助。

答案 1 :(得分：4)

有很多实现，但我建议您JTRevealSidebarDemo简单易用，您也可以使用ViewDeck或JASidePanels。 JASidePanels已有详细记录，并为像您这样的新开发人员提供基本示例！

答案 2 :(得分：1)

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

相关问题
最新问题