FacebookのようなiOSでのサイドバーメニューの実装？
IOS 6のFacebook iPhoneアプリのようにサイドバーメニューを作成したい。
どうすれば作成できますか？
このiPhone開発は初めてです。
私にいくつかの指針を与えるか、私がそれを達成するために段階的に従うことができるいくつかの基本的なチュートリアルを教えてください。
自分で簡単にできます。非常に簡単。
ここで説明するアプローチは、私のアプリで使用されています。
目的：
タイトルバーでボタンを押すと、サイドバーが左側からスライドインおよびスライドアウトする必要があります。
手順：
1）View Controller（home）と2つのnsObjectクラス（sidebar、main）を作成します
2）ビューコントローラーにツールバーを追加します
3）サイドバー（左側面図）：
i）uiview（vcに追加する）をビルドし、プロジェクトの必要に応じて、サイドバーの幅を追加してビューを追加します
ii）次に、ボタンを作成し、プロパティとして作成します。これは、そのターゲットイベントがビューコントローラーで発生する必要があるためです。
iii）両方のボタンに2つのCGRectが必要であり、結果のビューでは、1つのCGrectが展開された状態で、別のCGrectが折りたたまれています。
iv）ボタンに関する限り、xは展開状態のsidebarwidth-buttonwidthであり、xは折りたたみ状態の0 + buttonwidthであり、ビューに関する限り、xは展開状態のxであり、xは折りたたみ状態の-sidebarwidthです。
4）メイン（右側面図）：
i）UIViewをビルドしてUiscollViewに追加します（vcに追加されます）
ii）UIViewには、UIscrollView用に2つのCGREctがあり、1つは展開用、もう1つは折りたたみ用です
iii）UIviewのxは0、yは0、幅は1024、高さは726（ランドスケープビューの高さ-ツールバーのツールバーの幅）
iv）折りたたみ時のuIscrollviewのxはサイドバーの幅yは42（vc'tool bar height）で、幅は1024-sidebarwidthで、高さはuiviewのそれと同じです。
v）拡張時、Uiscrollviewのxは0で幅は1024になります
vi）サイズがこれよりも小さい場合はスクロールする必要があるため、uiscrollviewコンテンツのサイズは常に1024,726にする必要があります。
5）In Viewコントローラー（ホームページ）：
i）サイドバーとメインの両方を自宅に追加する
ii）次に、サイドバーのボタンにイベントを追加してから、ツールバーに追加します。addsubviewメソッドを使用します。
iii）ボタンタッチイベントの内部でトグルイベントを呼び出す
-(void)OnCollapsibleExtenderTouchUpInside { [UIView animateWithDuration:1.0 animations:^{ [sideBarObj ToggleVuPosition]; [mainVuObj ToggleVuSize]; }]; }以下のコードは私のために働きます。（私は自分のためにいくつかのフィールドの名前を変更しました）
以下のコードをよりよく理解するには：
1）Viewコントローラーの名前は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
Main（右側面図）の実装：
#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（上記2つを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
上記のコードは、メインを使用せずにさらにカスタマイズすることができ、ホームビューコントローラーにそのコードを追加することもできます。同様に、サイドバーの個別のクラスを回避して、ホームビューコントローラー自体に含めることができます。
ユーザーがサイドバーのボタンを押す限り、メインビューでの変更にはプロトコルデリゲートを使用できます。または、サイドバーのボタンをプロパティとして使用して、ビューコントローラーにイベントを追加できます。
これがお役に立てば幸いです。
実装はたくさんありますが、 JTRevealSidebarDemo はシンプルでカスタマイズが簡単です。 ViewDeck または JASidePanels を使用することもできます。 JASidePanelsは十分に文書化されており、あなたのような新しい開発者のための基本的な例があります！
Swiftで記述された InteractiveSideMen ライブラリを使用できます。ドキュメント化されており、多くのカスタマイズがあります。