設計初衷：本工具主要來自俺個人練手小專案，仿boss直聘。文末有原始碼地址

先來看設計的效果：

分析：

1.控制元件選擇分析：頂部為3個標籤並且每個標籤都有點選事件，控制元件的選擇上有很多種。一般都選擇UiButton ，因為這個控制元件可以直接為其繫結點選事件，換成其他的控制元件，就需要為其新增手勢操作了。

2.控制元件數量的分析：對於這個一個控制元件，首先應滿足擴充套件性，比如說，在當前這個例子中，是3個標籤，萬一哪天產品又有了另一個主意，她覺得需要再加一個或是減一個才能體現她的意圖，那麼這裡就需要處理這種情況，不能因為小需求的變動，而又要重新設計一個控制元件，那樣工作效率太低了，也違背了程式設計原則。

在本例中，為了解決這個問題，使用了一個可孌列表儲存標題標籤，根據列表的個數建立標籤

3.底部滑動條的建立：可以使用圖片，也可以使用UIView或其子類，設定其背景色即可；

對於平滑滑動可以使用基本動畫中的位移動畫：程式碼如下：

//private method---線條移動啟動動畫
-(void) startLineMoveAnimFromValue:(id) fromValue toValue:(id) toValue  duration:(CFTimeInterval) time{
    
    self.moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    self.moveAnimation.fromValue = fromValue;
    self.moveAnimation.toValue = toValue;
    self.moveAnimation.delegate = self;
    self.moveAnimation.removedOnCompletion = NO;
    self.moveAnimation.fillMode = kCAFillModeForwards;
    self.moveAnimation.duration = time;
    
    [self.bottomLine.layer removeAllAnimations];
    [self.bottomLine.layer addAnimation:self.moveAnimation forKey:@"onStart"];
   

}
 

4.中間滾動檢視的建立：

  滾動檢視使用經典的UIScrollView設計 ，UIScrollView的frame尺寸在本例中，width=螢幕寬, height= 螢幕高減去上下導航條的高度。

contentSize = width * 標題的數量

其程式碼設定如下：

//本介面主要，建立中間滾動檢視
-(void)initSegmentView:(NSMutableArray*) views{

    if([views count] == 0 ) return;
    //建立中間的滑動檢視
    self.segmentScroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0, 42.5, SCREEN_WIDTH, SCREEN_HEIGHT)];
    self.segmentScroll.contentSize = CGSizeMake(SCREEN_WIDTH * [self.titleList count], SCREEN_HEIGHT);
    self.segmentScroll.alwaysBounceHorizontal = YES;
    self.segmentScroll.pagingEnabled = YES;
    [self addSubview:self.segmentScroll];
    
    //使用kvo來監聽uiscroll的滑動事件，代替它的協議介面
    //添加註冊實現contentOffset監聽
    [self.segmentScroll addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];
    
    
    [views enumerateObjectsUsingBlock:^(UIView* layout, NSUInteger idx, BOOL * _Nonnull stop) {
        
        if(idx > [views count]) *stop = true;
        
        [self.segmentScroll addSubview:layout];
        
    }];


}
 

為了使滑動時標籤上的指示條與標籤本身也隨著發生狀態變化（這裡主要批顏色與指示條的位置變化）需要在KVO當中監聽UIScrollView的contentSize的x座標，其計算程式碼如下：

//-------------------kvo 實現觀察主題 ----------------
//對於滑動翻頁使用kvo監聽機制
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{
    
    CGPoint offset = [change[NSKeyValueChangeNewKey] CGPointValue];
    CGPoint oldOffset = [change[NSKeyValueChangeOldKey] CGPointValue];
    CGFloat oldOffsetX = oldOffset.x;
    CGFloat deltaOfOffsetX = offset.x - oldOffsetX;


    [self.bottomLine.layer removeAllAnimations];
    CGRect frame = self.bottomLine.frame;
    frame.origin.x = deltaOfOffsetX / SCREEN_WIDTH * self.itemWidth;
    self.bottomLine.frame = frame;
    [self.bottomLine layoutIfNeeded];
 
    self.nCurIndex = deltaOfOffsetX / SCREEN_WIDTH;
    [self updateTitleBtnStatus:self.nCurIndex];
    
}

-(void)dealloc{
    [self.segmentScroll removeObserver:self forKeyPath:@"contentOffset" context:nil];
}
//-------------------kvo 實現觀察主題 end----------------