Swift斗鱼直播--首页TitleView与ContentView

首页PageTitleView

效果:首页最上方有一个和屏幕等宽的标题栏,点击的时候,可以切换到不同界面.类似于TabBarController

封装PageTitleView思路
1.自定义View，并且自定义构造函数
2.添加子控件

2.1UIScrollView
2.2 UILabel --- 拿一个数组存放，有序，类型相同
2.3 UIView --- 滚动条
2.4 UIView --- 底线

步骤

• 1.自定义一个UIView类
• 2.给该类自定义构造方法,私有属性
  • 注意:重写init构造方法时,必须重写(无需手写 ,双击红点,系统自动写上)
    //自定义属性(私有仅供该类使用)
    private var titles : [String]
    //自定义构造函数
    init(frame: CGRect, titles : [String]) {
    self.titles = title
    super.init(frame: frame)
    }
    required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
    }
• 3.在首页添加该TitleView
  • 1️⃣添加一个私有属性（titleView类型），并且使用懒加载闭包
  • 2️⃣在闭包中对该titleView进行初始化（长宽）、添加属性，调用该类的自定义构造方法
  • 3️⃣addSubview到首页中

Tips:
在开发过程中会用到很多重复参数，例如屏幕高宽等……
我们可以在Tool文件夹中添加一个Common.swift文件，专门用于存放公共的数据参数，通常是常量

• 4.添加子控件
  • UIScrollView
    • 添加一个私有属性,然后addSubview到TitleView中
    • 1️⃣懒加载
    • 2️⃣大小与TitleView相同
    • 注意点：必须在控制器View中将自动布局属性设置false
      automaticallyAdjustsScrollViewInsets = false
  • UILabel
    • 懒加载添加一个私有属性，专门存放TitleView中各个label的--数组--
    • 将以下步骤封装在titleView的extension中，并在初始化titleView时调用
    • 1️⃣ 创建UILabel
    • 2️⃣设置Label属性：text、tag、font、textColor、textAlignment
    • 3️⃣设置Label的frame：for循环中获取index和title，固定label的宽高
    • 4️⃣将label添加到scrollView和私有属性（数组）中
  • UIView---底线
    • 将以下步骤封装在titleView的extension中，并在初始化titleView时调用
    • 1️⃣添加底线UIView
    • 2️⃣设置frame
    • 3️⃣添加到titleView
  • UIView---滚动条
    • 将以下步骤封装在titleView的extension中，并在初始化titleView时调用
    • 1️⃣添加滚动条（懒加载）--- 变成私有属性，方便调用
    • 2️⃣根据存放label的数组获取第一个label
      • 利用guard因为获取到的是可选类型
    • 3️⃣根据第一个label设置滚动条的宽高

首页ContentView

封装ContentView思路
1.自定义View，并且自定义构造函数
2.添加子控件

2.1UICollectionView---对应layout、datasource
2.2 UICollectionViewCell---注册

步骤

• 1.自定义一个UIView类
• 2.给该类自定义构造函数，定义属性
  • 构造函数中，传入参数：1️⃣数组（存放首页的全部子控制器）2️⃣父控制器（首页）；调用设置UI界面的方法
  • 注意：构造函数记住要重写系统的required init方法
  • 属性：1️⃣存放子控制器的数组2️⃣父控制器（首页控制器）
• 3.设置UI界面
  • step1:将传入的子控制器添加到父控制器中
  • step2:创建collectionView，利用cell的重用机制，复用子控制器view
• 4.懒加载collectionView
  • step1:创建布局layout
  • step2:设置collectionView的参数
    let collectionView = UICollectionView(frame: CGRectZero, collectionViewLayout: layout)
    collectionView.showsHorizontalScrollIndicator = false
    collectionView.pagingEnabled = true
    collectionView.bounces = false
    collectionView.dataSource = self
    collectionView.registerClass(UICollectionViewCell.self , forCellWithReuseIdentifier: ContentCellID)
    //获取类型：类名.self 即可
  • step3:拓展contentView并实现collectionViewDataSource实现其数据源方法
    • 注意1:cell必须是注册的
    • 注意2:cell的contentView由于重用机制会保留原先的view，所以，在赋值前最好先将原来的view移除！！！防止页面错乱
      //必须是注册cell
      func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
      //1.创建cell
      let cell = collectionView.dequeueReusableCellWithReuseIdentifier(ContentCellID, forIndexPath: indexPath)
      //2.cell设置内容
      //防止cell循环利用多次添加,则把cell原来的先移除再添加新的vie
      for view in cell.contentView.subviews
      {
      view.removeFromSuperview()
      }
      let childVc = childVcs[indexPath.item]
      childVc.view.frame = cell.contentView.bounds
      cell.contentView.addSubview(childVc.view)
      return cell
      }
• 4.在首页控制器中懒加载contentView属性
  • 利用闭包进行初始化，调用自定义构造函数，传入子控制器数组和父控制器（self）
  • step1:确定cotentView的frame
  • step2:确定cotentView的子控制器，利用for循环创建用数组存放
  • step3:在设置UI方法中addSubview到首页view，并设置颜色