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,并设置颜色

你可能感兴趣的:(Swift斗鱼直播--首页TitleView与ContentView)