顏色封裝 + ClOPageView + 瀑布流
搭建主題框架

導(dǎo)航欄布局
- 改變導(dǎo)航欄的顏色
// 在 AppDelegate 中
UINavigationBar.appearance().barTintColor = .black // tintColor 是導(dǎo)航欄文字的顏色
- 改變狀態(tài)欄的顏色
// 蘋果推薦方法 在需要設(shè)置頁面 controller 中
override var preferredStatusBarStyle: UIStatusBarStyle {
return .lightContent // 默認(rèn)為白色
}
// or
// 在 info.plist 中 設(shè)置
View controller-based status bar appearance 設(shè)置為 NO // 全局
// 在 AppDelegate 中
UIApplication.shared.statusBarStyle = .lightContent
// or
設(shè)置首頁 NavigationBar 注意事項(xiàng)
- 如果事件監(jiān)聽方法為私有時(shí) 要在方法前面加
@objc
公開則不需要
// 事件監(jiān)聽 --> 發(fā)送消息 --> 將方法包裝SEL --> 類方法列表 --> IMP
顏色封裝 :UIColor + Extension
- 拓展方法如果有參數(shù) 采用便利構(gòu)造函數(shù)
// 自定義 RGB 顏色
convenience init(r : CGFloat, g : CGFloat, b : CGFloat, alpha : CGFloat = 1.0) {
self.init(red: r / 255.0, green: g / 255.0, blue: b / 255.0, alpha: alpha)
}
// 返回一個(gè)十六進(jìn)制顏色
convenience init?(hex : String, alpha : CGFloat = 1.0) {
// 0xff0000
// 1.判斷字符串的長度是否符合
guard hex.characters.count >= 6 else {
return nil
}
// 2.將字符串轉(zhuǎn)成大寫
var tempHex = hex.uppercased()
// 3.判斷開頭: 0x/#/##
if tempHex.hasPrefix("0x") || tempHex.hasPrefix("##") {
tempHex = (tempHex as NSString).substring(from: 2)
}
if tempHex.hasPrefix("#") {
tempHex = (tempHex as NSString).substring(from: 1)
}
// 4.分別取出RGB
// FF --> 255
var range = NSRange(location: 0, length: 2)
let rHex = (tempHex as NSString).substring(with: range)
range.location = 2
let gHex = (tempHex as NSString).substring(with: range)
range.location = 4
let bHex = (tempHex as NSString).substring(with: range)
// 5.將十六進(jìn)制轉(zhuǎn)成數(shù)字 emoji表情
var r : UInt32 = 0, g : UInt32 = 0, b : UInt32 = 0
Scanner(string: rHex).scanHexInt32(&r)
Scanner(string: gHex).scanHexInt32(&g)
Scanner(string: bHex).scanHexInt32(&b)
self.init(r : CGFloat(r), g : CGFloat(g), b : CGFloat(b))
}
- 沒有參數(shù)的擴(kuò)展方法 用類方法
/// 隨機(jī)顏色
class func randomColor() -> UIColor {
return UIColor(r: CGFloat(arc4random_uniform(256)), g: CGFloat(arc4random_uniform(256)), b: CGFloat(arc4random_uniform(256)))
}
封裝 CLOPageView

