美文网首页
JXCategoryView 上滑页面,悬浮表头,类似淘宝首页

JXCategoryView 上滑页面,悬浮表头,类似淘宝首页

作者: ly_chee_ | 来源:发表于2020-06-15 11:28 被阅读0次


    pod引入

    pod'JXCategoryView'                #  首页样式 列表分类
    pod'JXPagingView/Pager', '~> 1.1.19'  #  首页样式 列表轮播

    实现

    controller.m  实例化 列表、表头

    引入代理

    JXPagerViewDelegate,JXCategoryViewDelegate ,JXPagerMainTableViewGestureDelegate

    @property (nonatomic, strong) JXPagerView *pagingView;

    @property (nonatomic, strong) JXCategoryTitleView *categoryView;

       self.categoryView = [[JXCategoryTitleView alloc] initWithFrame:CGRectMake(20, 10, 320, 60)];

        self.categoryView.layer.cornerRadius = 14;

        self.categoryView.titles = @[@"衣服", @"包包", @"化妆品"];

        self.categoryView.backgroundColor = [UIColor whiteColor];

        self.categoryView.delegate = self;

        self.categoryView.titleSelectedColor = [UIColor Color];//选中颜色

        self.categoryView.titleColor = [UIColor blackColor];//未选中颜色

        self.categoryView.titleFont = [UIFont boldSystemFontOfSize:22];//选中字体大小

        self.categoryView.titleSelectedFont = [UIFont boldSystemFontOfSize:16];//未选中字体大小

        self.categoryView.titleColorGradientEnabled = YES;

        self.categoryView.titleLabelZoomEnabled = YES;

        self.categoryView.titleLabelZoomEnabled = YES;

    //    titleview下面的线

        JXCategoryIndicatorLineView *lineView = [[JXCategoryIndicatorLineView alloc] init];

        lineView.indicatorColor = kNColorPink;

        lineView.indicatorWidth=30;

        self.categoryView.indicators = @[lineView];

        _pagingView = [[JXPagerView alloc] initWithDelegate:self];

        _pagingView.mainTableView.gestureDelegate = self;

        [self.view addSubview:self.pagingView];

        //FIXME:如果和JXPagingView联动

        //'JXPagingView/Pager', '~> 1.1.19'  高版本没有此属性

        self.categoryView.contentScrollView = self.pagingView.listContainerView.collectionView;

        self.navigationController.interactivePopGestureRecognizer.enabled = (self.categoryView.selectedIndex == 0);

        [self.view addSubview:self.categoryView];

    代理

    #pragma mark - JXPagingViewDelegate

    - (UIView *)tableHeaderViewInPagerView:(JXPagerView *)pagerView {

        HomePageHeaderView*headerView = [[HomePageHeaderView alloc] initWithFrame: CGRectMake(0, 10, 320,200)];

        return headerView;     //悬浮表头的上面部分在这里实例化

    }

    - (NSUInteger)tableHeaderViewHeightInPagerView:(JXPagerView *)pagerView {

        return 200;     //悬浮表头的上面部分  高度

    }

    - (NSUInteger)heightForPinSectionHeaderInPagerView:(JXPagerView *)pagerView {

        return 60;       //悬浮表头  高度

    }

    - (UIView *)viewForPinSectionHeaderInPagerView:(JXPagerView *)pagerView {

        return  self.categoryView;     //悬浮表头 

    }

    - (NSInteger)numberOfListsInPagerView:(JXPagerView *)pagerView {

        return 3;        //列表数量   =   悬浮表头title数量

    }

     //实例列表 

    - (id<JXPagerViewListViewDelegate>)pagerView:(JXPagerView *)pagerView initListAtIndex:(NSInteger)index {

        RedListView *list = [[RedListView alloc] init];

        return  list;    

    }

    #pragma mark - JXCategoryViewDelegate

    - (void)categoryView:(JXCategoryBaseView *)categoryView didSelectedItemAtIndex:(NSInteger)index {

        self.navigationController.interactivePopGestureRecognizer.enabled = (index == 0);

    }

    #pragma mark - JXPagerMainTableViewGestureDelegate

    //解决左右滑动冲突

    - (BOOL)mainTableViewGestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {

        //禁止scrollView左右滑动的时候,上下和左右都可以滚动 

        // self.headerView  即 悬浮表头的上面部分在这里实例化
        //HomePageHeaderView*headerView = [[HomePageHeaderView alloc] initWithFrame: CGRectMake(0, 10, 320,200)]; 

        if (otherGestureRecognizer == self.headerView.scrollView.panGestureRecognizer) {

            returnNO;

        }

        return [gestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]] && [otherGestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]];

    }

    相关文章

      网友评论

          本文标题:JXCategoryView 上滑页面,悬浮表头,类似淘宝首页

          本文链接:https://www.haomeiwen.com/subject/qxjcxktx.html