iOS项目模仿之喜马拉雅（三）—— 分段选择器实现

 封装控件在iOS开发中是常遇到的事，如果项目比较赶的话，我们可以用别人写好的开源项目，但是对于技术提升来说，最好还是自己封装，这是一个app的模仿，我们的目的就是要提高技术水平，所以尝试封装一下。记录自己的思路，有时间对比一下别人的思路，可以收获更多，当然自己思考在前，免得受到别人的影响。下面就这个项目而言，我们封装一下分段选择栏。

基本看一下app就会发现分段选择栏在多处被用到了。分析一下它们的特点，找出共性，这样方便设计出可复用的组件。我们来列一下它们的共同点：

1）和TabBar一样，每个小按钮都是可选择的，并且有选择效果。

2）布局上是等分布局。

3）选择时下面的线有滑动动画。

4）除了点击子项目外，滑动下面的View也可以切换选择。

5）点击后除了自身的点击效果，还可以添加处理事件。

然后我们看一下它们的不同点，这样方便我们设计接口时确定参数。不同点如下：

1）标题和标题的个数不同。

2）下滑线的长度不同。

3）字体大小（提高扩展性能，我们让颜色也是可选择的）

4）再多观察一下，可能不全部是等分布局。子项目太多的时候，标题长度是不一样，而且可能会超出屏幕。

到这里我们可以给出几个初步设计方案了。

1）直接封装一个UIView的子类，在UIView上添加子项目，能够处理点击时间，子项目选择UIButton。

2）考虑到超出屏幕的时候需要滑动，所以选择UIScrollView可能更好。

3）但是再考虑一下复用的问题，我们可不可以尝试一下UICollectionView。

当然上面的思路也只是一个初步的设计。

经过仔细考虑，设计类FDSegment，设计过程：

1）对基本UI元素的设计，我们选择继承UIScrollView，这样可以实现滑动效果，而且布局上并不复杂，选择用UICollectionView有点浪费。

2）布局不用自动布局这种方式，因为我们希望封装的空间能够直接提取出来，所以要尽量不去依赖其他开源项目（自动布局的话Masonry比较好用），而且自动布局效率比较低。对于本项目中的分段选择栏的实现，布局上照考虑的是Item的宽度问题。由于不是所有情况都是等分的，所有我们需要设计一个设置Item宽度的接口，这种情况和UITableView设置cell的高度的情况极为类似，所以我们参考UITableView的设计，设计一个dataSource的代理。同样我们可以将titles做为数据源，放在代理中。

3）

其代码如下：

---

//
//  FDSegment.h
//  Himalayan
//
//  Created by fdd_zhangou on 16/3/7.
//  Copyright © 2016年 fdd_zhangou. All rights reserved.
//

#import <UIKit/UIKit.h>

@class FDSegment;
@protocol  FDSegmentDataSource<NSObject>

- (NSArray *)titlesForSegment:(FDSegment *)segment;
- (CGFloat)segment:(FDSegment *)segment widthForItemAtIndex:(NSInteger)index;
- (CGFloat)segment:(FDSegment *)segment widthForIndicatorAtIndex:(NSInteger)index;

@end

@protocol  FDSegmentDelegate<NSObject>

- (void)segment:(FDSegment *)segment didSelectedItemAtIndex:(NSUInteger)index;

@end

@protocol FDSegmentDataSource;
@protocol FDSegmentDelegate;

@interface FDSegment : UIScrollView

@property (nonatomic) NSUInteger seletedIndex;
@property (nonatomic) CGFloat heightForIndicator;

@property (nonatomic, weak)   id<FDSegmentDataSource> dataSource;
@property (nonatomic, weak)   id<FDSegmentDelegate> delegate;

@property (nonatomic, strong) UIFont *font;
@property (nonatomic, strong) UIColor *textColor;
@property (nonatomic, strong) UIColor *selectedColor;

@property (nonatomic, strong) UITableView *tableView;

- (void)reloadData;

@end

//
//  FDSegment.m
//  Himalayan
//
//  Created by fdd_zhangou on 16/3/7.
//  Copyright © 2016年 fdd_zhangou. All rights reserved.
//

#import "FDSegment.h"
#import "NSString+Extension.h"

@interface FDSegment ()

@property (nonatomic, strong) NSMutableArray *titles;
@property (nonatomic, strong) NSMutableArray *items;

@property (nonatomic, strong) UIView *indicator;

@property (nonatomic) CGFloat height;

@end

@implementation FDSegment

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.contentSize = frame.size;
        self.showsHorizontalScrollIndicator = NO;
        self.showsVerticalScrollIndicator = NO;
    }
    return self;
}

