iOS_第3方类库_側滑选项卡SlideSwitchView

终于效果:

用法:
1、在主控制器中创建一个【SlideSwitchView】的对象实例，并用成员变量记住，如_slideSwitchView，并加入到self.view
2、设置【_slideSwitchView】的4个属性:
tabItemNormalColor:选项卡正常时的颜色
tabItemSelectedColor:选项卡选中时的颜色
shadowImage:盖在选项卡上面的一张图片
slideSwitchViewDelegate:设置代理为当前控制器,用于监听滑动时,切换控制器
3、调用【_slideSwitchView】的buildUI方法
4、遵守协议,并实现代理方法;如:
顶部选项卡的个数
每一个选项卡相应的控制器

Lib一共包括三个文件:各自是一张图片、一个类声明、一个类实现

//
//  SlideSwitchView.h
//  多控制器选项卡切换效果
//
//  Created by beyond on 14-10-18.
//  Copyright (c) 2014年 beyond. All rights reserved.
//

#import <UIKit/UIKit.h>

@protocol SlideSwitchViewDelegate;
@interface SlideSwitchView : UIView<UIScrollViewDelegate>
{
    UIScrollView *_rootScrollView;                  //主视图
    UIScrollView *_topScrollView;                   //顶部页签视图
    UIImageView *_line;
    
    CGFloat _userContentOffsetX;
    BOOL _isLeftScroll;                             //是否左滑动
    BOOL _isRootScroll;                             //是否主视图滑动
    BOOL _isBuildUI;                                //是否建立了ui
    
    NSInteger _userSelectedChannelID;               //点击button选择名字ID
    
    UIImageView *_shadowImageView;
    UIImage *_shadowImage;
    
    UIColor *_tabItemNormalColor;                   //正常时tab文字颜色
    UIColor *_tabItemSelectedColor;                 //选中时tab文字颜色
    UIImage *_tabItemNormalBackgroundImage;         //正常时tab的背景
    UIImage *_tabItemSelectedBackgroundImage;       //选中时tab的背景
    NSMutableArray *_viewArray;                     //主视图的子视图数组
    
    UIButton *_rigthSideButton;                     //右側button
    
    __weak id<SlideSwitchViewDelegate> _slideSwitchViewDelegate;
}

@property (nonatomic, strong) IBOutlet UIScrollView *rootScrollView;
@property (nonatomic, strong) IBOutlet UIScrollView *topScrollView;
@property (nonatomic, assign) CGFloat userContentOffsetX;
@property (nonatomic, assign) NSInteger userSelectedChannelID;
@property (nonatomic, assign) NSInteger scrollViewSelectedChannelID;
@property (nonatomic, weak) IBOutlet id<SlideSwitchViewDelegate> slideSwitchViewDelegate;
@property (nonatomic, strong) UIColor *tabItemNormalColor;
@property (nonatomic, strong) UIColor *tabItemSelectedColor;
@property (nonatomic, strong) UIImage *tabItemNormalBackgroundImage;
@property (nonatomic, strong) UIImage *tabItemSelectedBackgroundImage;
@property (nonatomic, strong) UIImage *shadowImage;
@property (nonatomic, strong) NSMutableArray *viewArray;
@property (nonatomic, strong) IBOutlet UIButton *rigthSideButton;



- (void)setHideTopView:(BOOL)hide;

- (void) setScrollViewSelectedWithIndex:(NSInteger)index;


/*!
 * @method 创建子视图UI
 * @abstract
 * @discussion
 * @param
 * @result
 */
- (void)buildUI;

/*!
 * @method 通过16进制计算颜色
 * @abstract
 * @discussion
 * @param 16机制
 * @result 颜色对象
 */
+ (UIColor *)colorFromHexRGB:(NSString *)inColorString;

@end

@protocol SlideSwitchViewDelegate <NSObject>

@required

/*!
 * @method 顶部tab个数
 * @abstract
 * @discussion
 * @param 本控件
 * @result tab个数
 */
- (NSUInteger)numberOfTab:(SlideSwitchView *)view;

/*!
 * @method 每一个tab所属的viewController
 * @abstract
 * @discussion
 * @param tab索引
 * @result viewController
 */
