ios他人收集整理

ScrollView与TableView一起使用

2018-03-26  本文已影响41人  今晚丿打老虎

分析:

横着滚动需要ScrollView 竖着滚动需要TableView

      1>在精华控制器的View里面需要先添加一个scroller,且这个scroller的尺寸设置为屏幕的尺寸。但是scrollView的contentSize(占位视图)需要设置成 5个屏幕的宽度。然后再往contentSize上添加5个tableView。

      2>头部的5个标题栏,不会随着TableView向上滑而移动。所以时在scrollView上面添加一个UIView,然后在往UIView上面添加5个UIbutton按钮。

      3>当点击头部的标题栏按钮时,下面的ScrollView会向右滑动。所以需要创建5个TableView控制器分别对其进行管理,ScrollView在5个TableView上来回移动。

/**

*  添加scrollView

*/

- (void)setupScrollView

{

    // 不允许自动修改UIScrollView的内边距

    self.automaticallyAdjustsScrollViewInsets = NO;

    UIScrollView *scrollView = [[UIScrollView alloc] init];

    scrollView.backgroundColor = [UIColor blueColor];

    //scrollView的尺寸等于屏幕的尺寸

    scrollView.frame = self.view.bounds;

    //隐藏水平方向的滚动条

    scrollView.showsHorizontalScrollIndicator = NO;

    //隐藏垂直方向的进度条

    scrollView.showsVerticalScrollIndicator = NO;

    //设置分页功能

    scrollView.pagingEnabled = YES;

    [self.view addSubview:scrollView];

    // 添加子控制器的view

    NSUInteger count = self.childViewControllers.count;

    CGFloat scrollViewW = scrollView.xmg_width;

    CGFloat scrollViewH = scrollView.xmg_height;

// 这种方法当控制器加载时,就创建5个TableView,性能不好,需要当点击标题按钮时在进行对应页面的创建。

  //    for (NSUInteger i = 0; i < count; i++) {

//        // 取出i位置子控制器的view

//        UIView *childVcView = self.childViewControllers[i].view;

//        childVcView.frame = CGRectMake(i * scrollViewW, 0, scrollViewW, scrollViewH);

//        [scrollView addSubview:childVcView];

//    }

    scrollView.contentSize = CGSizeMake(count * scrollViewW, 0);

}

/**

*  初始化子控制器tableView的5个子控制器

*/

- (void)setupAllChildVcs

{

    [self addChildViewController:[[XMGAllViewController alloc] init]];

    [self addChildViewController:[[XMGVideoViewController alloc] init]];

    [self addChildViewController:[[XMGVoiceViewController alloc] init]];

    [self addChildViewController:[[XMGPictureViewController alloc] init]];

    [self addChildViewController:[[XMGWordViewController alloc] init]];

}

/**

*  添加标题栏

*/

/** 标题栏 */

@property (nonatomic, weak) UIView *titlesView;

//添加标题栏view

- (void)setupTitlesView

{

    UIView *titlesView = [[UIView alloc] init];

    titlesView.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:0.5];

    titlesView.frame = CGRectMake(0, 64, self.view.xmg_width, 35);

    [self.view addSubview:titlesView];

    self.titlesView = titlesView;

    // 标题栏按钮

    [self setupTitleButtons];

    // 标题下划线

    [self setupTitleUnderline];

}

/**

* 添加标题栏按钮

  *自定义UIbutton按钮。效果图是点击按钮时将按钮颜色设置成红色,当取点击另一个按钮时,需要将前一个按钮选中取消并设置为灰色,点击的按钮颜色设置

*/

- (instancetype)initWithFrame:(CGRect)frame

{

    //重写系统的方法

    if (self = [super initWithFrame:frame]) {

        self.titleLabel.font = [UIFont systemFontOfSize:16];

        //默认为灰色

        [self setTitleColor:[UIColor darkGrayColor] forState:UIControlStateNormal];

        //选中为红色

        [self setTitleColor:[UIColor redColor] forState:UIControlStateSelected];

    }

    return self;

}

// 只要重写了这个方法,按钮就无法进入highlighted状态

- (void)setHighlighted:(BOOL)highlighted

{

}

/*添加标题栏按钮*/

- (void)setupTitleButtons

