Mise en œuvre du menu latéral sur iOS comme Facebook?

nous pouvons facilement le faire nous-mêmes. C'est si facile.

L'approche que j'explique ici est utilisée dans mon application.

objective:

Quand un button est pressé dans la barre de titre, une barre latérale doit glisser à gauche et à droite.

Pas:

1) Créer un controller de vue (home) et deux classs nsObject (sidebar, main)

2) append une barre d'outils sur le controller de vue

3) Dans la barre latérale (vue latérale gauche):

i) Construire un uiview (à append sur vc) avec la largeur de la barre latérale désirée dans ce append des vues comme nécessaire pour votre projet

ii) puis créer un button et le faire en tant que propriété bcuz ses events cibles devront se produire dans le controller de vue

iii) vous devez avoir deux CGRects pour le button et la vue résultante un CGrect est pour l'état étendu un autre CGrect pour l'effondrement

iv) dans la mesure où le button est pris en charge, x est sidebarwidth-buttonwidth pour l'état étendu et x est 0 + buttonwidth pour l'état réduit et pour autant que l'affichage est concenré, x est 0 pour l'état étendu et x est -sidebarwidth pour l'état collé

4) En main (vue de droite):

i) Construire un UIView et l'append à UiscollView (à append sur vc)

ii) UIView aura deux CGREcts pour UIscrollView un pour élargi et un pour effondré

iii) Le x d'UIview est 0 y est 0 largeur est 1024 et la taille est 726 (largeur de vue de paysage-barre d'outils largeur sur vc)

iv) Au moment de l'effondrement, x de xIscrollview est la largeur de la barre latérale y est de 42 (hauteur de la barre de vc'tool) et la largeur est de 1024-sidebarwidth et la hauteur est la même que celle de uiview

v) lors de l'expansion du time, x de Uiscrollview vaut 0 et la largeur devient 1024

vi) La taille du contenu d'Uiscrollview devrait toujours être de 1024 726, car nous avons besoin de faire défiler si la taille est réduite.

5) Dans le controller de vue (page d'accueil):

i) append à la fois la barre latérale et principale

ii) puis ajoutez et événement pour le button dans la barre latérale, puis ajoutez-le sur la barre d'outils Méthode usign addsubview

iii) Dans le button tactile, appelez l'événement pour basculer les events à l'intérieur

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

Le code ci-dessous fonctionne pour moi .. (Je viens de renommer un champ pour mon propre bien)

Pour mieux comprendre le code ci-dessous:

1) Le nom du controller View est Home et le nom de la barre latérale est la barre latérale et le nom de la zone de droite est Main

2) J'ai écrit le encoding pour le paysage seul … vous pouvez le personnaliser pour le portrait aussi on l'utilise.

Barre latérale:

 #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 

Mise en place de la barre latérale:

  #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 (vue de droite):

  #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 

Mise en œuvre principale (vue de droite):

 #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 

Accueil (En incorporant les deux ci-dessus un VC):

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

Mise en œuvre à domicile:

 #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:(NSSsortingng *)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 

Le code ci-dessus peut être personnalisé en utilisant sans utiliser principal et en ajoutant le code pour cela dans le controller Home View, de même on peut éviter une class séparée pour la barre latérale et l'inclure dans homecontroller lui-même.

Dans la mesure où l'user appuie sur le button dans la barre latérale, pour les changements dans la vue principale, vous pouvez utiliser des delegates de protocole ou nous pouvons avoir les buttons dans la barre latérale comme propriété et append des events dans le controller de vue.

J'espère que ça aide.

Il y a beaucoup d'implémentations mais je vais vous suggérer JTRevealSidebarDemo c'est simple et facile à personnaliser, vous pouvez aussi utiliser ViewDeck ou JASidePanels . JASidePanels est bien documenté et a des exemples de base pour les nouveaux développeurs comme vous!

Vous pouvez utiliser la bibliothèque InteractiveSideMenu écrite dans Swift. C'est assez bien documenté et a beaucoup de personnalisations.