- (UIViewController *)slideSwitchView:(SlideSwitchView *)view viewOfTab:(NSUInteger)number;

@optional

/*!
 * @method 滑动左边界时传递手势
 * @abstract
 * @discussion
 * @param   手势
 * @result 
 */
- (void)slideSwitchView:(SlideSwitchView *)view panLeftEdge:(UIPanGestureRecognizer*) panParam;

/*!
 * @method 滑动右边界时传递手势
 * @abstract
 * @discussion
 * @param   手势
 * @result
 */
- (void)slideSwitchView:(SlideSwitchView *)view panRightEdge:(UIPanGestureRecognizer*) panParam;

/*!
 * @method 点击tab
 * @abstract
 * @discussion
 * @param tab索引
 * @result 
 */
- (void)slideSwitchView:(SlideSwitchView *)view didselectTab:(NSUInteger)number;


- (void)scrollViewDidScroll:(SlideSwitchView *)view didselectTab:(NSUInteger)number;



@end

<span style="color:#000000;">//
//  SlideSwitchView.m
//  多控制器选项卡切换效果
//
//  Created by beyond on 14-10-18.
//  Copyright (c) 2014年 beyond. All rights reserved.
//

#import "SlideSwitchView.h"

#define UIColorFromIntRBG(RED, GREEN, BLUE) [UIColor colorWithRed:RED/255.0 green:GREEN/255.0 blue:BLUE/255.0 alpha:1.0]

@interface SlideSwitchView ()
{
    BOOL doSomething;
    // 開始滚动时的offset的x
    int startOffsetX;
}
@end
static const CGFloat kHeightOfTopScrollView = 44.0f;
static const CGFloat kWidthOfButtonMargin = 16.0f;
static const CGFloat kFontSizeOfTabButton = 17.0f;
static const NSUInteger kTagOfRightSideButton = 999;

@implementation SlideSwitchView

#pragma mark - 初始化參数

- (void)initValues
{
    
    
    //创建顶部可滑动的tab
    _topScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width, kHeightOfTopScrollView)];
    _topScrollView.delegate = self;
    _topScrollView.backgroundColor = UIColorFromIntRBG(240, 240, 240);
    _topScrollView.pagingEnabled = NO;
    _topScrollView.showsHorizontalScrollIndicator = NO;
    _topScrollView.showsVerticalScrollIndicator = NO;
    _topScrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
    _topScrollView.scrollEnabled = NO;


    [self addSubview:_topScrollView];
    _userSelectedChannelID = 100;

    
    _line = [[UIImageView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(_topScrollView.frame), self.bounds.size.width, 1)];
    UIColor *fromColor = UIColorFromIntRBG(212, 212, 212);
    // 工具方法,从颜色 生成 图片
    UIImage *image = [self imageWithColor:fromColor size:_line.frame.size];
     [_line setImage:image];
    [self addSubview:_line];

    
    //创建主滚动视图
    _rootScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, kHeightOfTopScrollView + 1, self.bounds.size.width, self.bounds.size.height - kHeightOfTopScrollView)];
    _rootScrollView.delegate = self;
    _rootScrollView.pagingEnabled = YES;
    _rootScrollView.userInteractionEnabled = YES;
    _rootScrollView.bounces = NO;
    _rootScrollView.showsHorizontalScrollIndicator = NO;
    _rootScrollView.showsVerticalScrollIndicator = NO;
    _rootScrollView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleWidth;
    _userContentOffsetX = 0;
    [_rootScrollView.panGestureRecognizer addTarget:self action:@selector(scrollHandlePan:)];
    [self addSubview:_rootScrollView];
    
    _viewArray = [[NSMutableArray alloc] init];
    
    _isBuildUI = NO;
    
}

- (id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self initValues];
    }
    return self;
}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self initValues];
    }
    return self;
}

#pragma mark getter/setter

- (void)setRigthSideButton:(UIButton *)rigthSideButton
{
    UIButton *button = (UIButton *)[self viewWithTag:kTagOfRightSideButton];
    [button removeFromSuperview];
    rigthSideButton.tag = kTagOfRightSideButton;
    _rigthSideButton = rigthSideButton;
    [self addSubview:_rigthSideButton];
    
}

