您的位置:首页 > 移动开发 > IOS开发

tab选项卡,类似网易新闻的

2016-06-27 17:05 411 查看
直接上代码,控制器.m的,

#import "TabViewController.h"
#import "TabButton.h"

// tab按钮的高度
#define TabBtnHeight 40
// tab按钮的距离
#define TabButtonMargin 10

@interface TabViewController () <UIScrollViewDelegate>

/** 标题array */
@property (nonatomic,
strong) NSArray *titleArray;
/** 小滚动 */
@property (weak,
nonatomic) UIScrollView *smallScrollView;
/** 大滚动 */
@property (nonatomic,
weak) UIScrollView *bigScrollView;

@end

@implementation TabViewController

- (void)viewDidLoad {
    [super
viewDidLoad];
  
    self.title =
@"项目详情";
    
    self.titleArray =
@[@"头条",
@"娱乐",
@"移动物联",
@"影视歌",@"法素阿萨德",
@"旅游",
@"粉丝多岁",
@"大神"];
    [self
setupChildViews];
    
    // 第一个tabButton设为选中
    TabButton *tabButton = [self.smallScrollView.subviews
firstObject];
    tabButton.scale =
1.0;

    // 添加第一个控制器的view
    UIViewController *firstVC =
self.childViewControllers[0];
    firstVC.view.frame =
self.bigScrollView.bounds;
    [self.bigScrollView
addSubview:firstVC.view];
}

#pragma mark - 初始化子控件
- (void)setupChildViews {
    // 小滚动
    UIScrollView *smallScrollView = [[UIScrollView
alloc] initWithFrame:CGRectMake(0,
0, SCREEN_WIDTH,
TabBtnHeight)];
    smallScrollView.showsHorizontalScrollIndicator =
NO;
    smallScrollView.showsVerticalScrollIndicator =
NO;
    [self.view
addSubview:smallScrollView];
    self.smallScrollView = smallScrollView;
    
    // 大滚动
    UIScrollView *bigScrollView = [[UIScrollView
alloc] initWithFrame:CGRectMake(0,
TabBtnHeight, SCREEN_WIDTH,
SCREEN_HEIGHT - TabBtnHeight)];
    bigScrollView.contentSize =
CGSizeMake(SCREEN_WIDTH *
self.titleArray.count,
0);
    bigScrollView.pagingEnabled =
YES;
    bigScrollView.delegate  =
self;
    [self.view
addSubview:bigScrollView];
    self.bigScrollView = bigScrollView;
    
    // tabButton按钮
    CGFloat btnX =
0;
    for (NSUInteger i =
0; i<self.titleArray.count; i++) {
        CGFloat length = [self.titleArray[i]
sizeWithAttributes:@{NSFontAttributeName:[UIFont
systemFontOfSize:16]}].width;
        CGFloat btnW = length+TabButtonMargin;
        TabButton *btn = [[TabButton
alloc] initWithFrame:CGRectMake(btnX,
0, btnW, TabBtnHeight)];
        [btn setTitle:self.titleArray[i]
forState:UIControlStateNormal];
        btnX += btnW;
        [btn addTarget:self
action:@selector(btnClick:)
forControlEvents:UIControlEventTouchUpInside];
        btn.tag = i;
        
        UIViewController *vc = [[UIViewController
alloc] init];
        vc.view.backgroundColor =
COLOR_RANDOM;
        [self
addChildViewController:vc];
        
        [self.smallScrollView
addSubview:btn];
    }
    self.smallScrollView.contentSize =
CGSizeMake(btnX, 0);
}

- (void)btnClick:(UIButton *)btn{
    CGFloat offsetX = btn.tag *
SCREEN_WIDTH;
    CGFloat offsetY =
self.bigScrollView.contentOffset.y;
    CGPoint offset =
CGPointMake(offsetX, offsetY);
    
    [self.bigScrollView
setContentOffset:offset animated:YES];
}

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    NSUInteger index = scrollView.contentOffset.x /
SCREEN_WIDTH;
    
    TabButton *leftBtn =
self.smallScrollView.subviews[index];
    CGFloat leftScale =
1.0 - (int)scrollView.contentOffset.x % (int)SCREEN_WIDTH
/ SCREEN_WIDTH;
    leftBtn.scale = leftScale;
    
    // 判断还没移动到最右边
    if (index <
self.smallScrollView.subviews.count -
1) {
        TabButton *rightBtn =
self.smallScrollView.subviews[index+1];
        rightBtn.scale =
1.0 - leftScale;
    }
}

/**
 *  滚动完毕就会调用(如果是人为拖拽scrollView导致滚动完毕,才会调用这个方法)
 */
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    [self
scrollViewDidEndScrollingAnimation:scrollView];
}

/**
 *  滚动完毕就会调用(如果不是人为拖拽scrollView导致滚动完毕,才会调用这个方法)
 */
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
    NSUInteger index = scrollView.contentOffset.x /
SCREEN_WIDTH;
    NSLog(@"%f %zd",scrollView.contentOffset.x,index);
    
    // 计算滚动导航栏标题的距离
    CGFloat smallX =
0;
    for (NSUInteger i =
0; i<=index; i++) {
        CGFloat length = [self.titleArray[i]
sizeWithAttributes:@{NSFontAttributeName:[UIFont
systemFontOfSize:16]}].width +
TabButtonMargin;
        
        if (i == index -
1) { //如果是最后一个,加一半宽度
            smallX += length * 0.5;
        } else {
// 其他加整个标题宽度
            smallX += length;
        }
    }
    
    if (smallX <
SCREEN_WIDTH * 0.5) {
// smallScrollView滑到最前面
        smallX = 0;
    } else
if (smallX + SCREEN_WIDTH *
0.5 > self.smallScrollView.contentSize.width)
{ // smallScrollView滑到最后面
        smallX = self.smallScrollView.contentSize.width
- SCREEN_WIDTH;
    } else {
        smallX = smallX - SCREEN_WIDTH *
0.5;
    }
    
    [self.smallScrollView
setContentOffset:CGPointMake(smallX,
0) animated:YES];
    
    [self.smallScrollView.subviews
enumerateObjectsUsingBlock:^(__kindof
UIView * _Nonnull obj,
NSUInteger idx, BOOL *
_Nonnull stop) {
        if (idx != index) {
            TabButton *tabButton =
self.smallScrollView.subviews[idx];
            tabButton.scale =
0;
        }
    }];
    
    // 添加控制器
    UIViewController *vc =
self.childViewControllers[index];
    if (vc.view.superview)
return;
    NSLog(@"来了%zd号控制器",index);
    vc.view.frame = scrollView.bounds;
    [self.bigScrollView
addSubview:vc.view];
}

@end
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  iOS