iOS採用Swift開發的多Tab框架ZFMultiTabPage

ZFMultiTabPage 組件介紹及使用方法

代碼地址:https://github.com/yuzhengfei/ZFMultiTabPage

ZFMultiTabPage框架是採用Swift開發的多Tab框架,實現了:

  • 可自定義頭部視圖(可控制顯示與隱藏)
  • 可自定義Tab視圖(可個性化設置)
  • 將一些通用多Tab框架裏的由調用方向框架先創建好各個子tab視圖再一起傳入的機制優化成了由框架向調用方通過代理方法索要各個子tab的視圖,提升了加載速度,防止頁面卡頓
  • 加入Tab子視圖的緩存機制,避免了框架向調用方重複索要
  • 對視圖滑動的多個回調事件進行了處理,並通過代理方法對面暴露,調用方可以在各種時機做相應的業務處理,例如預加載等等
  • 解決了左滑退出手勢衝突的問題

效果如下圖:
在這裏插入圖片描述
在這裏插入圖片描述

1.主框架:ZFMultiTabPageViewController.swift

文件路徑:ZFMultiTabPage/MainPage/Controller

此頁面的結構主要包括三部分:

  • mainScrollView: 主view,用來實現整個頁面的上下滑動效果
  • headerView: 頭部view
  • tabView: 多tab view
  • collectionView: 用來實現每個tab對應的子頁面的橫滑效果,每個cell的寬度是一屏(bounds.size.width),cell的個數由外部傳入,詳細使用下面會介紹

具體使用方法如下代碼:

/// 初始化方法
/// - Parameters:
///   - tabCount: tab數量
///   - headerView: 頭部視圖
///   - tabView: tab視圖
///   - titleBarHeight: titleBar的高度
init(tabCount: Int, headerView: UIView, tabView: UIView, titleBarHeight: CGFloat) {
        
}
    
    
/// 初始化方法
/// - Parameters:
///   - tabCount: tab數量
///   - headerView: 頭部視圖
///   - tabView: tab視圖
///   - titleBarHeight: titleBar的高度
///   - defaultIndex: 可選參數,默認顯示的子tab的索引,默認顯示第一個
///   - isHiddenHeaderView: 可選參數,是否隱藏頭部視圖,默認顯示
///   - offsetHeight: 可選參數,主視圖的偏移量,默認 = 0
init(tabCount: Int, headerView: UIView, tabView: UIView, titleBarHeight: CGFloat, defaultIndex: Int = 0, isHiddenHeaderView: Bool = false, offsetHeight: CGFloat = 0) {
        
}

:collectionView的cell在重用之前需要將原有的subview清掉,防止重複多次add

override func prepareForReuse() {
    super.prepareForReuse()
    for subView in self.contentView.subviews {
        subView.removeFromSuperview()
    }
}

2.Tab的子頁面:ZFMultiTabChildPageViewController.swift

文件路徑:ZFMultiTabPage/MainPage/Controller

此VC主要是封裝了一個基類,每個tab對應的頁面都要繼承此基類。

3.多Tab組件:ZFMultipleTabView.swift

文件路徑:ZFMultiTabPage/Tab

此多Tab組件對外提供了非常方便使用的三個接口,可以配合主框架的代理方法使用:

/// 視圖滑動時調用
/// - Parameter pager: 滑動的子view
public func pagerDidScroll(pager: UIScrollView) {
        
}
    
/// 視圖滑動開始減速調用
/// - Parameter pager: 滑動的子view
public func pagerDidEndDecelerating(pager: UIScrollView) {
        
}
    
/// 視圖動畫完成後調用
/// - Parameter pager: 滑動的子view
public func pagerDidEndScrollingAnimation(pager: UIScrollView) {
        
}

優點:

  • 不需要調用方自行的計算當前視圖的此次滑動是滑動到了第幾個子tab
  • 不需要調用方計算此次滑動是從第幾個子tab滑動了第幾個tab,索引相關的計算都已經由此Tab組件完成,大大的減輕了調用方的工作量。
  • 並配有如下配置文件(ZFMultipleTabViewConfig.swift),可以讓調用方非常方便的自定義Tab按鈕的選中和非選中狀態下來的字體大小、顏色,以及追蹤器的顏色、寬度比例、顯示與隱藏:
  • 擴展性強,可以通過config配置文件去擴展現有的功能
class ZFMultipleTabViewConfig: NSObject {
    
    /** 是否顯示底部分割線,默認爲true */
    var showBottomSeparator: Bool = true
    /** 按鈕之間的間距,默認爲 20.0f */
    var spacingBetweenButtons: CGFloat = 20
    /** 標題文字字號大小,默認 15 號字體 */
    var titleFont: UIFont = UIFont.systemFont(ofSize: 15)
    /** 標題文字選中字號大小,默認 15 號字體 */
    var titleSelectedFont: UIFont = UIFont.systemFont(ofSize: 15)
    /** 普通狀態下標題按鈕文字的顏色,默認爲黑色 */
    var titleColor: UIColor = UIColor.black
    /** 選中狀態下標題按鈕文字的顏色,默認爲紅色 */
    var titleSelectedColor: UIColor = UIColor.red
    /** 追蹤器顏色,默認爲紅色 */
    var indicatorColor: UIColor = UIColor.red
    /** 追蹤器高度,默認爲 3.0f */
    var indicatorHeight: CGFloat = 3.0
    /** 追蹤器寬度比,默認爲 1.0f,與title同寬 */
    var indicatorWidthRate: CGFloat = 1.0
    /** 追蹤器的圓角,默認爲 2.0f */
    var indicatorCorner: CGFloat = 2.0
    /** 追蹤器距離底部的距離,默認爲 5.0f */
    var indicatorBottomDistance: CGFloat = 5.0
    
}

4.Title組件:ZFTitleBar.swift

文件路徑:ZFMultiTabPage/Title

此titleBar對外提供了做漸隱漸現動效的接口,用戶可以自行設置maxScrollY屬性的值,來控制主頁面在上下滑動的時候bar的透明度

func setTransparent(_ offsetY: CGFloat) {
       
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章