一步一步封装分页组件

最近在有个需求要求 类似网易新闻或者今日头条上的UI效果

IMG_0753.png

Paste_Image.png

Paste_Image.png

JFSegmentDefunes.h

///标题
@property (nonatomic,copy) NSString  *title;
///字体
@property (nonatomic,strong) UIFont  *font;
///间距
@property (nonatomic,assign) CGFloat  space;

///根据title计算frame的大小
- (instancetype)initWithFrame:(CGRect)frame title:(NSString *)title;
///计算宽度
+ (CGFloat)calcuWidth:(NSString *)title;

JFSegmentDefunes.m

- (instancetype)initWithFrame:(CGRect)frame title:(NSString *)title {
    self = [super initWithFrame:frame];
    if (self) {
        self.space = 8;
        self.title = title;
    }
    return self;
}

- (void)layoutSubviews {
    CGFloat buttonWidth = [self calcuWidth];
    self.frame = CGRectMake(self.x, self.y, buttonWidth + self.space, self.height);
    self.titleLabel.frame = CGRectMake(self.space / 2, 0, buttonWidth, self.height);
}

- (CGFloat)calcuWidth {
    if (self.title == nil) {
        return _MinWidth;
    }
    UIFont *font = self.font == nil ? _defaultFont : self.font;
    CGRect frame = [self.title boundingRectWithSize:CGSizeMake(_MaxWidth, self.height) options:(NSStringDrawingUsesLineFragmentOrigin) attributes:@{NSFontAttributeName: font} context:nil];
    CGFloat width = frame.size.width;
    return width > _MinWidth ? width : _MinWidth;
}

+ (CGFloat)calcuWidth:(NSString *)title {
    JFSegmentViewTitleItem *item = [[JFSegmentViewTitleItem alloc] initWithFrame:(CGRectZero) title:title];
    return [item calcuWidth] + item.space;
}
- (UILabel *)titleLabel {
    if (!_titleLabel) {
        _titleLabel = [[UILabel alloc] initWithFrame:self.bounds];
        _titleLabel.textColor = _defaultTitleColor_Normal;
        _titleLabel.font = _defaultFont;
        _titleLabel.textAlignment = NSTextAlignmentCenter;
        _titleLabel.text = self.title;
        [self addSubview:_titleLabel];
    }
    return _titleLabel;
}

Paste_Image.png

Paste_Image.png

Paste_Image.png

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    JFSegmentViewUnit * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"JFSegmentViewUnit" forIndexPath:indexPath];
    UIViewController *vc = _viewControllers[indexPath.section];
    cell.view = vc.view;
    return cell;
}

    [self.collectionView addObserver:self forKeyPath:@"contentOffset" options:(NSKeyValueObservingOptionNew) context:nil];

加一个KVO来监听collectionView的属性的变化

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
    
    CGPoint offset = self.collectionView.contentOffset;
    CGFloat pageFloat = offset.x / self.collectionView.bounds.size.width + 0.5;
    if (pageFloat < 0) {
        pageFloat = 0;
    }
    if (pageFloat > _viewControllers.count) {
        pageFloat = _viewControllers.count;
    }
    NSInteger page = (NSInteger)pageFloat;
    self.titleView.page = page;
}

JF.gif

大致的骨架基本上完后了 接下来优化下UI

jf2.gif

那么怎么用它呢？如果用的不爽那搞这么多有个屁用

 SecondViewController *secondVC = [[SecondViewController alloc]init];
    secondVC.title = @"NBA";
    ThirdViewController *thirdVC = [[ThirdViewController alloc]init];
    thirdVC.title = @"CBA";
    JFSegmentView *segmentView = [[JFSegmentView alloc]initWithFrame:CGRectMake(0, 64, self.view.bounds.size.width, self.view.bounds.size.height) titleHeight:44 viewControllers:@[secondVC,thirdVC]];
    [self.view addSubview:segmentView];

有几个分页那么就提供几个控制器，设置titleView的高度，和当前试图的宽高
就是这么简单
https://github.com/tubie/JFSegmentView