教你制作可移动的导航栏

private let titleWidth : CGFloat = 80
private let titleHeight : CGFloat = 40
private let ScreenWidth = UIScreen.main.bounds.size.width
private let ScreenHeight = UIScreen.main.bounds.size.height

private var selectButton:UIButton?//选择的栏目
private var sliderView:UIView?//指示器
private var topScroll:UIScrollView?
var titleArray = [String]()//暂存栏目title
var buttonArray = [UIButton]() //暂存所有栏目

func createScrollableTopBar(){
    
    //滑动ScrollView
    let scroll = UIScrollView(frame: CGRect(x: 0, y: 0, width:self.ScreenWidth, height: self.titleHeight))
    scroll.contentSize = CGSize(width: self.titleArray.count * NSInteger(titleWidth), height: 40)
    scroll.bounces = false
    scroll.showsHorizontalScrollIndicator = false
    scroll.flashScrollIndicators()
    scroll.backgroundColor = UIColor.gray
    self.view.addSubview(scroll)
    self.topScroll = scroll
    
    //栏目按钮
    for(index,value) in self.titleArray.enumerated(){
        let titleButton = UIButton(frame: CGRect(x: self.titleWidth * CGFloat(index), y: 0, width: self.titleWidth, height: self.titleHeight))
        titleButton.setTitle(value, for: .normal)
        titleButton.setTitleColor(UIColor.black, for: .normal)
        titleButton.backgroundColor = UIColor.white
        titleButton.tag = 100 + index
        titleButton.titleLabel?.font = UIFont.systemFont(ofSize: 14)
        scroll.addSubview(titleButton)
        self.buttonArray.append(titleButton)
    }
        
}

if(index == 0){
    self.selectButton = titleButton
    self.selectButton?.setTitleColor(UIColor.orange, for: .normal)
}

//滑块 indicator
let sliderView = UIView(frame: CGRect(x: 15, y: self.titleHeight - 2, width: self.titleWidth - 20, height: 2))
sliderView.backgroundColor = UIColor.orange
scroll.addSubview(sliderView)
self.sliderView = sliderView;

titleButton.addTarget(self, action: #selector(scrollViewSelectToIndex), for:.touchUpInside)

/**选择某个项目*/
func selectButton(index:NSInteger){
    //把当前的按钮重置为原来颜色
    self.selectButton?.setTitleColor(UIColor.black, for: .normal)
    //取出选中的按钮
    selectButton = self.buttonArray[index]
    self.selectButton?.setTitleColor(UIColor.orange, for: .normal)
    // 将rect由rect所在视图转换到目标视图view中，返回在目标视图view中的rect  相对于当前显示窗口
    let rect = selectButton!.superview!.convert(selectButton!.frame, to: self.view)
    UIView .animate(withDuration: 0) {
        let contentOffset = self.topScroll!.contentOffset;
        //选中栏目的最前几个：scrollView偏移值 + 那个按钮的X值 <= 当前显示窗口中间X值
        if contentOffset.x <= (self.ScreenWidth/2 - rect.origin.x - self.titleWidth/2)  {
            print("1")
            self.topScroll!.setContentOffset(CGPoint(x:0,y:contentOffset.y), animated: true)
            //(self.ScreenWidth/2 - rect.origin.x - self.titleWidth/2) 判断选中的按钮是在左边还是右边
        } else if (rect.origin.x - self.ScreenWidth/2 + self.titleWidth/2) >= CGFloat(self.titleArray.count) * self.titleWidth - self.ScreenWidth - contentOffset.x { //选中栏目的最后几个: 那个按钮的X值 -当前显示窗口中间X值 + 栏目的一半，即scrollView偏移值 >= 总栏目的长 - self.ScreenWidth - 偏移量contentOffset.x
            self.topScroll!.setContentOffset(CGPoint(x:CGFloat(self.titleArray.count) * self.titleWidth - self.ScreenWidth,y:contentOffset.y), animated: true)
            print("2")
        } else {
            print("3")//
            self.topScroll!.setContentOffset(CGPoint(x:contentOffset.x - (self.ScreenWidth/2 - rect.origin.x - self.titleWidth/2),y:contentOffset.y), animated: true)
        }
    }
}