首页的部分
首页导航栏
导航栏左侧
- 点击图片时若有一闪一闪效果，则使用
//点击图片时有一闪的功能两种方式
//方式一 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")
}
- 注意:重写init构造方法时,必须重写(无需手写 ,双击红点,系统自动写上)
- 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设置滚动条的宽高
- UIScrollView
首页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，并设置颜色
网友评论