实现效果
QQ20170206-150753.png
文件结构
QQ20170206-150958.png
主要思路
--- 创建一个scrollView继承自UIScrollView，通过contentSize来控制偏移量实现左右滑动的效果。
--- 创建Lable，每一个Tab选项卡的文字就是一个Lable，设置好样式循环出来。
--- Lable加载到scrollView上，scrollView加载到TabTitleView上。
1：创建一个类TabTitleView，继承自UIView，自定义构造函数，里面传入两个参数frame和titles分别用于存放位置大小和Tab选项卡的文字。
class TabTitleView: UIView {
// 定义属性
var titles: [String] // 存储属性，保存自定义构造函数传过来的的titles数组数据
//自定义构造函数
init(frame: CGRect, titles: [String]) {
self.titles = titles // 接收到的titles传给上面的titles存储属性
super.init(frame: frame)
// 载入UI界面
LoadUI()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
2：以懒加载方式闭包创建tabTitleView，设定CGRect、titles数组，然后创建
// 闭包创建tabTitleView
lazy var tabTitleView: TabTitleView = { [weak self] in
// 设定frame
let titleFrame = CGRect(x: 0, y: LstatusBarH + LnavigationBarH, width: LscreenW - 40, height: LtitleViewH)
// 设定titles的数组内容
let titles = ["萝莉直播", "宝石直播", "设备器材", "排练直播","排练直播","排练直播","排练直播"]
// 创建titleView 传给前面的构造器
let titleView = TabTitleView(frame: titleFrame, titles: titles)
titleView.backgroundColor = UIColor(r: 218, g: 218, b: 218)
return titleView
}()
3：以闭包懒加载的方式创建scrollView，用于左右滑动效果。
class TabTitleView: UIView {
// 定义属性
var titles: [String] //用来保存外面传进来的titles
// 懒加载方式闭包创建 scrollview
lazy var scrollView: UIScrollView = {
let scrollView = UIScrollView() // 创建一个scrollView
scrollView.showsHorizontalScrollIndicator = false // 关闭水平滚动条
scrollView.showsVerticalScrollIndicator = false // 关闭垂直滚动条
scrollView.scrollsToTop = false // 关闭点击状态栏控件滚动返回至顶部
scrollView.bounces = false // 关闭边界回弹效果
scrollView.isPagingEnabled = true // 开启页面平移效果
return scrollView // 返回 scrollView
}()
//自定义构造函数
init(frame: CGRect, titles: [String]) {
self.titles = titles // 接收到的titles传给上面的titles存储属性
super.init(frame: frame) // 初始化frame
// 载入UI界面
LoadUI()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
4：以类扩展的方式写TabTitleView这个是用于加载整个Tab选项卡UI的，用for循环创建Label，并设置Label各种属性，最后加载进scrollview里。
// 设置TabTitleView UI整个界面
extension TabTitleView {
func LoadUI(){
// 添加 UIScrollView
addSubview(scrollView)
scrollView.frame = bounds
setupTitleLabels()
}
func setupTitleLabels(){
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)
}
// 设定contentSize的偏移量 左右滚动
scrollView.contentSize = CGSize(width: CGFloat(frame.width * 2), height: CGFloat(frame.height))
}
}
整个 TabTitleView.swift
import UIKit
class TabTitleView: UIView {
// 定义属性
var titles: [String]
lazy var scrollView: UIScrollView = {
let scrollView = UIScrollView()
scrollView.showsHorizontalScrollIndicator = false
scrollView.scrollsToTop = false
scrollView.bounces = false
scrollView.isPagingEnabled = true
scrollView.showsVerticalScrollIndicator = false
return scrollView
}()
//自定义构造函数
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()
}
func setupTitleLabels(){
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)
}
// 设定contentSize的偏移量 左右滚动
scrollView.contentSize = CGSize(width: CGFloat(frame.width * 2), height: CGFloat(frame.height))
}
}
整个HomeView.swift文件
import UIKit
class HomeViewController: UIViewController {
// Tab 选项卡头部
lazy var tabTitleView: TabTitleView = { [weak self] in
let titleFrame = CGRect(x: 0, y: LstatusBarH + LnavigationBarH, width: LscreenW - 40, height: LtitleViewH)
let titles = ["萝莉直播", "宝石直播", "设备器材", "排练直播","排练直播","排练直播","排练直播"]
let titleView = TabTitleView(frame: titleFrame, titles: titles)
titleView.backgroundColor = UIColor(r: 218, g: 218, b: 218)
return titleView
}()
// 系统回调函数
override func viewDidLoad() {
super.viewDidLoad()
// 载入所有的UI
loadUI()
}
}
// 扩展
extension HomeViewController {
// 载入所有的UI
func loadUI(){
// 关闭内边距
automaticallyAdjustsScrollViewInsets = false
// 载入 tabTitleView
view.addSubview(tabTitleView)
}
}