FMHoverScrollKit控件懸停

favimg

效果示例

WYDemo2.gif

這是一個控件懸停的UI效果實(shí)現(xiàn)棚赔,類似于網(wǎng)易云課堂的詳情頁UI效果


更新 2020 - 11 - 04

由于之前的設(shè)計對項(xiàng)目的侵入性太強(qiáng)(需要繼承自代碼提供的父類),導(dǎo)致在項(xiàng)目中實(shí)際應(yīng)用時预皇,很多功能限制,導(dǎo)致諸多不便塞帐。本次更新針對這個問題提供了一個抽象層:

  • 管理類
    • FMMixScrollBaseDelegateManager
      將所有交互邏輯放在了這里
  • 配置
    • FMMixScrollConfig
      可配置內(nèi)容:
/** 傳入的子控制器的數(shù)組 ps:不可變數(shù)組, 最多不要超過5個(暫不支持滑動)*/
@property (nonatomic, strong) NSArray <UIViewController *>*childVCArr;
/** 傳入的UITableView 或 UICollectionView數(shù)組 ps:不可變數(shù)組, 最多不要超過5個(暫不支持滑動)*/
@property (nonatomic, strong) NSArray <UIScrollView *>*scrollTorCArr;
/** 轉(zhuǎn)入的頭部視圖的image圖片的名稱 */
@property (nonatomic, strong) NSString *headImageName;
/** 是否允許headView縮放纫溃,默認(rèn)NO */
@property (nonatomic, assign) BOOL isStretch;
/** 頂部圖片高度 */
@property (nonatomic, assign) CGFloat headImage_H;
/** 按鈕的高度 ps:寬度由按鈕個數(shù)決定,平分屏幕寬度 */
@property (nonatomic, assign) CGFloat button_H;
/** bar懸停的位置 ps:默認(rèn)為navigationBar + statusBar的高度 */
@property (nonatomic, assign) CGFloat barStop_H;
/** button下面指示條的顏色 */
@property (nonatomic, strong) UIColor *indicatorColor;
/** 是否隱藏指示條 */
@property (nonatomic, assign) BOOL isIndicatorHidden;
/** button的名稱 */
@property (nonatomic, strong) NSArray *btnTitleArr;
/** button的選中名稱 */
@property (nonatomic, strong) NSArray *btnSelectedTitleArr;
/** button的font */
@property (nonatomic, strong) UIFont *btnFont;
/** button的selected title color */
@property (nonatomic, strong) UIColor *btnSelectedTitleColor;
/** button的normal titl color*/
@property (nonatomic, strong) UIColor *btnNormalTitleColor;
/** button的背景顏色 */
@property (nonatomic, strong) UIColor *btnBackColor;
/** view 是否需要懶加載,ps:為YES時赁酝,子視圖初次初始化時犯祠,若bar不在原位,會自動置回 */
@property (nonatomic, assign) BOOL shouldLazyLoad;
/// 測試使用
@property (nonatomic, assign) BOOL isTest;

項(xiàng)目中具體使用示例:(swift 版本)

    lazy var manager: FMMixScrollBaseDelegateManager = {
        // 配置類
        let config = FMMixScrollConfig()
        // 子controller
        let processing = WBWorkRecordProcessingViewController()
        processing.isMixScroll = true
        let success = WBWorkRecordSuccessViewController()
        success.isMixScroll = true
        let failure = WBWorkRecordFailureViewController()
        failure.isMixScroll = true
        // 設(shè)置具體配置項(xiàng)
        config.headImage_H = WBWorkRecordDetailHeader.H
        config.childVCArr = [processing, success, failure]
        config.scrollTorCArr = [processing.tableView, success.tableView, failure.tableView]
        config.btnTitleArr = [
            LocalizedString("wbProcessing", value: "處理中", comment: "處理中"),
            LocalizedString("wbSuccess", value: "成功", comment: "成功"),
            LocalizedString("wbFailure", value: "失敗", comment: "失敗")]
        config.btnBackColor = UIColor.appWhite
        let manager = FMMixScrollBaseDelegateManager(config: config, fatherController: self)
        // 設(shè)置子controller的delegate為manager
        processing.delegate = manager
        success.delegate = manager
        failure.delegate = manager
        // 設(shè)置 manager的delegate為當(dāng)前控制器(即父控制器)
        manager.delegate = self
        return manager
    }()

    // 實(shí)現(xiàn)manager的代理方法
    extension WBWorkRecordDetailViewController: FMMixScrollManagerDelegate {
    
    func currentSelectedIndex(_ index: Int) {
        headerView.updateLabelTextColor(index)
    }
    
}

