現在 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);

 

    

}

 

 

完成!

 

 

 

 

 

 

 

 

, , , , , , , , , ,
創作者介紹

X Code Objective-C Swift 學習記錄 for iOS & macOS (OS X)

shenfive 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • fun
  • 不好意思
    我有下載您的範例黨
    然後新創一個頁面上面放BUTTON聯結到Tab controler
    執行時.由按鈕到達你的第一頁 但我按選單的第二頁或其他頁時,就會跳出驚嘆號並停止程式,想請問有沒有方法解