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

直接上代码,控制器.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



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值