1.工程引入FMBaseViewController, 并添加要自定義的controller

  • 有關(guān)頭部image及button的相關(guān)設(shè)置通過酌呆,F(xiàn)MBaseViewController的屬性進(jìn)行設(shè)置衡载,示例代碼如下:
FMBaseViewController *bvc = [[FMBaseViewController alloc] init];
bvc.btnBackColor = [UIColor cyanColor];
bvc.btnTitleArr = @[@"張三", @"李四", @"王五"];
bvc.indicatorColor = [UIColor yellowColor];
bvc.isIndicatorHidden = YES;
bvc.headImage_H = 100;
bvc.button_H = 30;
bvc.headImageName = @"picture_3";
bvc.isStretch = NO;

2.注意:自定義的controller 必須繼承于FMBaseTableViewController.h,

  • 子控制器類型1 :FMTableViewStylePlain 初始化代碼如下:
FMT2ViewController *t2 = [[FMT2ViewController alloc] initWithTableViewStyle:FMTableViewStylePlain];
或者(default)
FMT1ViewController *t1 = [[FMT1ViewController alloc] init];
  • 子控制器類型2:FMTableViewStyleGroup 初始化代碼如下:
FMT2ViewController *t2 = [[FMT2ViewController alloc] initWithTableViewStyle:FMTableViewStyleGrouped];
或者(用屬性修改)
FMT1ViewController *t2 = [[FMT1ViewController alloc] init];
t2.tableViewStyle = FMTableViewStyleGrouped;

3.頭部視圖是否可以拉伸:

isStretch 屬性(default is YES)
  • 測試效果查看,在AppDelegate.m 的launch函數(shù)中添加(或替換)如下代碼:
FMBaseViewController *bvc = [[FMBaseViewController alloc] init];
    self.window.rootViewController = bvc;
    [self.window makeKeyAndVisible];
  • 自定義子controller初始化后傳入該數(shù)組childVCArr隙袁,示例代碼如下:
    FMBaseViewController *bvc = [[FMBaseViewController alloc] init];
    FMT1ViewController *t1 = [[FMT1ViewController alloc] init];
    FMT2ViewController *t2 = [[FMT2ViewController alloc] initWithTableViewStyle:FMTableViewStyleGrouped];
    FMT3ViewController *t3= [[FMT3ViewController alloc] init];
    bvc.childVCArr = @[t1, t2, t3];

子控制器最好不要超過5個痰娱, 暫不支持滑動(以后可能添加,敬請期待F惺铡)

  • headView上的內(nèi)容可自定義添加梨睁,通過 ftc.headView可拿到head部分的視圖添加自己的控件。
  • 支持cocoaPods 安裝
pod search FMHoverScrollKit
在Podfile中添加
pod "FMHoverScrollKit"
pod install || pod update

2018.08.01更新

增加對UICollectionView的支持娜饵,controller必須繼承自FMBaseCollectionViewController

*示例代碼

    FMT1ViewController *t1 = [[FMT1ViewController alloc] init];
    t1.tableViewStyle = FMTableViewStyleGrouped;
    FMC1ViewController *c1 = [[FMC1ViewController alloc] init];
    FMT3ViewController *t3= [[FMT3ViewController alloc] init];

效果示例 - 全collectionView

collectionSupport1.gif

