iOS开发-UIScrollView嵌套tableView实现顶部tab横向切换

iOS开发-UIScrollView嵌套tableView实现顶部tab横向切换

通过ScollView嵌套两个TableView左右切换功能

一、UIScollView

UIScrollView可滚动控件，这里初始化需要设置_backScollView.pagingEnabled = YES;

代码如下

_backScollView = [[UIScrollView alloc] initWithFrame:CGRectZero];
_backScollView.backgroundColor = [UIColor colorWithHexString:@"ffffff"];
_backScollView.showsHorizontalScrollIndicator = NO;
_backScollView.showsVerticalScrollIndicator = NO;
_backScollView.userInteractionEnabled = YES;
_backScollView.pagingEnabled = YES;
_backScollView.exclusiveTouch = YES;
_backScollView.scrollEnabled = YES;
_backScollView.tag = kWBackScrollViewTAG;
_backScollView.bounces = NO;
[self addSubview:_backScollView];

完整代码

SDAppWCourseZoneView.h

#import <UIKit/UIKit.h>
#import "UIColor+Addition.h"
#import "SDBaseControllerView.h"
#import "SDAppWCourseNavbarView.h"

#define kWBackScrollViewTAG 1121

@interface SDAppWCourseZoneView : SDBaseControllerView

@property (nonatomic, strong) UIScrollView *backScollView;

@property (nonatomic, strong) SDAppWCourseNavbarView *navbarView;

@property (nonatomic, weak) id delegate;

@end

SDAppWCourseZoneView.m

#import "SDAppWCourseZoneView.h"

static CGFloat kBtnSize = 50.0;
static CGFloat kVPadding = 25.0;
static CGFloat kHPadding = 20.0;

@interface SDAppWCourseZoneView ()<JXCategoryViewDelegate>

@end

@implementation SDAppWCourseZoneView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        self.backgroundColor = [UIColor colorWithHexString:@"ffffff"];
        _backScollView = [[UIScrollView alloc] initWithFrame:CGRectZero];
        _backScollView.backgroundColor = [UIColor colorWithHexString:@"ffffff"];
        _backScollView.showsHorizontalScrollIndicator = NO;
        _backScollView.showsVerticalScrollIndicator = NO;
        _backScollView.userInteractionEnabled = YES;
        _backScollView.pagingEnabled = YES;
        _backScollView.exclusiveTouch = YES;
        _backScollView.scrollEnabled = YES;
        _backScollView.tag = kWBackScrollViewTAG;
        _backScollView.bounces = NO;
        [self addSubview:_backScollView];
        
        _navbarView = [[SDAppWCourseNavbarView alloc] initWithFrame:CGRectZero];
        _navbarView.backgroundColor = [UIColor whiteColor];
        [self addSubview:_navbarView];
        // 联动（categoryView和pagingView）
        _navbarView.categoryView.contentScrollView = _backScollView;
        // 返回上一页侧滑手势（仅在index==0时有效）
        
        [self bringSubviewToFront:self.navigationBar];
        self.navigationHiden = YES;
        
        [self layoutAllContentViews];
    }
    return self;
}

- (void)layoutAllContentViews {
    CGFloat navbarHeight = [SDAppWCourseNavbarView navbarHeight];
    self.navbarView.frame = CGRectMake(0.0, 0.0, CGRectGetWidth(self.bounds), navbarHeight);
    self.backScollView.frame = CGRectMake(0.0, CGRectGetMaxY(self.navbarView.frame), CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds) - CGRectGetMaxY(self.navbarView.frame) - 49.0 - [SDBaseView baseSafeEdgeInsets].bottom);
}

- (void)setDelegate:(id)delegate {
    _delegate = delegate;
    _backScollView.delegate = delegate;
    self.navbarView.categoryView.delegate = self;
}

- (void)dealloc {
    
}

@end

二、分类标题进行切换tab

在切换tab时，使用JXCategoryTitleView

SDAppWCourseNavbarView.h

#import "SDBaseView.h"
#import "JXCategoryView.h"

@interface SDAppWCourseNavbarView : SDBaseView

@property (nonatomic, strong) JXCategoryTitleView *categoryView;

+ (CGFloat)navbarHeight;

@end

SDAppWCourseNavbarView.m

#import "SDAppWCourseNavbarView.h"

static CGFloat kNavbarHeight = 60.0;

static CGFloat kCategoryHeight = 44.0;

@interface SDAppWCourseNavbarView ()

@property (nonatomic, strong) UIImageView *bgImageView;

@end