#pragma mark - 创建控件

//当横竖屏切换时可通过此方法调整布局
- (void)layoutSubviews
{
    //创建完子视图UI才须要调整布局
    if (_isBuildUI) {
        
        //更新主视图的总宽度
        _rootScrollView.contentSize = CGSizeMake(self.bounds.size.width * [_viewArray count], 0);
        
        //更新主视图各个子视图的宽度
        for (int i = 0; i < [_viewArray count]; i++) {
            UIViewController *listVC = _viewArray[i];
            listVC.view.frame = CGRectMake(0+_rootScrollView.bounds.size.width*i, 0,
                                           _rootScrollView.bounds.size.width, _rootScrollView.bounds.size.height);
        }
        
        //滚动到选中的视图
        [_rootScrollView setContentOffset:CGPointMake((_userSelectedChannelID - 100)*self.bounds.size.width, 0) animated:NO];
        
        // 调整顶部滚动视图选中按钮位置
        UIButton *button = (UIButton *)[_topScrollView viewWithTag:_userSelectedChannelID];
        [self adjustScrollViewContentX:button];
    }
}

/*!
 * @method 创建子视图UI
 * @abstract
 * @discussion
 * @param
 * @result
 */
- (void)buildUI
{
    NSUInteger number = [self.slideSwitchViewDelegate numberOfTab:self];
    for (int i=0; i<number; i++) {
        UIViewController *vc = [self.slideSwitchViewDelegate slideSwitchView:self viewOfTab:i];
        [_viewArray addObject:vc];
        [_rootScrollView addSubview:vc.view];
    }
    [self createNameButtonsWithNumber:number];
    
    //选中第一个view
    if (self.slideSwitchViewDelegate && [self.slideSwitchViewDelegate respondsToSelector:@selector(slideSwitchView:didselectTab:)]) {
        [self.slideSwitchViewDelegate slideSwitchView:self didselectTab:_userSelectedChannelID - 100];
    }
    
    _isBuildUI = YES;
    
    //创建完子视图UI才须要调整布局
    [self setNeedsLayout];
}


/*!
 * @method 初始化顶部tab的各个按钮
 * @abstract
 * @discussion
 * @param
 * @result
 */
- (void)createNameButtonsWithNumber:(int)number
{
    
    _shadowImageView = [[UIImageView alloc] init];
    [_shadowImageView setImage:_shadowImage];
    [_topScrollView addSubview:_shadowImageView];
    
    //顶部tabbar的总长度
    CGFloat topScrollViewContentWidth = kWidthOfButtonMargin;
    
    CGRect rect = [UIScreen mainScreen].applicationFrame;
    int width = rect.size.width / number;
    
    //每一个tab偏移量
    CGFloat xOffset = 0;
    for (int i = 0; i < [_viewArray count]; i++) {
        UIViewController *vc = _viewArray[i];
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

        //累计每一个tab文字的长度
        topScrollViewContentWidth += kWidthOfButtonMargin + width;
        //设置按钮尺寸
        [button setFrame:CGRectMake(xOffset, 0, width, kHeightOfTopScrollView)];
        //计算下一个tab的x偏移量
        xOffset += width;
        
        [button setTag:i+100];
        if (i == 0) {
            _shadowImageView.frame = CGRectMake(0, 0, width, _shadowImage.size.height);
            button.selected = YES;
        }
        [button setTitle:vc.title forState:UIControlStateNormal];
        button.titleLabel.font = [UIFont systemFontOfSize:kFontSizeOfTabButton];
        [button setTitleColor:self.tabItemNormalColor forState:UIControlStateNormal];
        [button setTitleColor:self.tabItemSelectedColor forState:UIControlStateSelected];
        [button setBackgroundImage:self.tabItemNormalBackgroundImage forState:UIControlStateNormal];
        [button setBackgroundImage:self.tabItemSelectedBackgroundImage forState:UIControlStateSelected];
        [button addTarget:self action:@selector(selectNameButton:) forControlEvents:UIControlEventTouchUpInside];
        [_topScrollView addSubview:button];
        
        
        if (i < _viewArray.count) {
            
            UIView *line = [[UIView alloc] initWithFrame:CGRectMake(CGRectGetMaxX(button.frame), 0, 0.5, _topScrollView.frame.size.height - 2)];
            line.backgroundColor = UIColorFromIntRBG(212, 212, 212);
            
            [_topScrollView addSubview:line];
            
        }
        
    }
    
    //设置顶部滚动视图的内容总尺寸
    _topScrollView.contentSize = CGSizeMake(topScrollViewContentWidth, kHeightOfTopScrollView);
}



