iOS開發-iPad側邊欄Tab選項卡切換

Android中習慣了叫側邊欄，iOS中如果不習慣側邊欄稱呼的話可以叫dock，側邊欄的切換，類似於Android中的底部導航欄的切換，iPad尺寸大了一些，導航的欄目放在側邊會顯示的更好耐看一些。選項卡是用按鈕實現的，通過按鈕的狀態控制按鈕的背景圖片，最后通過按鈕的Tag屬性進行相對應的操作，iPad需要考慮一個橫豎屏的問題，不過現在有些項目為了效果也好，為了開發效率也罷，可能只是選中了橫屏效果。

基本布局

布局之前先來看一下最終需要實現的效果:

 

需要最四個圖片進行相應的操作，通過圖片控制最后的切換效果，黑色的屬於側邊欄的區域，四個圖片是按鈕的背景圖片，不過由於需要經常操作區域的寬度和按鈕的寬度，需要預定義一下,新建一個Common.h文件，如果你不習慣，你也可以定義為Config.h，能看懂即可:

//側邊欄條目的尺寸
#define GPDockItemWidth 100
#define GPDockItemHeight 80

在之前的xCode中是默認的有pch文件的，xCode6.1中沒有，需要新建一個pch文件:

 

新建之后並不能保證你運行成功，還需要去編譯中設置一下Prefix Header($(SRCROOT)/PrefixHeader.pch)，清理下項目，導入Common.h文件即可成功；

Demo實戰

①首先需要新建一個GPMainController控制器，控制頁面頁面邏輯:

 

 

//
//  GPMainController.h
//  GrouponProject
//http://www.cnblogs.com/xiaofeixiang
//  Created by keso on 15/3/9.
//  Copyright (c) 2015年 keso. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "GPDock.h"

@interface GPMainController : UIViewController <GPDockItemDelegate>


@end

 

需要在ViewDidLoad加載側邊欄區域:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor=[UIColor greenColor];
    
    //加入側邊欄Dock
    GPDock *dock=[[GPDock alloc]initWithFrame:CGRectMake(0, 0,GPDockItemWidth, self.view.frame.size.height)];
    dock.dockDelegate=self;
    [self.view addSubview:dock];

}

　響應側邊欄的點擊事件，需要用到委托，如果委托不是很熟悉，可以參考本人之前的博客：

-(void)switchMainByTabItem:(GPDock *)gpdock originalTab:(int)start destinationTab:(int)end{
    switch (end) {
        case 0:
            self.view.backgroundColor=[UIColor blackColor];
            break;
        case 1:
            self.view.backgroundColor=[UIColor blueColor];
            break;
        case 2:
            self.view.backgroundColor=[UIColor redColor];
            break;
        case 3:
            self.view.backgroundColor=[UIColor purpleColor];
            break;
        default:
            break;
    }
    
}

GPMainContrller主要用於處理頁面的邏輯，同時需要在AppDelegate中設置一下根控制器:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    [UIView setAnimationDuration:2.0];
    self.window.rootViewController=[[GPMainController alloc]init];
    return YES;
}

②設置側邊欄區域，繼承自UIView:

//
//  GPDock.h
//  GrouponProject
//http://www.cnblogs.com/xiaofeixiang
//  Created by keso on 15/3/10.
//  Copyright (c) 2015年 keso. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "GPTabItem.h"
@class GPDock;
@protocol GPDockItemDelegate <NSObject>

-(void)switchMainByTabItem:(GPDock*)gpdock originalTab:(int)start destinationTab:(int)end;

@end

@interface GPDock : UIView
{
    GPTabItem *selectedTabItem;
}
@property (nonatomic,weak) id<GPDockItemDelegate> dockDelegate;

@end

初始化側邊欄:

-(instancetype)initWithFrame:(CGRect)frame{
    self=[super initWithFrame:frame];
    if (self) {
        //自動伸縮高度可伸縮，右邊距可以伸縮
        self.autoresizingMask=UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleRightMargin;
       //設置背景圖片
        self.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:@"Toolbar_bg_tabbar.png"]];
        [self addTabItems];
    }
    return self;
}

　添加Tab選項卡:

//添加Tab選項卡
- (void)addTabItems
{
     //首頁
    [self addSingleTab:@"Toolbar_searchshop.png" selectedImage:@"Toolbar_searchshop_selected.png" weight:1];
 
    //團購
    [self addSingleTab:@"Toolbar_groupon.png" selectedImage:@"Toolbar_groupon_selected.png" weight:2];

    //排行榜
    [self addSingleTab:@"Toolbar_ranklist.png" selectedImage:@"Toolbar_ranklist_selected.png" weight:3];
    
    // 個人中心
    [self addSingleTab:@"Toolbar_usercenter.png" selectedImage:@"Toolbar_usercenter_selected.png" weight:4];
    
}

