我想在iOS 6中创建类似于Facebook iPhone应用程序的边栏菜单。
我该如何创建它?
我对iPhone开发还很陌生。
请给我一些指导或告诉我一些基本的教程,以便我可以按步骤完成它。
我想在iOS 6中创建类似于Facebook iPhone应用程序的边栏菜单。
我该如何创建它?
我对iPhone开发还很陌生。
请给我一些指导或告诉我一些基本的教程,以便我可以按步骤完成它。
我们可以轻松地自己完成它。这很容易。
我在我的应用中使用的方法。
当标题栏中按下按钮时,侧边栏必须从左侧滑入和滑出。
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视图控制器中。
至于当用户在侧边栏中按下按钮时,为了更改主视图,可以使用协议委托或者将侧边栏中的按钮作为属性,并在视图控制器中添加事件。
希望这可以帮助你。