實現(xiàn)效果

QQ20170208-095934.png

文件結(jié)構(gòu)

2155202-75d7357d3ea89787.png

主要思路

--- 給Label添加手勢，點擊后觸發(fā)事件
--- 事件里寫 點擊后文字變色 添加下劃線

1. 添加手勢

// 給Label添加手勢
        
// 設(shè)置是否可以接收到用戶的事件和消息
   label.isUserInteractionEnabled = true

   // UITapGestureRecognizer       點擊一下
   // UIPinchGestureRecognizer     二指往內(nèi)或往外撥動
   // UIRotationGestureRecognizer  旋轉(zhuǎn)
   // UISwipeGestureRecognizer     滑動 快速移動
   // UIPanGestureRecognizer       拖動 慢速移動
   // UILongPressGestureRecognizer 長按
        
// 創(chuàng)建一個手勢 tapGes
    let tapGes = UITapGestureRecognizer(target: self, action:#selector(self.titleLabelClick(_:)))
 // 把手勢添加到Label上
    label.addGestureRecognizer(tapGes)

2. 創(chuàng)建底部橫線和選中的Label下劃線

import UIKit

class TabTitleView: UIView {
// 定義屬性
var titles: [String]
var currentIndex:Int = 0




lazy var scrollView: UIScrollView = {
    let scrollView = UIScrollView()
    scrollView.showsHorizontalScrollIndicator = false
    scrollView.scrollsToTop = false
    scrollView.bounces = false
    scrollView.isPagingEnabled = true
    scrollView.showsVerticalScrollIndicator = false
    
    return scrollView
}()

// 加載一個存放labels的對象 在循環(huán)label的時候用append存放進來
lazy var titlelabels: [UILabel] = [UILabel]()

// 這里創(chuàng)建一個 label的下劃線
lazy var tabScrollLine: UIView = {
    let tabScrollLine = UIView()
    tabScrollLine.backgroundColor = UIColor(r: 215, g: 50, b: 64)
    return tabScrollLine
}()



//自定義構(gòu)造函數(shù)
init(frame: CGRect, titles: [String]) {
    self.titles = titles
    super.init(frame: frame)
    // 載入UI界面
    LoadUI()
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
    }
}

// 設(shè)置TabTitleView UI界面
extension TabTitleView {
    func LoadUI(){
        // 添加 UIScrollView
        addSubview(scrollView)
        scrollView.frame = bounds
        setupTitleLabels()
        tabBottonLine()
        tabScrollLines()
}

func setupTitleLabels(){
    // 創(chuàng)建Label
    for (index, title) in titles.enumerated() {
        // 創(chuàng)建UILabel
        let label = UILabel()
        // 設(shè)置label的 屬性
        label.text = title // label的文字是循環(huán)添加進來的
        label.tag = index // label的下標(biāo)就是步增值
        label.font = UIFont.systemFont(ofSize: 14.7) // label的字體大小
        label.textColor = UIColor(r: 51, g: 49, b: 60) // label的文字顏色
        label.textAlignment = .center // label的對齊方式 枚舉 (.center)
        // 設(shè)置label的 frame
        let labelW: CGFloat = (frame.width) / 4 // 寬度: 總寬 / 顯示4個一排
        let labelH: CGFloat = frame.height - 2// 高度: 自動高度 - 滾動下劃線
        let labelX: CGFloat = labelW * CGFloat(index) // X軸: 動態(tài)算出 寬度 X 循環(huán)下標(biāo) （labelW * 1, labelW * 2, ...）
        let labelY: CGFloat = 0 // Y軸: 0
        label.frame = CGRect(x: labelX, y: labelY, width: labelW, height: labelH)
        // 設(shè)置添加按鈕
        let moreButton = UIButton()
        moreButton.frame = CGRect(x: frame.width, y: 0, width: 40, height: 40)
        moreButton.setBackgroundImage(UIImage(named:"subnavaddBtn"), for: .normal)
        addSubview(moreButton)
        
        scrollView.addSubview(label)
        titlelabels.append(label)
        
        // 給Label添加手勢
        
        // 設(shè)置是否可以接收到用戶的事件和消息
        label.isUserInteractionEnabled = true
        // UITapGestureRecognizer       點擊一下
        // UIPinchGestureRecognizer     二指往內(nèi)或往外撥動
        // UIRotationGestureRecognizer  旋轉(zhuǎn)
        // UISwipeGestureRecognizer     滑動 快速移動
        // UIPanGestureRecognizer       拖動 慢速移動
        // UILongPressGestureRecognizer 長按
        
        // 創(chuàng)建一個手勢 tapGes
        let tapGes = UITapGestureRecognizer(target: self, action:#selector(self.titleLabelClick(_:)))
        // 把手勢添加到Label上
        label.addGestureRecognizer(tapGes)
    
    }
    // 設(shè)定contentSize的偏移量 左右滾動
    scrollView.contentSize = CGSize(width: CGFloat(frame.width * 2), height: CGFloat(frame.height))
    
    
}


// 創(chuàng)建底部下劃線
fileprivate func tabBottonLine() {
    let tabBottonLine = UIView()
    tabBottonLine.backgroundColor = UIColor(r: 215, g: 50, b: 64)
    tabBottonLine.frame = CGRect(x: 0, y: frame.height - 0.5, width: frame.width, height: 0.5)
    addSubview(tabBottonLine)
}

// 創(chuàng)建選中的Label下劃線
fileprivate func tabScrollLines(){
    scrollView.addSubview(tabScrollLine)
    // 取第一個Label進行設(shè)置
    // titlelabels數(shù)組取第一個，空就直接返回
    guard let firstLabel = titlelabels.first else{ return }
    firstLabel.textColor = UIColor(r: 215, g: 50, b: 64)
    tabScrollLine.frame = CGRect(x: firstLabel.frame.origin.x, y: firstLabel.frame.height - 2, width: firstLabel.frame.width, height: 3)
    }
}

3. 監(jiān)聽Label事件 點擊后改變Label下劃線位置和文字顏色

// 監(jiān)聽label監(jiān)聽
extension TabTitleView {
@objc func titleLabelClick(_ tapGes : UITapGestureRecognizer) {
    // 獲取當(dāng)前Label
    guard let currentLabel = tapGes.view as? UILabel else {return}
    
    // 獲取之前l(fā)abel
    let oldLabel = titlelabels[currentIndex]
    
    // 切換文字顏色
    currentLabel.textColor = UIColor(r: 215, g: 50, b: 64)
    oldLabel.textColor = UIColor.darkGray
    
    // 保存label下標(biāo)值
    currentIndex = currentLabel.tag
    
    // 滾動條改變位置
    let scrollLineX = CGFloat(currentIndex) * tabScrollLine.frame.width
    UIView.animate(withDuration: 0.15, animations: {
        self.tabScrollLine.frame.origin.x = scrollLineX
        })
    }
}