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左右切换功能。
学习记录，每天不停进步。
