iOS_第3方类库_侧滑选项卡SlideSwitchView
最终效果:
使用方法:
1、在主控制器中创建一个【SlideSwitchView】的对象实例，并用成员变量记住，如_slideSwitchView，并添加到self.view
2、设置【_slideSwitchView】的4个属性:
tabItemNormalColor:选项卡正常时的颜色
tabItemSelectedColor:选项卡选中时的颜色
shadowImage:盖在选项卡上面的一张图片
slideSwitchViewDelegate:设置代理为当前控制器,用于监听滑动时,切换控制器
3、调用【_slideSwitchView】的buildUI方法
4、遵守协议,并实现代理方法;如:
顶部选项卡的个数
每个选项卡对应的控制器
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; //点击按钮选择名字ID
UIImageView *_shadowImageView;
UIImage *_shadowImage;
UIColor *_tabItemNormalColor; //正常时tab文字颜色
UIColor *_tabItemSelectedColor; //选中时tab文字颜色
UIImage *_tabItemNormalBackgroundImage; //正常时tab的背景
UIImage *_tabItemSelectedBackgroundImage; //选中时tab的背景
NSMutableArray *_viewArray; //主视图的子视图数组
UIButton *_rigthSideButton; //右侧按钮
__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图片