/*!
 * @method 初始化顶部tab的各个按钮
 * @abstract
 * @discussion
 * @param
 * @result
 */
- (void)createNameButtons
{
    
    _shadowImageView = [[UIImageView alloc] init];
    [_shadowImageView setImage:_shadowImage];
    [_topScrollView addSubview:_shadowImageView];
    
    //顶部tabbar的总长度
    CGFloat topScrollViewContentWidth = kWidthOfButtonMargin;
    //每一个tab偏移量
    CGFloat xOffset = kWidthOfButtonMargin;
    for (int i = 0; i < [_viewArray count]; i++) {
        UIViewController *vc = _viewArray[i];
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        CGSize textSize = [vc.title sizeWithFont:[UIFont systemFontOfSize:kFontSizeOfTabButton]
                               constrainedToSize:CGSizeMake(_topScrollView.bounds.size.width, kHeightOfTopScrollView)
                                   lineBreakMode:NSLineBreakByTruncatingTail];
        //累计每一个tab文字的长度
        topScrollViewContentWidth += kWidthOfButtonMargin+textSize.width;
        //设置按钮尺寸
        [button setFrame:CGRectMake(xOffset,0,
                                    textSize.width, kHeightOfTopScrollView)];
        //计算下一个tab的x偏移量
        xOffset += textSize.width + kWidthOfButtonMargin;
        
        [button setTag:i+100];
        if (i == 0) {
            _shadowImageView.frame = CGRectMake(kWidthOfButtonMargin, 0, textSize.width, _shadowImage.size.height);
            button.selected = YES;
        }
        [button setTitle:vc.title forState:UIControlStateNormal];
        button.titleLabel.font = [UIFont systemFontOfSize:kFontSizeOfTabButton];
        [button setTitleColor:self.tabItemNormalColor forState:UIControlStateNormal];
        [button setTitleColor:self.tabItemSelectedColor forState:UIControlStateSelected];
        [button setBackgroundImage:self.tabItemNormalBackgroundImage forState:UIControlStateNormal];
        [button setBackgroundImage:self.tabItemSelectedBackgroundImage forState:UIControlStateSelected];
        [button addTarget:self action:@selector(selectNameButton:) forControlEvents:UIControlEventTouchUpInside];
        [_topScrollView addSubview:button];
    }
    
    //设置顶部滚动视图的内容总尺寸
    _topScrollView.contentSize = CGSizeMake(topScrollViewContentWidth, kHeightOfTopScrollView);
}


#pragma mark - 顶部滚动视图逻辑方法

/*!
 * @method 选中tab时间
 * @abstract
 * @discussion
 * @param 按钮
 * @result
 */
- (void)selectNameButton:(UIButton *)sender
{
    //假设点击的tab文字显示不全，调整滚动视图x坐标使用使tab文字显示全
    [self adjustScrollViewContentX:sender];
    
    //假设更换按钮
    if (sender.tag != _userSelectedChannelID) {
        //取之前的按钮
        UIButton *lastButton = (UIButton *)[_topScrollView viewWithTag:_userSelectedChannelID];
        lastButton.selected = NO;
        //赋值按钮ID
        _userSelectedChannelID = sender.tag;
    }
    
    //按钮选中状态
    if (!sender.selected) {
        sender.selected = YES;
        
        [UIView animateWithDuration:0.25 animations:^{
            
            [_shadowImageView setFrame:CGRectMake(sender.frame.origin.x, 0, sender.frame.size.width, _shadowImage.size.height)];
            
        } completion:^(BOOL finished) {
            if (finished) {
                //设置新页出现 (不用动画)
                if (!_isRootScroll) {
                    [_rootScrollView setContentOffset:CGPointMake((sender.tag - 100)*self.bounds.size.width, 0) animated:NO];
                }
                _isRootScroll = NO;
                
                if (self.slideSwitchViewDelegate && [self.slideSwitchViewDelegate respondsToSelector:@selector(slideSwitchView:didselectTab:)]) {
                    [self.slideSwitchViewDelegate slideSwitchView:self didselectTab:_userSelectedChannelID - 100];
                }
                
                
                
            }
        }];
        
    }
    //反复点击选中按钮
    else {
        
    }
}