效果示例 - collectionView 和 tableView混合

collectionSupport.gif

github Demo下載地址

點(diǎn)擊去下載

  • (第一次寫簡書坡贺,多多指教)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子遍坟,更是在濱河造成了極大的恐慌拳亿,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,640評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件愿伴,死亡現(xiàn)場離奇詭異风瘦,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)公般,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評論 3 395
  • 文/潘曉璐 我一進(jìn)店門万搔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人官帘,你說我怎么就攤上這事瞬雹。” “怎么了刽虹?”我有些...
    開封第一講書人閱讀 165,011評論 0 355
  • 文/不壞的土叔 我叫張陵酗捌,是天一觀的道長。 經(jīng)常有香客問我涌哲,道長胖缤,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,755評論 1 294
  • 正文 為了忘掉前任阀圾,我火速辦了婚禮哪廓,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘初烘。我一直安慰自己涡真,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,774評論 6 392
  • 文/花漫 我一把揭開白布肾筐。 她就那樣靜靜地躺著哆料,像睡著了一般。 火紅的嫁衣襯著肌膚如雪吗铐。 梳的紋絲不亂的頭發(fā)上东亦,一...
    開封第一講書人閱讀 51,610評論 1 305
  • 那天,我揣著相機(jī)與錄音唬渗,去河邊找鬼典阵。 笑死,一個胖子當(dāng)著我的面吹牛谣妻,可吹牛的內(nèi)容都是我干的萄喳。 我是一名探鬼主播,決...
    沈念sama閱讀 40,352評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼蹋半,長吁一口氣:“原來是場噩夢啊……” “哼他巨!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,257評論 0 276
  • 序言:老撾萬榮一對情侶失蹤染突,失蹤者是張志新(化名)和其女友劉穎捻爷,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體份企,經(jīng)...
    沈念sama閱讀 45,717評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡也榄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,894評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了司志。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片甜紫。...
    茶點(diǎn)故事閱讀 40,021評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖骂远,靈堂內(nèi)的尸體忽然破棺而出囚霸,到底是詐尸還是另有隱情,我是刑警寧澤激才,帶...
    沈念sama閱讀 35,735評論 5 346
  • 正文 年R本政府宣布拓型,位于F島的核電站,受9級特大地震影響瘸恼,放射性物質(zhì)發(fā)生泄漏劣挫。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,354評論 3 330
  • 文/蒙蒙 一东帅、第九天 我趴在偏房一處隱蔽的房頂上張望压固。 院中可真熱鬧,春花似錦冰啃、人聲如沸邓夕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,936評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至点弯,卻和暖如春扇调,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背抢肛。 一陣腳步聲響...
    開封第一講書人閱讀 33,054評論 1 270
  • 我被黑心中介騙來泰國打工狼钮, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人捡絮。 一個月前我還...
    沈念sama閱讀 48,224評論 3 371
  • 正文 我出身青樓熬芜,卻偏偏與公主長得像,于是被迫代替她去往敵國和親福稳。 傳聞我的和親對象是個殘疾皇子涎拉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,974評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器鼓拧,智...
    卡卡羅2017閱讀 134,657評論 18 139
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫半火、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,105評論 4 62
  • Spring Boot 參考指南 介紹 轉(zhuǎn)載自:https://www.gitbook.com/book/qbgb...
    毛宇鵬閱讀 46,822評論 6 342
  • 丙申暮春季俩,騎一匹老馬 任時光頹廢钮糖,回到唐朝,回到魏晉 飛云江慢慢為我流向東海酌住,把酒臨風(fēng) 石頭花開店归,我是個風(fēng)一樣自由...
    溫州慕白閱讀 433評論 0 2
  • 中秋佳節(jié),最讓我思念的不是月餅酪我,而是那鮮嫩肥美的上海大閘蟹娱节。。祭示。 在加州肄满,往年雖然吃不到大閘蟹,鮮美的珍寶蟹(Du...
    漾漾美味閱讀 1,126評論 3 2