現在 APP 功能要求愈來愈多，利用下方 Tab 的應用程式是一個好方法，但這種方法在超過四個時，就有點小了，如果要六個以上的話就不太可能了。所以現在比較流行的方式是改用類似FB APP 的左側滑動式選單的方式。
Sample Code 如下：S039.zip - Google Drivedocs.google.com
要自已打 Code 的人，請自已建立一 icon_menu.png 約 44x44 的圖示
首先，建立一個 Tab Application, 然後新增一個 Class 繼承 UIView, 就是我們要做的 SlideMenuUI.
在這個UI中，我們會有一個收起 Menu 的 Button 和 一個選單用的 TableView。
在 .h 檔中，因為我們要用ListView，所以引用了UITableDataSource 等兩個 Delegate.
兩個 property ，MenuScreenScale 用來調整選單佔畫面的比列，SwichPageSpeed 用來調整滑出的速度。
最後加上一個呼叫選單出現或收起來的的方法 叫 callMenu;
@interface SlideMenuUIView : UIView<UITableViewDataSource,UITableViewDelegate>
@property float MenuScreenScale;
@property float SwichingPageSpeed;
-(void)callMenu;
@end
在 .m 檔中建立幾個選單變數
@implementation SlideMenuUIView{
NSMutableArray *MenuArray; // 選單內容用
UITableView *MenuTableView; // 選單顯示用
int targetPageID; // 目標 tab ID
}
接下來在建立 Class 時用的 init 這個 class 中 做幾件事，主要是設定 Menu 選單的大小，Menu 的內容與 收回Menu 的button, MenuTableView 的資料來源等;
-(id)init{
self=[super init];
if (self) {
// 設定Menu 資料來源
MenuArray=[[NSMutableArrayalloc] initWithCapacity:50];
[MenuArrayaddObject:@"第一項"];
[MenuArrayaddObject:@"第二項"];
[MenuArrayaddObject:@"第三項"];
[MenuArrayaddObject:@"第四項"];
// 預設畫面比例
self.MenuScreenScale=0.65;
// 預設頁面切換時間
self.SwichingPageSpeed=0.25;
// 預設下次畫面切換為不切換
targetPageID=999;
// 設定基本大小
CGRect fullScreenBounds=[[UIScreen mainScreen] bounds];//取得收機畫面大小
self.frame=CGRectMake(-fullScreenBounds.size.width*self.MenuScreenScale,0 , fullScreenBounds.size.width*self.MenuScreenScale, fullScreenBounds.size.height);
self.backgroundColor=[UIColorlightGrayColor];
UILabel *titleLabel=[[UILabelalloc] initWithFrame:CGRectMake(44, 0, self.frame.size.width-44, 42)];
titleLabel.text=@"選單項目";
[titleLabel setTextAlignment:NSTextAlignmentCenter];
titleLabel.backgroundColor=[UIColorclearColor];
[self addSubview:titleLabel];
// 收Menu 的 Button
UIButton *MenuButton=[UIButtonbuttonWithType:UIButtonTypeCustom];
MenuButton.frame=CGRectMake(0,0, 44, 42);
[MenuButton setImage:[UIImageimageNamed:@"icon_menu.png"] forState:UIControlStateNormal];
[MenuButton addTarget:selfaction:@selector(callMenu) forControlEvents:UIControlEventTouchUpInside];//按下去時呼叫 callMenu 方法來收起 Menu
[self addSubview:MenuButton];
[self addMenu];
}
returnself;
}
-(void)addMenu{
// 設定Table 代理人
MenuTableView=[[UITableViewalloc] init];
MenuTableView.dataSource=self;
MenuTableView.delegate=self;
MenuTableView.frame=CGRectMake(0, 44, self.frame.size.width, self.frame.size.height-44);
MenuTableView.allowsSelection=YES;
[selfaddSubview:MenuTableView];
}
再來是建立 Menu 的收放，就是完成 callMenu 的的方法，這中間用到了一些 UIView 動畫的技術，和選單收放時的不同動作
-(void)callMenu{
[UIViewbeginAnimations:@"inMenu"context:nil];
[UIViewsetAnimationDuration:self.SwichingPageSpeed];
[UIViewsetAnimationDelegate:self];
[UIViewsetAnimationDidStopSelector:@selector(SwichingPage)];
// 設定選單完成時的畫面
CGRect fullScreenBounds=[[UIScreenmainScreen] bounds];//取得畫面大小
if (self.frame.origin.x==0) {//如果選單是在0,0 表示選單已出現要收起選單
self.frame=CGRectMake(-fullScreenBounds.size.width*self.MenuScreenScale, 0, fullScreenBounds.size.width*self.MenuScreenScale, fullScreenBounds.size.height);
}else{
targetPageID=999;//選單滑出時重設目標
self.frame=CGRectMake(0, 0, fullScreenBounds.size.width*self.MenuScreenScale, fullScreenBounds.size.height);
}
[UIViewcommitAnimations];
}
-(void)SwichingPage{
if (targetPageID!=999) {//如果是選單出現時，不需要在完成動畫時切換tab
funzooAppDelegate *AppDele =(funzooAppDelegate*)[[UIApplicationsharedApplication] delegate];
[((UITabBarController *)AppDele.window.rootViewController) setSelectedIndex:targetPageID];
[MenuTableViewremoveFromSuperview];//完成tab切換就移清除目錄重建，以免留下上次選擇的記錄
[self addMenu];
}
}
最後加上選單的內容 Data Source 就完成了。
#pragma -mark TableView Data Source
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
returnMenuArray.count;
}
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return 1;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell *myCell=[[UITableViewCellalloc] initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:@"Menu"];
myCell.textLabel.text=[MenuArrayobjectAtIndex:indexPath.row];
[myCell.textLabelsetTextAlignment:NSTextAlignmentLeft];
myCell.imageView.image=[UIImageimageNamed:@"icon_menu.png"];
return myCell;
}
#pragma mark -UITableDelegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
[self callMenu];
targetPageID=indexPath.row;//設定目標 tab ID
}
@end
物件設好了，接下來是每個各自的 Tab 的 ViewController 中加入使用的Code
首先，在 .h 檔中建立一個 slideMenuUIView 的 property
@property SlideMenuUIView *Menu;
然後在loadview 中建立一個 menu button
UIButton *MenuButton;
// 建立目錄物件
self.Menu=[[SlideMenuUIViewalloc] init];
[self.viewaddSubview:self.Menu];
// 建立頂層目錄 Button
MenuButton=[UIButtonbuttonWithType:UIButtonTypeCustom];
MenuButton.frame=CGRectMake(0,0, 44, 42);
[MenuButtonsetImage:[UIImageimageNamed:@"icon_menu.png"] forState:UIControlStateNormal];
[MenuButtonaddTarget:selfaction:@selector(callMenu) forControlEvents:UIControlEventTouchUpInside];
[self.viewaddSubview:MenuButton];
再建立menu 的動作就可以了
-(void)callMenu{
// 呼叫目錄選單出現
[self.MenucallMenu];
}
當然，如果要完整一點，記得在 loadView 中，加上隱藏下方 tabBar 的程式就可了
[self hideTabBar]
方法：
- (void)hideTabBar{
if (self.tabBarController.tabBar.hidden == YES) {
return;
}
UIView *contentView;
if ( [[self.tabBarController.view.subviewsobjectAtIndex:0] isKindOfClass:[UITabBarclass]] )
contentView = [self.tabBarController.view.subviewsobjectAtIndex:1];
else
contentView = [self.tabBarController.view.subviewsobjectAtIndex:0];
contentView.frame = CGRectMake(contentView.bounds.origin.x, contentView.bounds.origin.y, contentView.bounds.size.width, contentView.bounds.size.height + self.tabBarController.tabBar.frame.size.height);
}
完成！
留言列表
分享文章 (4)