{

    // 文字

    NSArray *titles = @[@"全部", @"视频", @"声音", @"图片", @"段子"];

    NSUInteger count = titles.count;

    // 标题按钮的尺寸

    CGFloat titleButtonW = self.titlesView.xmg_width / count;

    CGFloat titleButtonH = self.titlesView.xmg_height;

    // 创建5个标题按钮

    for (NSUInteger i = 0; i < count; i++) {

        XMGTitleButton *titleButton = [[XMGTitleButton alloc] init];

      //将每一个标题按钮绑定一个标识

        titleButton.tag = i;

        [titleButton addTarget:self action:@selector(titleButtonClick:) forControlEvents:UIControlEventTouchUpInside];

        [self.titlesView addSubview:titleButton];

        // frame

        titleButton.frame = CGRectMake(i * titleButtonW, 0, titleButtonW, titleButtonH);

        // 文字

        [titleButton setTitle:titles[i] forState:UIControlStateNormal];

    }

}

/**

*  添加标题下划线

*/

/** 标题下划线 */

@property (nonatomic, weak) UIView *titleUnderline;

//添加标题下划线

- (void)setupTitleUnderline

{

    // 标题按钮

    XMGTitleButton *firstTitleButton = self.titlesView.subviews.firstObject;

    // 下划线

    UIView *titleUnderline = [[UIView alloc] init];

    titleUnderline.xmg_height = 2;

    titleUnderline.xmg_y = self.titlesView.xmg_height - titleUnderline.xmg_height;

    titleUnderline.backgroundColor = [firstTitleButton titleColorForState:UIControlStateSelected];

    [self.titlesView addSubview:titleUnderline];

    self.titleUnderline = titleUnderline;

    // 切换按钮状态

    firstTitleButton.selected = YES;

    self.previousClickedTitleButton = firstTitleButton;

// 让label根据文字内容计算尺寸

    [firstTitleButton.titleLabel sizeToFit]; 

    self.titleUnderline.xmg_width = firstTitleButton.titleLabel.xmg_width + 10;

    self.titleUnderline.xmg_centerX = firstTitleButton.xmg_centerX;

}

#pragma mark - 监听

/**

*  点击标题按钮

*/

/** 上一次点击的标题按钮 */

@property (nonatomic, weak) XMGTitleButton *previousClickedTitleButton;

//点击标题按钮

- (void)titleButtonClick:(XMGTitleButton *)titleButton

{

    // 切换按钮状态(三部曲)

    self.previousClickedTitleButton.selected = NO;

    titleButton.selected = YES;

    self.previousClickedTitleButton = titleButton;

    [UIView animateWithDuration:0.25 animations:^{

        // 处理下划线

        self.titleUnderline.xmg_width = titleButton.titleLabel.xmg_width + 10;

        self.titleUnderline.xmg_centerX = titleButton.xmg_centerX;

    //当点击标题栏时,scrollview会跟着一起滑动

  //scrollview会跟着创建UIbutton时绑定的标识,滑动到对应的界面

    CGFloat offsetX = self.scrollView.xmg_width * titleButton.tag;

  //scrollview在X轴上移动

  self.scrollView.contentOffset = CGPointMake(offsetX, self.scrollView.contentOffset.y);

  //(反过来)将scrollview往右滑动时,标题栏按钮也会跟着滑动

    }completion:^(BOOL finished) {

        //取出按钮索引对应的控制器

    UIViewController *childVc = self.childViewControllers[titleButton.tag].view;

  // 设置子控制器view的frame

childVcView.frame = CGRectMake(index * scrollViewW, 0, self.scrollView.xmg_width, self.scrollView.xmg_height);

  // 添加子控制器的view到scrollView中

    [self.scrollView addSubview:childVcView];

    }];

}

#pragma mark -(反过来)将scrollview往右滑动时,标题栏按钮也会跟着滑动

/*

*  当用户松开scrollView并且滑动结束时调用这个代理方法(scrollView停止滚动的时候)

*/

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{

    // 求出标题按钮的索引

    NSUInteger index = scrollView.contentOffset.x / scrollView.xmg_width;

    // 当滑动结束后,就再次调用点击标题索引标题按钮

    XMGTitleButton *titleButton = self.titlesView.subviews[index];

    [self titleButtonClick:titleButton];

}

上一篇 下一篇

猜你喜欢

热点阅读