菜鸡学 iOS 3.2 手写Tab选项卡效果--添加手势

实现效果

QQ20170208-095934.png

文件结构

2155202-75d7357d3ea89787.png

主要思路

--- 给Label添加手势，点击后触发事件
--- 事件里写 点击后文字变色 添加下划线

1. 添加手势

// 给Label添加手势
        
// 设置是否可以接收到用户的事件和消息
   label.isUserInteractionEnabled = true

   // UITapGestureRecognizer       点击一下
   // UIPinchGestureRecognizer     二指往內或往外拨动
   // UIRotationGestureRecognizer  旋转
   // UISwipeGestureRecognizer     滑动 快速移动
   // UIPanGestureRecognizer       拖动 慢速移动
   // UILongPressGestureRecognizer 长按
        
// 创建一个手势 tapGes
    let tapGes = UITapGestureRecognizer(target: self, action:#selector(self.titleLabelClick(_:)))
 // 把手势添加到Label上
    label.addGestureRecognizer(tapGes)

2. 创建底部横线和选中的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的对象 在循环label的时候用append存放进来
lazy var titlelabels: [UILabel] = [UILabel]()

// 这里创建一个 label的下划线
lazy var tabScrollLine: UIView = {
    let tabScrollLine = UIView()
    tabScrollLine.backgroundColor = UIColor(r: 215, g: 50, b: 64)
    return tabScrollLine
}()



//自定义构造函数
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")
    }
}

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

func setupTitleLabels(){
    // 创建Label
    for (index, title) in titles.enumerated() {
        // 创建UILabel
        let label = UILabel()
        // 设置label的 属性
        label.text = title // label的文字是循环添加进来的
        label.tag = index // label的下标就是步增值
        label.font = UIFont.systemFont(ofSize: 14.7) // label的字体大小
        label.textColor = UIColor(r: 51, g: 49, b: 60) // label的文字颜色
        label.textAlignment = .center // label的对齐方式 枚举 (.center)
        // 设置label的 frame
        let labelW: CGFloat = (frame.width) / 4 // 宽度: 总宽 / 显示4个一排
        let labelH: CGFloat = frame.height - 2// 高度: 自动高度 - 滚动下划线
        let labelX: CGFloat = labelW * CGFloat(index) // X轴: 动态算出 宽度 X 循环下标 （labelW * 1, labelW * 2, ...）
        let labelY: CGFloat = 0 // Y轴: 0
        label.frame = CGRect(x: labelX, y: labelY, width: labelW, height: labelH)
        // 设置添加按钮
        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添加手势
        
        // 设置是否可以接收到用户的事件和消息
        label.isUserInteractionEnabled = true
        // UITapGestureRecognizer       点击一下
        // UIPinchGestureRecognizer     二指往內或往外拨动
        // UIRotationGestureRecognizer  旋转
        // UISwipeGestureRecognizer     滑动 快速移动
        // UIPanGestureRecognizer       拖动 慢速移动
        // UILongPressGestureRecognizer 长按
        
        // 创建一个手势 tapGes
        let tapGes = UITapGestureRecognizer(target: self, action:#selector(self.titleLabelClick(_:)))
        // 把手势添加到Label上
        label.addGestureRecognizer(tapGes)
    
    }
    // 设定contentSize的偏移量 左右滚动
    scrollView.contentSize = CGSize(width: CGFloat(frame.width * 2), height: CGFloat(frame.height))
    
    
}


// 创建底部下划线
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)
}

// 创建选中的Label下划线
fileprivate func tabScrollLines(){
    scrollView.addSubview(tabScrollLine)
    // 取第一个Label进行设置
    // titlelabels数组取第一个，空就直接返回
    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. 监听Label事件 点击后改变Label下划线位置和文字颜色

// 监听label监听
extension TabTitleView {
@objc func titleLabelClick(_ tapGes : UITapGestureRecognizer) {
    // 获取当前Label
    guard let currentLabel = tapGes.view as? UILabel else {return}
    
    // 获取之前label
    let oldLabel = titlelabels[currentIndex]
    
    // 切换文字颜色
    currentLabel.textColor = UIColor(r: 215, g: 50, b: 64)
    oldLabel.textColor = UIColor.darkGray
    
    // 保存label下标值
    currentIndex = currentLabel.tag
    
    // 滚动条改变位置
    let scrollLineX = CGFloat(currentIndex) * tabScrollLine.frame.width
    UIView.animate(withDuration: 0.15, animations: {
        self.tabScrollLine.frame.origin.x = scrollLineX
        })
    }
}