菜鸡学 iOS 3.2 手写Tab选项卡效果--添加手势
2017-02-08 本文已影响71人
菜鸡
实现效果
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
})
}
}