因為代碼類似，所以封裝到一個方法里面:

- (void)addSingleTab:(NSString *)backgroundImage selectedImage:(NSString *)selectedImage weight:(int)weight
{
    GPTabItem *tabItem=[[GPTabItem alloc]init];
    [tabItem setBackgroundImage:backgroundImage];
    [tabItem setSelectedImage:selectedImage];
    //設置位置
    tabItem.frame = CGRectMake(0, GPDockItemHeight * (weight+1), 0, 0);
    //設置選中觸摸選中事件
    [tabItem addTarget:self action:@selector(tabItemTouchEvent:) forControlEvents:UIControlEventTouchDown];
    tabItem.tag = weight - 1;
    [self addSubview:tabItem];
    
}

　設置觸摸事件:

//設置觸摸事件
- (void)tabItemTouchEvent:(GPTabItem *)tabItem
{

    if ([self.dockDelegate respondsToSelector:@selector(switchMainByTabItem:originalTab:destinationTab:)]) {
        [self.dockDelegate switchMainByTabItem:self originalTab:selectedTabItem.tag destinationTab:tabItem.tag];
    }
    selectedTabItem.enabled=YES;
    tabItem.enabled = NO;
    //將當前選中的賦值
    selectedTabItem =tabItem;
}

③封裝側邊欄的GPDockItem，然后選項卡上的可以繼承：

//
//  GPDockItem.h
//  GrouponProject
//博客園FlyElephant:http://www.cnblogs.com/xiaofeixiang
//  Created by keso on 15/3/11.
//  Copyright (c) 2015年 keso. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface GPDockItem : UIButton

//背景圖片
@property (nonatomic,strong)  NSString  *backgroundImage;
//選中圖片
@property (nonatomic,strong)  NSString  *selectedImage;

@end

　設置背景圖片和選中圖片:

//
//  GPDockItem.m
//  GrouponProject
//博客園FlyElephant:http://www.cnblogs.com/xiaofeixiang
//  Created by keso on 15/3/11.
//  Copyright (c) 2015年 keso. All rights reserved.
//

#import "GPDockItem.h"

@implementation GPDockItem

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

-(instancetype)initWithFrame:(CGRect)frame{
    self=[super initWithFrame:frame];
    if (self) {
        // Item分割線
        UIImageView *splitLine = [[UIImageView  alloc] init];
        splitLine.frame = CGRectMake(0, 0, GPDockItemWidth, 2);
        splitLine.image = [UIImage imageNamed:@"separator_tabbar_item.png"];
        [self addSubview:splitLine];
    }
    return self;

}
//設置背景圖片
-(void)setBackgroundImage:(NSString *)backgroundImage{
    
    _backgroundImage=backgroundImage;
    [self setImage:[UIImage imageNamed:backgroundImage] forState:UIControlStateNormal];
    
}
//設置選中圖片
-(void)setSelectedImage:(NSString *)selectedImage{
    _selectedImage=selectedImage;
    [self setImage:[UIImage imageNamed:selectedImage] forState:UIControlStateDisabled];
    
}

-(void)setFrame:(CGRect)frame{
    //固定Item寬高
    frame.size=CGSizeMake(GPDockItemWidth, GPDockItemHeight);
    [super setFrame:frame];
}

@end

　GPTabItem代碼:

#import "GPDockItem.h"

@interface GPTabItem : GPDockItem

@end

設置選中時的背景圖片:

//
//  GPTabItem.m
//  GrouponProject
//博客園FlyElephant:http://www.cnblogs.com/xiaofeixiang
//  Created by keso on 15/3/11.
//  Copyright (c) 2015年 keso. All rights reserved.
//

#import "GPTabItem.h"

@implementation GPTabItem

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

-(instancetype)initWithFrame:(CGRect)frame{
    self=[super initWithFrame:frame];
    if (self) {
    // 設置選中時背景圖片
    [self setBackgroundImage:[UIImage imageNamed:@"bg_tabbar_item.png"] forState:UIControlStateDisabled];
    }
    return self;
}

@end

　最終效果如下:

　代碼相對以往較多，如有遺漏，請隨時與我聯系，如有好感，推薦或關注均可~