@implementation SDAppWCourseNavbarView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self addSubview:self.bgImageView];
        [self.bgImageView addSubview:self.categoryView];
    }
    return self;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    self.bgImageView.frame = CGRectMake(0.0, 0.0, CGRectGetWidth(self.bounds), CGRectGetHeight(self.bounds));
    self.categoryView.frame = CGRectMake(0.0, kStatusBarHeight + (kNavbarHeight - kCategoryHeight)/2.0, kScreenWidth*3.0/5.0, kCategoryHeight);
}

+ (CGFloat)navbarHeight {
    return kStatusBarHeight + kNavbarHeight;
}

#pragma mark - LAZY
- (UIImageView *)bgImageView {
    if (!_bgImageView) {
        _bgImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
        _bgImageView.backgroundColor = [UIColor whiteColor];
        _bgImageView.userInteractionEnabled = YES;
    }
    return _bgImageView;
}

/**
 菜单项视图View
 */
-(JXCategoryTitleView *)categoryView{
    if(!_categoryView){
        //
        _categoryView = [[JXCategoryTitleView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth*3.0/5.0, kCategoryHeight)];
        // 设置菜单项标题数组
        _categoryView.titles = [NSMutableArray arrayWithArray:@[@"我的课程", @"挑选课程"]];;
        // 背景色
        _categoryView.backgroundColor = [UIColor whiteColor];
        // 标题色、标题选中色、标题字体、标题选中字体
        _categoryView.titleColor = [UIColor colorWithHexString:@"666666"];
        _categoryView.titleSelectedColor = [UIColor colorWithHexString:@"f78342"];
        _categoryView.titleFont = SDMediumFontSize(15);
        // 标题色是否渐变过渡
        _categoryView.titleColorGradientEnabled = YES;
        _categoryView.titleLabelZoomEnabled = YES;
        _categoryView.titleLabelZoomScale = 1.2;
        _categoryView.titleLabelAnchorPointStyle = JXCategoryTitleLabelAnchorPointStyleBottom;
        
        // 下划线
        JXCategoryIndicatorImageView *lineView = [[JXCategoryIndicatorImageView alloc] init];
        // 下划线颜色
        lineView.indicatorImageView.image = [UIImage imageNamed:@"img_line_bttom"];
        // 下划线宽度
        lineView.indicatorImageViewRollEnabled = NO;
        lineView.indicatorImageViewSize = CGSizeMake(40, 10);
        _categoryView.indicators = @[lineView];
    }
    
    return _categoryView;
}

@end

三、为UIScrollView添加子控件

UIScrollView添加子控件，Controller添加SubController

SDAppWCourseZoneViewController.h

#import "SDBaseViewController.h"

@interface SDAppWCourseZoneViewController : SDBaseViewController

@end

SDAppWCourseZoneViewController.m

#import "SDAppWCourseZoneViewController.h"
#import "SDAppWCourseZoneView.h"
#import "SDAppStudyViewController.h"
#import "SDAppMyCoursePageViewController.h"

@interface SDAppWCourseZoneViewController ()<UIScrollViewDelegate>

@property (nonatomic, strong) SDAppWCourseZoneView *wcourseView;

@property (nonatomic, strong) SDBaseViewController *currentPageController;

@end

@implementation SDAppWCourseZoneViewController

- (instancetype)init {
    self = [super init];
    if (self) {
        self.hidesBottomBarWhenPushed = NO;
    }
    return self;
}

#pragma mark - Configure NavigationBar
- (void)configureNavigationBar {
    SDNavButtonItem *leftButtonItem = [[SDNavButtonItem alloc] initWithTitle:nil image:[UIImage imageNamed:@"ic_nav_back_gray"] target:self action:@selector(leftNavBarButtonAction)];
        
    self.wcourseView.navigationBar.navTitleView = [[SDNavigationTitleView alloc] initWidthTitle:@"消息&通知" subView:nil];
    self.wcourseView.navigationBar.leftNavItem = leftButtonItem;
    self.wcourseView.navigationBar.hidenNavShadow = YES;
}

- (void)leftNavBarButtonAction {
    if (self.routerPresent) {
        [self dismissViewControllerAnimated:YES completion:^{
            // completion
        }];
    } else {
        [self.navigationController popViewControllerAnimated:YES];
    }
}


#pragma mark - loadView
- (void)loadView {
    [super loadView];
    _wcourseView = [[SDAppWCourseZoneView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    _wcourseView.delegate = self;
    self.view = _wcourseView;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self configureNavigationBar];
    
    [self addColumnController];
    self.currentPageController = self.childViewControllers[0];
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
}

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];
}

- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];
}


