菜鸡学 iOS 3.1 手写Tab选项卡效果--左右滚动Label

实现效果
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)
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,198评论 4赞 61
  • 感谢有个弟让我多了份牵挂！
    昨个“感恩节”刷爆了朋友圈，父母给我我们生命要感恩、老师给了我们知识要感恩，同学朋友给了我们帮助要感恩，是的感谢生...
    小确幸随心记阅读 575评论 0赞 3
  • 分水岭分割算法(WaterShed)
    1.watershed算法原理 所有的灰度图像都可视为拓扑平面,灰度值高的区域看成山峰,灰度值低的区域看成山谷,我...
    Pello_Luo阅读 15,811评论 0赞 0
  • 家有小妖
    又到“六一”了，看着宝贝女儿穿着舞蹈服在镜子前扭来扭去，嘴里还不停地说:“妈妈，你看好看吗？等会化了妆就更漂亮了。...
    欣星wl阅读 508评论 0赞 6
  • 拥抱的力量
    爱我你就抱抱我 “爱我你就亲亲我，爱我你就抱抱我，爱我你就夸夸我。亲亲我，抱抱我，夸夸我……” 这是...
    野兔丫阅读 505评论 0赞 7