我想在 iOS 6 的 Facebook iPhone 应用程序中创建侧边栏菜单。
我怎样才能创建它？
我是这个 iPhone 开发的新手。
请给我一些指示或告诉我一些我可以逐步实现的基本教程。
问问题
33325 次
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 并将其添加到 UiscollView（要添加到 vc 上）
ii) UIView 将有两个用于 UIscrollView 的 CGREct，一个用于展开，一个用于折叠
iii) UIview 的 x 为 0 y 为 0 宽度为 1024 高度为 726（vc 上的横向视图高度-工具栏宽度）
iv) 在折叠时间 uIscrollview 的 x 是 sidebarwidth y 是 42(vc'工具栏高度) 并且宽度是 1024-sidebarwidth 并且高度与 uiview 的相同
v) 在扩展时间 Uiscrollview 的 x 为 0 且宽度变为 1024
vi) Uiscrollview 内容大小始终应为 1024,726，因为如果大小比这小，我们需要滚动
5）在视图控制器（主页）：
i) 在 home 中添加侧栏和主栏
ii）然后在侧边栏中为按钮添加和事件，然后将其添加到工具栏上使用 addsubview 方法
iii) 在按钮触摸事件里面调用toggle events
-(void)OnCollapsibleExtenderTouchUpInside { [UIView animateWithDuration:1.0 animations:^{ [sideBarObj ToggleVuPosition]; [mainVuObj ToggleVuSize]; }]; }下面的代码对我有用..（我只是为了我自己重命名了一些字段）
为了更好地理解下面的代码：
1) 视图控制器名称为 Home，侧栏名称为侧栏，右侧区域名称为 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 view controller 中添加代码，同样可以避免侧边栏的单独类并将其包含在 home viewcontroller 本身中。
至于当用户按下侧边栏中的按钮时，对于主视图中的更改，您可以使用协议委托，或者我们可以将侧边栏中的按钮作为属性并在视图控制器中添加事件。
我希望这有帮助。
于 2013-07-19T11:32:11.783 回答
4
有很多实现，但我会建议你JTRevealSidebarDemo它简单易定制，你也可以使用ViewDeck或JASidePanels。JASidePanels 有很好的文档记录，并为像您这样的新开发人员提供了基本示例！
于 2013-07-18T17:27:17.363 回答
1
您可以使用用 Swift 编写的InteractiveSideMenu库。它有很好的文档记录，并且有很多自定义项。
于 2017-06-20T10:50:10.937 回答