- (void)layoutSubviews
{
    if (self.titles){
        CGFloat x = 0;
        for (int i = 0; i < self.titles.count; i++)
        {
            UIButton *item = [self itemAtIndex:i];
            if (!item.superview )
            {
                [self addSubview:item];
            }
            item.frame = CGRectMake(x, 0, [self widthForItemAtIndex:i], self.height - self.heightForIndicator);
            x += item.frame.size.width;
        }
        self.contentSize = CGSizeMake(x, self.frame.size.height);
       
        [self addSubview:self.indicator];
        UIView *selectedItem = [self itemAtIndex:self.seletedIndex];
        CGFloat centerX = selectedItem.center.x;
        if (!self.indicator.superview)
        {
            [self addSubview:self.indicator];
        }
        self.indicator.frame = CGRectMake(centerX - [self widthForIndicatorAtIndex:self.seletedIndex]/2 , self.height - self.heightForIndicator, [self widthForIndicatorAtIndex:self.seletedIndex] ,self.heightForIndicator);
    }
}

- (CGFloat)widthForItemAtIndex:(NSUInteger)index
{
    if (self.dataSource && [self.dataSource respondsToSelector:@selector(segment:widthForItemAtIndex:)])
    {
        return [self.dataSource segment:self widthForItemAtIndex:index];
    }
   
    return self.frame.size.width/self.titles.count;
}

- (CGFloat)widthForIndicatorAtIndex:(NSUInteger)index
{
    if (self.dataSource && [self.dataSource respondsToSelector:@selector(segment:widthForIndicatorAtIndex:)])
    {
        return [self.dataSource segment:self widthForIndicatorAtIndex:index];
    }
    UIButton *item = [self.items objectAtIndex:index];
    NSString *title = [self.titles objectAtIndex:index];
    UIFont *font = [item.titleLabel font];
    return [self string:title sizeWithFont:font maxSize:CGSizeMake(MAXFLOAT, MAXFLOAT)].width + 2;
}

- (CGFloat)heightForIndicator
{
    if (_heightForIndicator > 0) {
        return _heightForIndicator;
    }
    return 2;
}

- (void)setSeletedIndex:(NSUInteger)seletedIndex
{
    _seletedIndex = seletedIndex;

    for (int i = 0; i < self.titles.count; i++) {
       
        UIButton *item = [self itemAtIndex:i];
        if (_seletedIndex == item.tag)
        {
            item.selected = YES;
        }
        else
        {
            item.selected = NO;
        }
    }
   
    [UIView animateWithDuration:0.1 animations:^{
       
        UIView *selectedItem = [self itemAtIndex:_seletedIndex];
        CGFloat centerX = selectedItem.center.x;
        if (!self.indicator.superview)
        {
            [self addSubview:self.indicator];
        }
        self.indicator.frame = CGRectMake(centerX - [self widthForIndicatorAtIndex:_seletedIndex]/2 , self.height - self.heightForIndicator, [self widthForIndicatorAtIndex:_seletedIndex] ,self.heightForIndicator);
       
    }];
   
    if (self.delegate && [self.delegate respondsToSelector:@selector(segment:didSelectedItemAtIndex:)])
    {
        [self.delegate segment:self didSelectedItemAtIndex:seletedIndex];
    }
}



#pragma -mark

- (NSMutableArray *)items
{
    if (!_items) {
        _items = [[NSMutableArray alloc] init];
    }
    return _items;
}

- (NSMutableArray *)titles
{
    if (!_titles) {
        if (self.dataSource && [self.dataSource respondsToSelector:@selector(titlesForSegment:)])
        {
            _titles = [[self.dataSource titlesForSegment:self] mutableCopy];
        }
        else
        {
            NSLog(@"must set titles for segment");
        }
    }
    return _titles;
}

- (UIView *)indicator
{
    if (!_indicator) {
        _indicator = [[UIView alloc] init];
        _indicator.backgroundColor = [UIColor redColor];//默认颜色
    }
    return _indicator;
}

- (UIButton *)itemAtIndex:(NSUInteger)index
{
    if (index >= self.items.count) {
        UIButton *item = [[UIButton alloc] init];
        [item setTitle:[self.titles objectAtIndex:index] forState:UIControlStateNormal];
        [item setTitle:[self.titles objectAtIndex:index] forState:UIControlStateSelected];
        [item setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
        [item setTitleColor:self.selectedColor forState:UIControlStateSelected];
        [item addTarget:self action:@selector(selectedItem:) forControlEvents:UIControlEventTouchUpInside];
        item.tag = index;
        [self.items addObject:item];
    }
    return  [self.items objectAtIndex:index];

}

- (void)selectedItem:(UIButton *)item
{
    self.seletedIndex = item.tag;
}
- (void)reloadData
{
    self.titles = nil;
}

- (UIColor *)selectedColor
{
    if (!_selectedColor) {
        _selectedColor = [UIColor redColor];
    }
    return _selectedColor;
}

- (CGFloat)height
{
    return self.frame.size.height;
}

-(CGSize)string:(NSString *)string sizeWithFont:(UIFont *)font maxSize:(CGSize)maxSize
{
    NSDictionary *attrs = @{NSFontAttributeName : font};
    return [string boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
}

@end

---

效果如下：

 

上面两种情况，分别对应开始我们看到的几个页面中的分段选择栏的情况。是基本满足目前的要求的，关于超出屏幕的内容，需要滑动效果的，也基本实现了，但是可能有些小瑕疵，我们后面具体遇到了再解决。