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图片