#pragma mark - 添加子控制器
- (void)addColumnController {
    CGFloat contentWidth = CGRectGetWidth([UIScreen mainScreen].bounds);
    CGFloat contentHeight = CGRectGetHeight([UIScreen mainScreen].bounds) - CGRectGetMaxY(self.wcourseView.navbarView.categoryView.frame) - 49.0 - [SDBaseView baseSafeEdgeInsets].bottom - 20.0;

    SDAppMyCoursePageViewController *pageVC = [[SDAppMyCoursePageViewController alloc] init];
    [self addChildViewController:pageVC];
    pageVC.view.frame = CGRectMake(0*contentWidth, 0.0, contentWidth, contentHeight);
    [self.wcourseView.backScollView addSubview:pageVC.view];

    SDAppStudyViewController *shopPageVC = [[SDAppStudyViewController alloc] init];
    [self addChildViewController:shopPageVC];
    shopPageVC.view.frame = CGRectMake(1*contentWidth, 0.0, contentWidth, contentHeight);
    [self.wcourseView.backScollView addSubview:shopPageVC.view];
    
    self.wcourseView.backScollView.contentSize = CGSizeMake(contentWidth*self.wcourseView.navbarView.categoryView.titles.count, 0.0);
}

#pragma mark - UIScrollViewDelegate
- (void)segmentButtonDidAction:(NSInteger)segmentIndex {
    [self scrollTableViewPage:segmentIndex];
    
    CGRect contentRect = [UIScreen mainScreen].bounds;
    CGFloat contentWidth = CGRectGetWidth(contentRect);
    CGPoint point = CGPointMake(contentWidth*segmentIndex, 0);
    [self.wcourseView.backScollView setContentOffset:point animated:NO];
}

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (scrollView.tag == kWBackScrollViewTAG) {
        
    }
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    if (scrollView.tag == kWBackScrollViewTAG) {
        
    }
}

#pragma mark - scrollTableViewPage
- (void)scrollTableViewPage:(NSInteger)page {
    if ([self.currentPageController isKindOfClass:[SDAppMyCoursePageViewController class]]) {
        SDAppMyCoursePageViewController *myCourseVC = (SDAppMyCoursePageViewController *)self.currentPageController;
        [myCourseVC scrollToTop:YES];

    } else if ([self.currentPageController isKindOfClass:[SDAppStudyViewController class]]) {
        SDAppStudyViewController *remCourseVC = (SDAppStudyViewController *)self.currentPageController;
        [remCourseVC scrollToTop:YES];
    }

    self.currentPageController = self.childViewControllers[page];

    if ([self.currentPageController isKindOfClass:[SDAppMyCoursePageViewController class]]) {
        SDAppMyCoursePageViewController *myCourseVC = (SDAppMyCoursePageViewController *)self.currentPageController;
        [myCourseVC scrollToTop:NO];
        
    } else if ([self.currentPageController isKindOfClass:[SDAppStudyViewController class]]) {
        SDAppStudyViewController *remCourseVC = (SDAppStudyViewController *)self.currentPageController;
        [remCourseVC scrollToTop:NO];
    }
    
    [self.currentPageController reloadData];
}

- (void)switchContentPage:(NSInteger)page {
    [self scrollTableViewPage:page];
    
    CGRect contentRect = [UIScreen mainScreen].bounds;
    CGFloat contentWidth = CGRectGetWidth(contentRect);
    CGPoint point = CGPointMake(contentWidth*page, 0);
    [self.wcourseView.backScollView setContentOffset:point animated:NO];
    
    if ([self.currentPageController isKindOfClass:[SDAppStudyViewController class]]) {
        SDAppStudyViewController *shopVC = (SDAppStudyViewController *)self.currentPageController;
        [shopVC reloadData];
    }
}

#pragma mark - JXCategoryViewDelegate
/**
 选中菜单项后调用

 @param categoryView 菜单项View
 @param index 下表
 */
- (void)categoryView:(JXCategoryBaseView *)categoryView didSelectedItemAtIndex:(NSInteger)index {
    [self switchContentPage:index];
}

/**
 滑动并切换内容视图后调用

 @param categoryView 菜单项View
 @param index 下表
 */
- (void)categoryView:(JXCategoryBaseView *)categoryView didScrollSelectedItemAtIndex:(NSInteger)index{
    [self switchContentPage:index];
}


#pragma mark - UIScrollViewDelegate

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

四、小结

iOS开发-UIScrollView嵌套tableView实现顶部tab横向切换.
通过ScollView嵌套两个TableView左右切换功能。

学习记录，每天不停进步。