- (void) setScrollViewSelectedWithIndex:(NSInteger)index
{
    _userSelectedChannelID = index + 100;

    //设置新页出现

    [_rootScrollView setContentOffset:CGPointMake(index * self.bounds.size.width, 0) animated:YES];
    _isRootScroll = NO;

    if (self.slideSwitchViewDelegate && [self.slideSwitchViewDelegate respondsToSelector:@selector(slideSwitchView:didselectTab:)]) {
        [self.slideSwitchViewDelegate slideSwitchView:self didselectTab:_userSelectedChannelID - 100];
    }
    
    
}


/*!
 * @method 调整顶部滚动视图x位置
 * @abstract
 * @discussion
 * @param
 * @result
 */
- (void)adjustScrollViewContentX:(UIButton *)sender
{
    //假设 当前显示的最后一个tab文字超出右边界
    if (sender.frame.origin.x - _topScrollView.contentOffset.x > self.bounds.size.width - (sender.bounds.size.width)) {
        //向左滚动视图，显示完整tab文字
        [_topScrollView setContentOffset:CGPointMake(sender.frame.origin.x - (_topScrollView.bounds.size.width- (sender.bounds.size.width)), 0)  animated:YES];
    }
    
    //假设 （tab的文字坐标 - 当前滚动视图左边界所在整个视图的x坐标） < 按钮的隔间 。代表tab文字已超出边界
    if (sender.frame.origin.x - _topScrollView.contentOffset.x < 0) {
        //向右滚动视图（tab文字的x坐标 - 按钮间隔 = 新的滚动视图左边界在整个视图的x坐标）。使文字显示完整
        [_topScrollView setContentOffset:CGPointMake(sender.frame.origin.x, 0)  animated:YES];
    }
}

#pragma mark - 主视图逻辑方法


//滚动视图開始时
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    
    
    
    startOffsetX = scrollView.contentOffset.x;
    // 一開始在最左边时,临时是不做不论什么事情;由于当它向右划时,不需做不论什么事;仅当它向左划时,才须要切换tabItem的状态
    if (startOffsetX == 0) {
        doSomething = NO;
    }
    // 一開始在最左边时,临时是不做不论什么事情;由于当它向右划时,不需做不论什么事;仅当它向左划时,才须要切换tabItem的状态
    // 960
    if (startOffsetX == _rootScrollView.contentSize.width - _rootScrollView.bounds.size.width) {
        doSomething = NO;
    }
    //**********************************
    
    if (scrollView == _rootScrollView) {
        _userContentOffsetX = scrollView.contentOffset.x;
    }
}

//滚动视图进行中
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (scrollView == _rootScrollView) {
        //推断用户是否左滚动还是右滚动
        if (_userContentOffsetX < scrollView.contentOffset.x) {
            _isLeftScroll = YES;
        }
        else {
            _isLeftScroll = NO;
        }
        
    }
    // **************************
    // 假设最開始在最左边,可是是往左滑,仍须要调整顶部的tabItem状态
    if(startOffsetX == 0 && _isLeftScroll){
        doSomething = YES;
    }
    // 假设最開始在最右边,可是是往右滑,也须要调整顶部的tabItem状态
    if(startOffsetX == _rootScrollView.contentSize.width - _rootScrollView.bounds.size.width && !_isLeftScroll){
        doSomething = YES;
    }
    
}

