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];
1
2
3
4
5
6
7
8
9
10
11

完整代码

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

二、分类标题进行切换tab

在切换tab时，使用JXCategoryTitleView

SDAppWCourseNavbarView.h

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

@interface SDAppWCourseNavbarView : SDBaseView

@property (nonatomic, strong) JXCategoryTitleView *categoryView;

+ (CGFloat)navbarHeight;

@end
1
2
3
4
5
6
7
8
9
10

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

三、为UIScrollView添加子控件

UIScrollView添加子控件，Controller添加SubController

SDAppWCourseZoneViewController.h

#import "SDBaseViewController.h"

@interface SDAppWCourseZoneViewController : SDBaseViewController

@end
1
2
3
4
5

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183

四、小结

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

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