hzpqt / hgpersonalcenter

主要实现头部视图的下拉放大以及分页控制，同样的场景也适用于淘宝/天猫店铺界面/简书主页/微博主页

HGPersonalCenter

Requirements

• iOS 8.0+
• Objective-C
• Xcode 9+

Installation

我通过自己另一个支持CocoaPods的库快速集成 - HGPersonalCenterExtend

platform :ios, '8.0'

target 'HGPersonalCenter' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!
  pod 'HGPersonalCenterExtend', '~> 0.1.3'
end

Blog

简书

Show

Usage

主要代码：例如你的CenterViewController是HGPersonalCenterViewController

在 HGPersonalCenterViewController 下进行如下操作：

#import "HGSegmentedPageViewController.h"
#import "HGCenterBaseTableView.h"

static CGFloat const HeaderImageViewHeight = 240;

@interface HGPersonalCenterViewController () <UITableViewDelegate, UITableViewDataSource, UIGestureRecognizerDelegate, HGSegmentedPageViewControllerDelegate, HGPageViewControllerDelegate>
@property (nonatomic, strong) HGCenterBaseTableView *tableView;
@property (nonatomic, strong) UIImageView *headerImageView;
@property (nonatomic, strong) HGSegmentedPageViewController *segmentedPageViewController;
@property (nonatomic) BOOL cannotScroll;

@end

- (void)viewDidLoad {
    [super viewDidLoad];
    if (@available(iOS 11.0, *)) {
        [[UIScrollView appearance] setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever];
    } else {
        self.automaticallyAdjustsScrollViewInsets = NO;
    }    
    self.navigationController.interactivePopGestureRecognizer.delegate = self;  
    
    [self.tableView addSubview:self.headerImageView];
    [self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view);
    }];
}

#pragma mark - UITableViewDataSource
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 1;
}

//将segmentedPageViewController添加在cell上，你也可以用（https://github.com/ArchLL/HGPersonalCenter）中的做法添加在footerView上
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    [self addChildViewController:self.segmentedPageViewController];
    [cell.contentView addSubview:self.segmentedPageViewController.view];
    [self.segmentedPageViewController didMoveToParentViewController:self];
    [self.segmentedPageViewController.view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(cell.contentView);
    }];
    return cell;
}

#pragma mark - UITableViewDelegate
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return SCREEN_HEIGHT - NAVIGATION_BAR_HEIGHT;
}

#pragma mark - UIScrollViewDelegate
- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView {
    [self.segmentedPageViewController.currentPageViewController makePageViewControllerScrollToTop];
    return YES;
}

/**
 * 处理联动, demo中有详细注释
 * 因为要实现下拉头部放大的问题，tableView设置了contentInset，试图刚加载的时候会调用一遍这个方法，所以要做一些特殊处理
 */
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    //处理滑动冲突
    CGFloat contentOffsetY = scrollView.contentOffset.y;
    CGFloat criticalPointOffsetY = [self.tableView rectForSection:0].origin.y - NAVIGATION_BAR_HEIGHT;
    if (contentOffsetY >= criticalPointOffsetY) {
        self.cannotScroll = YES;
        scrollView.contentOffset = CGPointMake(0, criticalPointOffsetY);
        [self.segmentedPageViewController.currentPageViewController makePageViewControllerScroll:YES];
    } else {
        if (self.cannotScroll) {
            scrollView.contentOffset = CGPointMake(0, criticalPointOffsetY);
        }
    }
    
    //处理下拉放大
    if (contentOffsetY <= -HeaderImageViewHeight) {
        if (self.isEnlarge) {
            CGRect frame = self.headerImageView.frame;
            frame.origin.y = contentOffsetY;
            frame.size.height = -contentOffsetY;
            frame.origin.x = (contentOffsetY * SCREEN_WIDTH / HeaderImageViewHeight + SCREEN_WIDTH) / 2;
            frame.size.width = -contentOffsetY * SCREEN_WIDTH / HeaderImageViewHeight;
            self.headerImageView.frame = frame;
        } else {
            scrollView.bounces = NO;
        }
    } else {
        scrollView.bounces = YES;
    }
}

#pragma mark - HGSegmentedPageViewControllerDelegate
- (void)segmentedPageViewControllerWillBeginDragging {
    self.tableView.scrollEnabled = NO;
}

- (void)segmentedPageViewControllerDidEndDragging {
    self.tableView.scrollEnabled = YES;
}

#pragma mark - HGPageViewControllerDelegate
- (void)pageViewControllerLeaveTop {
    self.cannotScroll = NO;
}

#pragma mark - Lazy
- (UITableView *)tableView {
    if (!_tableView) {
        _tableView = [[HGCenterBaseTableView alloc] initWithFrame:CGRectZero style:UITableViewStyleGrouped];
        _tableView.delegate = self;
        _tableView.dataSource = self;
        _tableView.contentInset = UIEdgeInsetsMake(HeaderImageViewHeight, 0, 0, 0);
        _tableView.showsVerticalScrollIndicator = NO;
        _tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    }
    return _tableView;
}

- (UIImageView *)headerImageView {
    if (!_headerImageView) {
        _headerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, -HeaderImageViewHeight, SCREEN_WIDTH, HeaderImageViewHeight)];
        _headerImageView.image = [UIImage imageNamed:@"center_bg.jpg"];
    }
    return _headerImageView;
}

/*设置segmentedPageViewController的categoryView以及pageViewControllers
 *这里可以对categoryView进行自定义，包括分布方式(左、中、右)、高度、背景颜色、字体颜色、字体大小、下划线高度和颜色等
 *这里用到的pageViewController需要继承自HGPageViewController
 */
- (HGSegmentedPageViewController *)segmentedPageViewController {
    if (!_segmentedPageViewController) {
        NSMutableArray *controllers = [NSMutableArray array];
        NSArray *titles = @[@"主页", @"动态", @"关注", @"粉丝"];
        for (int i = 0; i < titles.count; i++) {
            HGPageViewController *controller;
            if (i % 3 == 0) {
                controller = [[HGThirdViewController alloc] init];
            } else if (i % 2 == 0) {
                controller = [[HGSecondViewController alloc] init];
            } else {
                controller = [[HGFirstViewController alloc] init];
            }
            controller.delegate = self;
            [controllers addObject:controller];
        }
        _segmentedPageViewController = [[HGSegmentedPageViewController alloc] init];
        _segmentedPageViewController.pageViewControllers = controllers.copy;
        _segmentedPageViewController.categoryView.titles = titles;
        _segmentedPageViewController.categoryView.alignment = HGCategoryViewAlignmentLeft;
        _segmentedPageViewController.categoryView.originalIndex = self.selectedIndex;
        _segmentedPageViewController.categoryView.itemSpacing = 25;
        _segmentedPageViewController.categoryView.backgroundColor = [UIColor yellowColor];
        _segmentedPageViewController.categoryView.isEqualParts = YES;
        _segmentedPageViewController.delegate = self;
    }
    return _segmentedPageViewController;
}

⚠️ 如果你的pageViewController下的scrollView是UICollectionView类型，需要进行如下设置：

//解决categoryView在吸顶状态下，且collectionView的显示内容不满屏时，出现竖直方向滑动失效的问题
_collectionView.alwaysBounceVertical = YES;

Author

Arch, [email protected]

License

HGPersonalCenterExtend is available under the MIT license. See the LICENSE file for more info.