//滚动视图 结束滚动
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    
    if (!doSomething) {
        return;
    }
    
    //**********************************
    if (scrollView == _rootScrollView) {
        _isRootScroll = YES;
        //调整顶部滑条按钮状态
        int tag = (int)scrollView.contentOffset.x/self.bounds.size.width +100;
        
        
        if (self.slideSwitchViewDelegate && [self.slideSwitchViewDelegate respondsToSelector:@selector(slideSwitchView:didselectTab:)]) {
            [self.slideSwitchViewDelegate slideSwitchView:self didselectTab:tag - 100];
        }
        
        UIButton *button = (UIButton *)[_topScrollView viewWithTag:tag];
        // 顶部的tabItem按钮点击
        [self selectNameButton:button];
    }
}

//传递滑动事件给下一层
-(void)scrollHandlePan:(UIPanGestureRecognizer*) panParam
{
    
//    BXLog(@"_userSelectedChannelID ===== %f", _rootScrollView.contentOffset.x);
    
    //当滑道左边界时。传递滑动事件给代理
    if(_rootScrollView.contentOffset.x <= 0) {
        if (self.slideSwitchViewDelegate
            && [self.slideSwitchViewDelegate respondsToSelector:@selector(slideSwitchView:panLeftEdge:)]) {
            [self.slideSwitchViewDelegate slideSwitchView:self panLeftEdge:panParam];
        }
    } else if(_rootScrollView.contentOffset.x >= _rootScrollView.contentSize.width - _rootScrollView.bounds.size.width) {
        if (self.slideSwitchViewDelegate
            && [self.slideSwitchViewDelegate respondsToSelector:@selector(slideSwitchView:panRightEdge:)]) {
            [self.slideSwitchViewDelegate slideSwitchView:self panRightEdge:panParam];
        }
    }
}


- (void) setHideTopView:(BOOL)hide
{
    _line.hidden = hide;
    _topScrollView.hidden = hide;
    _rootScrollView.frame = CGRectMake(0, 0, _rootScrollView.frame.size.width, self.bounds.size.height);
}


#pragma mark - 工具方法

/*!
 * @method 通过16进制计算颜色
 * @abstract
 * @discussion
 * @param 16机制
 * @result 颜色对象
 */
+ (UIColor *)colorFromHexRGB:(NSString *)inColorString
{
    UIColor *result = nil;
    unsigned int colorCode = 0;
    unsigned char redByte, greenByte, blueByte;
    
    if (nil != inColorString)
    {
        NSScanner *scanner = [NSScanner scannerWithString:inColorString];
        (void) [scanner scanHexInt:&colorCode]; // ignore error
    }
    redByte = (unsigned char) (colorCode >> 16);
    greenByte = (unsigned char) (colorCode >> 8);
    blueByte = (unsigned char) (colorCode); // masks off high bits
    result = [UIColor
              colorWithRed: (float)redByte / 0xff
              green: (float)greenByte/ 0xff
              blue: (float)blueByte / 0xff
              alpha:1.0];
    return result;
}
#pragma mark - 工具方法
// 从颜色 转成 图片
- (UIImage *)imageWithColor:(UIColor *)color size:(CGSize)size
{
    //Create a context of the appropriate size
    UIGraphicsBeginImageContext(size);
    CGContextRef currentContext = UIGraphicsGetCurrentContext();
    
    //Build a rect of appropriate size at origin 0,0
    CGRect fillRect = CGRectMake(0, 0, size.width, size.height);
    
    //Set the fill color
    CGContextSetFillColorWithColor(currentContext, color.CGColor);
    
    //Fill the color
    CGContextFillRect(currentContext, fillRect);
    
    //Snap the picture and close the context
    UIImage *colorImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return colorImage;
}
@end
</span>

以下是用法:

//
//  ViewController.m
//  多控制器选项卡切换效果
//
//  Created by beyond on 14-10-18.
//  Copyright (c) 2014年 beyond. All rights reserved.
//

#import "ViewController.h"
// 1
#import "SlideSwitchView.h"
// 3
#import "Tab1Ctrl.h"
#import "Tab2Ctrl.h"
#import "Tab3Ctrl.h"
#import "Tab4Ctrl.h"
#define IS_IOS7 [[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0
#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

#define UIColorFromIntRBG(RED, GREEN, BLUE) [UIColor colorWithRed:RED/255.0 green:GREEN/255.0 blue:BLUE/255.0 alpha:1.0]

