iOS上的边栏菜单实现如Facebook？ [英] Sidebar menu implementation on iOS like Facebook?
问题描述
我想在iOS 6中的Facebook iPhone应用程序中创建侧栏菜单。
如何创建？
我是这个iPhone开发的新手。
请给我一些指针或告诉我一些基本的教程，我可以一步一步地实现
我们可以很容易地做到这一点。它很简单。
/ p>
当标题栏中按下一个按钮时，侧栏必须从左侧滑入
。
步骤：
1）创建一个视图控制器（home）和两个nsObject
类（sidebar，主要）
2）在视图控制器上添加工具栏
3）在侧栏（左侧视图）中：
i）使用des构建一个uiview（要添加到vc）在您的项目中根据需要添加视图中的边栏宽度
ii）然后创建按钮并将其设为属性bcuz它的目标
事件必须发生在查看控制器
iii）您必须为两个按钮都有两个CGRects，并且生成的
视图一个CGrect用于展开状态另一个CGrect用于折叠
iv）只要按钮被迫，它的x是sidebarwidth-buttonwidth
用于展开状态，它的x是0 + buttonwidth为折叠状态，
为远因为视图是集中的，它的x是扩展状态的0，它的x
是分页状态的-sidebarwidth
4）在主（右侧视图）：
i）构建一个UIView并将其添加到UiscollView（要添加到vc）
ii）UIView将有两个CGREcts用于UIscrollView一个扩展，
一个用于折叠
iii）UIview的x是0 y是0 width是10 24和高度是726（景观
视图高度 - vc上的工具栏宽度）
iv）折叠时间uIscrollview的x是sidebarwidth y是42（vc'tool
bar height），width为1024-sidebarwidth，height为
uiview的 b
$ bv）扩展时间Uiscrollview的x为0，宽度为1024
vi）Uiscrollview内容大小总是应该是1024,726，因为我们需要
滚动如果大小缩小比这个
5）在视图控制器（主页）中：
i）将边栏和主菜单添加在家中
ii）然后在侧边栏中添加按钮的事件，然后将其添加到
工具栏上，使用加法器访问方法
iii）在
中的按钮触摸事件呼叫切换事件 - （void）OnCollapsibleExtenderTouchUpInside
{
[UIView animateWithDuration：1.0动画：^ {
[sideBarObj Toggle VuPosition];
[mainVuObj ToggleVuSize];
}];
}
以下代码适用于我..（我刚刚重命名某些字段为我自己的
清楚）
要更好地了解以下代码： p>
1）视图控制器名称为主页，侧面栏名称为边栏，
右侧区域名称为主
2）我已经编写了风景编码，你可以自定义
portait也可以使用它。
侧栏：
#import< Foundation / Foundation.h>
@interface SideBar：NSObject
{
UIView * vuSideBar;
UIScrollView * scrollVuSideBar;
UIImageView * imgProfilePicture;
CGRect rectVuSideBar，rectExpandedScrollVuSideBar，rectCollapsedScrollVuSideBar，rectImgProfilePicture，rectExpandedBtnCollapsibleExtender，rectCollapsedBtnCollapsibleExtender;
int sideBarWidth，sideBarHeight;
}
@property（强，非原子）UIButton * btnCollapsibleExtender;
- （id）initWithParent：（UIView *）vuParent和ToolBar：（UIToolbar *）toolBarParent;
- （void）ToggleVuPosition;
@end
侧栏实现： / em>
#importSideBar.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]; //调用init，因为UIResponder没有自定义的init方法
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;
默认值：
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
主（右侧视图）实现： / em>
#importMainView.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]; //调用init，因为UIResponder没有自定义的init方法
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;
默认值：
scrollVuMain.frame = rectScrollVuMainExpanded;
break;
}
}
@end
首页（嵌入上述两个VC）：
#import <的UIKit / UIKit.h>
@interface首页：UIViewController
@end
家庭实施：
#importHome.h
#importsideBar.h
#importMain.h
@interface Home（）
{
sideBar * sideBarObj;
Main * mainVuObj;
UIToolbar * HeaderBarObj;
}
- （void）AddSideBar;
- （void）AddMainView;
- （void）AddHeaderBar;
- （void）AddCollapsibleExtenderEvent;
- （void）OnCollapsibleExtenderTouchUpInside;
@end
@implementation首页
- （id）initWithNibName：（NSString *）nibNameOrNil bundle：（NSBundle *）nibBundleOrNil
{
self = [super initWithNibName：nibNameOrNil bundle：nibBundleOrNil];
if（self）{
//自定义初始化
}
return self;
}
- （void）viewDidLoad
{
[super viewDidLoad];
[self.view setBackgroundColor：[UIColor grayColor]];
[self AddHeaderBar];
[self AddSideBar];
[self AddMainView];
[self AddCollapsibleExtenderEvent];
}
- （void）didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
//处理可以重新创建的任何资源。
}
- （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动画：^ {
[sideBarObj ToggleVuPosition];
[mainVuObj ToggleVuSize];
}];
}
@end
以上代码可以通过不使用main来进一步定制，并在Home View控制器中添加代码，同样可以避免单独的一个类用于侧边栏，并且包含在home viewcontroller本身中。
只要用户按下边栏中的按钮，对于主视图中的更改，您可以使用协议代理，也可以将边栏中的按钮作为属性，并在视图控制器中添加事件。
我希望这有帮助。
I want to create side-bar menu like in Facebook iPhone app in iOS 6.
How can I create it?
I'm new to this iPhone development.
Please give me some pointers or tell me some basic tutorial that I can follow step by step to achieve it.
we can easily do it by ourselves.It's so easy.
The approach I explain here is being used in my app.
objective:
When a button is pressed in title bar a side bar has to slide in and out from left side.
Steps:
1) Create a view controller(home) and two nsObject classes(sidebar,main)
2) add a tool bar on view controller
3) In sidebar (Left side view):
i) Build a uiview(to be added on vc) with desired sidebar width within that add views as needed for your project
ii) then create button and make it as property bcuz it's target events will have to occur in view controller
iii) you have to have two CGRects for both button and the resultant view one CGrect is for expanded state another CGrect is for collapsed
iv) as far as button is cocerned it's x is sidebarwidth-buttonwidth for expanded state and it's x is 0+buttonwidth for collapsed state and as far as view is concenrned it's x is 0 for expanded state and it's x is -sidebarwidth for collased state
4) In main(right side view):
i) Build a UIView and add it to UiscollView(to be added on vc)
ii) UIView will have two CGREcts for UIscrollView one for expanded and one for collapsed
iii) UIview's x is 0 y is 0 width is 1024 and height is 726(landscape view height-toolbar width on vc)
iv) On Collapsed time uIscrollview's x is sidebarwidth y is 42(vc'tool bar height) and width is 1024-sidebarwidth and height is same as uiview's
v) on expanded time Uiscrollview's x is 0 and width becomes 1024
vi) Uiscrollview content size always should be 1024,726 as we need scrolling if the size is shrinked than this
5) In view controller (home page):
i) add both the side bar and main in home
ii) then add and event for the button in sidebar and then add it on the tool bar usign addsubview method
iii) In the button touch event call toggle events inside
-(void)OnCollapsibleExtenderTouchUpInside { [UIView animateWithDuration:1.0 animations:^{ [sideBarObj ToggleVuPosition]; [mainVuObj ToggleVuSize]; }]; }The below code works for me..(I just renamed some field for my own sake)
To understand the below code better:
1) The View controller name is Home and side bar name is side bar and right side area name is Main
2) I have wrote the coding for landscape alone...you can customize it for portait also one use it.
Side bar:
#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
Side bar implementation:
#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(Right side view):
#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
Main(Right side view) implementation:
#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
Home(Embedding the above two one a VC):
#import <UIKit/UIKit.h>
@interface Home : UIViewController
@end
Home implementation:
#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
The above code can be customized further by without using main and adding the code for that in Home view controller likewise one can avoid a separate class for sidebar and include that in home viewcontroller itself.
As far as when user presses button in sidebar ,for changes in main view you can use protocol delegates or we can have the buttons in sidebar as property and add events in view controller.
I Hope this helps.
这篇关于iOS上的边栏菜单实现如Facebook？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