類似網(wǎng)易新聞
titleView(UIScrollView) + contentView(UICollectionView)
-
結(jié)構(gòu)視圖
如果類中的屬性沒有初始化赃春,要在創(chuàng)建對象
super.init()
前賦值 否則會報(bào)錯
// MARK: - 定義屬性
fileprivate var titles: [String]
fileprivate var titleStyle: CLOPageStyle
fileprivate var childVcs: [UIViewController]
fileprivate var parentVc: UIViewController
init(frame: CGRect, titles: [String], titleStyle: CLOPageStyle, childVcs: [UIViewController], parentVc: UIViewController) {
self.titles = titles
self.titleStyle = titleStyle
self.childVcs = childVcs
self.parentVc = parentVc
super.init(frame: frame)
}
- 如果一個(gè)頁面有多個(gè)控件繼承自
UIScrollView
眉菱,需要設(shè)置這些控件的scrollsToTop
屬性蚜印,如果都為true
调炬, 則點(diǎn)擊狀態(tài)欄都不會移動
collectionView.scrollsToTop = false
scrollView.scrollsToTop = false
在
CLOTitleView
中選擇添加UILabel
而不是UIButton
的理由:UIButton
中不好設(shè)置文字的屬性, 直接給UILabel
中添加相應(yīng)的手勢方法
for (i, label) in titleLabels.enumerated()
可以遍歷數(shù)組取出數(shù)組中的元素及其下標(biāo)方法
w = (titles[i] as NSString).boundingRect(with: CGSize(width: CGFloat.greatestFiniteMagnitude, height: 0), options: .usesLineFragmentOrigin, attributes: [NSAttributedStringKey.font: style.titleFont], context: nil).width
可以算出給定文字的寬度設(shè)置委托協(xié)議時(shí)能不繼承
NSObjectProtocol
就不繼承姚建,因?yàn)?code>NSObjectProtocol里的方法一般用不到,又因?yàn)?code>weak只能修飾類漆羔,所以委托協(xié)議只需繼承自class
即可
// MARK: - 設(shè)置委托協(xié)議
protocol CLOTitleViewDelegate: class {
func titleView(_ titleView: CLOTitleView, didSelected currentIndex: Int)
}
weak var delegate: CLOTitleViewDelegate?
- 獲取
RGB
顏色的差值方法: 分別獲取R婆芦、G、B值再相減
class func getRGBDelta(_ firstColor : UIColor, _ seccondColor : UIColor) -> (CGFloat, CGFloat, CGFloat) {
let firstRGB = firstColor.getRGB()
let secondRGB = seccondColor.getRGB()
return (firstRGB.0 - secondRGB.0, firstRGB.1 - secondRGB.1, firstRGB.2 - secondRGB.2)
}
func getRGB() -> (CGFloat, CGFloat, CGFloat) {
guard let cmps = cgColor.components else {
fatalError("保證普通顏色是RGB方式傳入")
}
return (cmps[0] * 255, cmps[1] * 255, cmps[2] * 255)
}
- 顏色漸變動畫實(shí)現(xiàn)思路: 先判斷當(dāng)前是左移還是右移穆刻,用移動前
scrollView
的偏移量與移動后的偏移量比較置尔,獲得移動后下一個(gè)頁面的下標(biāo),再獲取當(dāng)前頁面移動的百分比蛹批,通過代理讓titleView
作出相應(yīng)處理撰洗,讓RGB顏色差值乘以百分比
- 底部滾動條的動畫類似,讓不同滾動條寬度之間的差值乘以這個(gè)百分比
瀑布流布局

- 瀑布流布局實(shí)現(xiàn)整體思路:采用
UICollectionView
自定義UICollectionViewFlowLayout
主要實(shí)現(xiàn)下面三個(gè)方法:
// MARK:- 準(zhǔn)備布局
extension HYWaterfallLayout {
// 告訴當(dāng)前 layout 需要改變
override func prepare() {
super.prepare()
...
// Cell --> UICollectionViewLayoutAttributes
// 設(shè)置好每個(gè) cell 的 frame
...
}
// MARK:- 返回準(zhǔn)備好所有布局
extension HYWaterfallLayout {
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
return cellAttrs
}
}
// MARK:- 設(shè)置contentSize
extension HYWaterfallLayout {
override var collectionViewContentSize: CGSize {
return CGSize(width: 0, height: totalHeights.max()! + sectionInset.bottom)
}
}
- 每個(gè)
cell
的frame
計(jì)算
// 用一個(gè)屬性保存每一行 cell 的高度
fileprivate lazy var totalHeights : [CGFloat] = Array(repeating: self.sectionInset.top, count: self.cols)
// 計(jì)算當(dāng)前一排最小高度及其列數(shù)
let minH = totalHeights.min()!
let minIndex = totalHeights.index(of: minH)!
// x 和 y 值
let cellX : CGFloat = sectionInset.left + (minimumInteritemSpacing + cellW) * CGFloat(minIndex)
let cellY : CGFloat = minH + minimumLineSpacing
// 更新當(dāng)前的最小高度
totalHeights[minIndex] = minH + minimumLineSpacing + cellH
相當(dāng)于將下一個(gè)
cell
加在當(dāng)前一行中cellY
值最小的cell
的下面