@interface ViewController ()<SlideSwitchViewDelegate>
{
    // 4
    Tab1Ctrl *_tab1VC;
    Tab2Ctrl *_tab2VC;
    Tab3Ctrl *_tab3VC;
    Tab4Ctrl *_tab4VC;
    
    // 5
    SlideSwitchView *_slideSwitchView;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    if (IS_IOS7) {
        self.edgesForExtendedLayout = UIRectEdgeNone;
        self.extendedLayoutIncludesOpaqueBars = NO;
        self.modalPresentationCapturesStatusBarAppearance = NO;
    }
    // 2创建全部的tab相应的控制器们
    [self setupChildCtrollers];
    
    // 5创建Slide总的view
    [self setupSlideSwitchView];
}

// 2创建全部的tab相应的控制器们
- (void) setupChildCtrollers
{
    _tab1VC = [[Tab1Ctrl alloc] init];
    _tab1VC.title = @"小学同学";
    // _tab1VC.delegate = self;
    
    _tab2VC = [[Tab2Ctrl alloc] init];
    _tab2VC.title = @"初中同学";
    // _tab2VC.delegate = self;
    
    _tab3VC = [[Tab3Ctrl alloc] init];
    _tab3VC.title = @"高中同学";
    // _tab3VC.delegate = self;
    
    _tab4VC = [[Tab4Ctrl alloc] init];
    _tab4VC.title = @"大学同学";
    // _tab4VC.delegate = self;
}

// 5创建Slide总的view
- (void)setupSlideSwitchView
{
    _slideSwitchView = [[SlideSwitchView alloc] initWithFrame:CGRectMake(0, 20, 320,480 )];
    // 加入到控制器的view
    [self.view addSubview:_slideSwitchView];
    
    // tabItem正常的 和 选中时的颜色
    _slideSwitchView.tabItemNormalColor = UIColorFromRGB(0x666666);
    _slideSwitchView.tabItemSelectedColor = UIColorFromIntRBG(51, 125, 231);
    
    
    UIImage *shadowImage = [[UIImage imageNamed:@"bottom_line.png"]
                            stretchableImageWithLeftCapWidth:30.0f topCapHeight:0.0f];
    _slideSwitchView.shadowImage = shadowImage;
    // 固定写法,代理,用于监听滑动事件
    _slideSwitchView.slideSwitchViewDelegate = self;
    // 固定写法,创建子视图UI
    [_slideSwitchView buildUI];
}

#pragma mark - 数据源和代理方法

// 顶部tab个数
- (NSUInteger)numberOfTab:(SlideSwitchView *)view
{
    return 4;
}

// 每一个tab所属的viewController
- (UIViewController *)slideSwitchView:(SlideSwitchView *)view viewOfTab:(NSUInteger)number
{
    if (number == 0) {
        return _tab1VC;
    } else if (number == 1) {
        return _tab2VC;
    } else if (number == 2) {
        return _tab3VC;
    }  else {
        return _tab4VC;
    }
}

#pragma mark - 可选实现
// 滑动左边界时传递手势
- (void)slideSwitchView:(SlideSwitchView *)view panLeftEdge:(UIPanGestureRecognizer*) panParam{}
// 滑动右边界时传递手势
- (void)slideSwitchView:(SlideSwitchView *)view panRightEdge:(UIPanGestureRecognizer*) panParam{}
// 点击tab
- (void)slideSwitchView:(SlideSwitchView *)view didselectTab:(NSUInteger)number{}
@end

子tab控制器之中的一个

//
//  Tab1Ctrl.m
//  多控制器选项卡切换效果
//
//  Created by beyond on 14-10-18.
//  Copyright (c) 2014年 beyond. All rights reserved.
//

#import "Tab1Ctrl.h"

@interface Tab1Ctrl ()

@end

@implementation Tab1Ctrl

- (void)viewDidLoad {
    [super viewDidLoad];
    
    CGRect rect = CGRectMake(0, 0, 320, 416);
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:rect];
    imageView.image = [UIImage imageNamed:@"1.png"];
    imageView.contentMode = UIViewContentModeScaleAspectFill;
    [self.view addSubview:imageView];
}


@end

四张nana图片