Swift斗鱼直播--首页导航及布局分析

首页的部分

首页导航栏

导航栏左侧

• 点击图片时若有一闪一闪效果，则使用
  //点击图片时有一闪的功能两种方式
  //方式一 let btn = UIButton(type: .Custom)
  let btn = UIButton()
  btn.setImage(UIImage(named: "homeLogoIcon"), forState: .Normal)
  btn.sizeToFit()
  navigationItem.leftBarButtonItem = UIBarButtonItem(customView: btn)

导航栏右侧

• 点击按钮，设置两种状态：普通和高亮
• 注意：直接sizeToFit按钮间距很短，需要设置size，不能直接sizeToFit
  let size = CGSize(width: 40, height: 40)
  historyBtn.frame = CGRect(origin: CGPointZero, size: size)
• 设置按钮的方法需要写很多遍，可以考虑封装成工具类

封装添加按钮的扩展方法

• Tools文件夹中添加一个Extension文件夹（对系统的类做扩展）
• 步骤1：新建一个空的swift文件，命名可以是类名+后缀 或 前缀+类名
• 步骤2：导入UIKit框架
• 步骤3：在extension 类名中写类方法、构造方法（常用）
  import UIKit
  //相当于对系统类做一个扩展
  extension UIBarButtonItem
  {
  //方式一：扩展类方法 不常用
  class func createItem (imageName : String , highImageName : String , size : CGSize) -> UIBarButtonItem
  {
  let btn = UIButton()
  btn.setImage(UIImage(named: imageName), forState: .Normal)
  btn.setImage(UIImage(named: highImageName), forState: .Highlighted)
  btn.frame = CGRect(origin: CGPointZero, size: size)
  return UIBarButtonItem(customView: btn)
  }
  }
  //方式二：构造函数 常用
  //只能扩充便利构造函数
  //1. convenience 开头
  //2. 必须调用一个设计的构造函数（self)
  convenience init(imageName : String , highImageName : String , size : CGSize) {
  let btn = UIButton()
  btn.setImage(UIImage(named: imageName), forState: .Normal)
  btn.setImage(UIImage(named: highImageName), forState: .Highlighted)
  btn.frame = CGRect(origin: CGPointZero, size: size)
  self.init(customView : btn) }
• 注意：可以巧用构造函数中的默认参数；需要设置图片就传参数，不需要的则会自动附上默认值
  //方式二：构造函数 常用
  //只能扩充便利构造函数
  //1. convenience 开头
  //2. 必须调用一个设计的构造函数 （self)
  convenience init(imageName : String , highImageName : String = "" , size : CGSize = CGSizeZero)
  {
  let btn = UIButton()
  //1. 设置普通图片
  btn.setImage(UIImage(named: imageName), forState: .Normal)
  //2. 设置高亮图片
  if highImageName != ""
  {
  btn.setImage(UIImage(named: highImageName), forState: .Highlighted)
  }
  //3. 设置尺寸
  if size == CGSizeZero
  {
  btn.sizeToFit()
  }
  else
  {
  btn.frame = CGRect(origin: CGPointZero, size: size)
  }
  self.init(customView : btn)
  }

首页整体布局构思

分析：顶部有个可滑动的栏，里面好像有很多button或者label，当点击的时候，界面会进行切换。

注意：很多地方都有类似效果，可以自行封装，方便复用

• 1、封装PageTitleView-----存放标题和下划线
• 2、封装PageContentView----负责每个标题对应界面显示
• 3、处理PageTitleView和PageContentView的逻辑关系----点击、滑动等操作

首页TitleView

效果:首页最上方有一个和屏幕等宽的标题栏,点击的时候,可以切换到不同界面.类似于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，并设置颜色