UITableView視差效果的封裝

關于tableView視差效果弱恒,我們來封裝一下茧痒。</br>
具體實現(xiàn)思路請看:</br>

  1. http://www.reibang.com/p/00f069c91bea</br>
  2. http://www.lrymlt.cn/blog/?p=109

一. 在工程中新建一個繼承于UITableView的類楣铁,在.m中重寫初始化方法千诬。

在初始化方法中注冊已經(jīng)寫好的cell静袖,并設置self為代理人阻星,簽

    - (instancetype)initWithFrame:(CGRect)frame style:(UITableViewStyle)style
    {
        self = [super initWithFrame:frame style:style];

        if (self) {
    
            [self registerClass:[LTParallaxCell class] forCellReuseIdentifier:@"mycell"];
    
            self.delegate   = self;
            self.dataSource = self;
    
            self.separatorStyle = UITableViewCellSeparatorStyleNone;
            // 設置默認cell高度
            self.cellHeight     = 200;
            // 設置默認imageView高度
            self.imageHeight    = 300;
        }

        return self;
    }

二. 在.h文件中聲明幾個屬性丁侄,方便用戶對樣式做基本設置惯雳。

    /** 數(shù)據(jù)源數(shù)組,存儲圖片名稱或地址 */
    @property (nonatomic, strong) NSArray *sourceArray;

    /** 數(shù)據(jù)源數(shù)組 */
    @property (nonatomic, strong) NSArray *titleSourceArray;

    /** cell的高度 */
    @property (nonatomic, assign) CGFloat cellHeight;

    /** 圖片高度 */
    @property (nonatomic, assign) CGFloat imageHeight;

    /** 是否包含標題 */
    @property (nonatomic, assign) BOOL isHasTitle;

    /** 標題背景色 */
    @property (nonatomic, strong) UIColor *titleBackgroundColor;

    /** 標題文字顏色 */
    @property (nonatomic, strong) UIColor *titleTextColor;

三. 實現(xiàn)幾個代理方法

    - (void) updateImageViewOffsetOfCell:(LTParallaxCell *)cell
    {
        // 獲取當前cell的偏移量
        CGFloat cellY = cell.frame.origin.y - self.contentOffset.y;
        // 計算圖片最大的偏移量范圍
        CGFloat imgMaxHeight = [cell imageOverflowHeight];
        // 計算圖片偏移量
        CGFloat offset = 0.0f - imgMaxHeight * cellY / self.frame.size.height;

        [cell setImageOffset:CGPointMake(0.0f, offset)];
    }

    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
    {
        return 1;
    }

    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        return _cellHeight;
    }

    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        return _sourceArray.count;
    }

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        LTParallaxCell *cell        = [self dequeueReusableCellWithIdentifier:@"mycell"];

        cell.mainImageView.image    = [UIImage imageNamed:[_sourceArray objectAtIndex:indexPath.row]];

        cell.selectionStyle         = UITableViewCellSelectionStyleNone;

        cell.clipsToBounds          = YES;

        cell.imageViewHeight        = _imageHeight;

        if (_isHasTitle != 0) {
    
            cell.isHasTitle = _isHasTitle;
    
        }

        if (_titleSourceArray != nil) {
    
            cell.titleLabel.text = [_titleSourceArray objectAtIndex:indexPath.row];
    
        }

        if (_titleBackgroundColor != nil) {
    
            cell.titleBackgroundColor = _titleBackgroundColor;
    
        }

        return cell;
    }

    - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
    {
        [self updateImageViewOffsetOfCell:(LTParallaxCell *)cell];
    }

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView
    {
        for (LTParallaxCell *cell in self.visibleCells) {
    
            [self updateImageViewOffsetOfCell:cell];
    
        }
    }

四. 在原有cell基礎上增加幾個屬性并重寫set方法

    /** 標題背景色 */
    @property (nonatomic, strong) UIColor *titleBackgroundColor;

    /** 標題文字顏色 */
    @property (nonatomic, strong) UIColor *titleTextColor;

    /** 圖片高度 */
    @property (nonatomic, assign) CGFloat imageViewHeight;

    /** cell高度 */
    @property (nonatomic, assign) CGFloat cellHeight;

set方法實現(xiàn)如下:

    /**
     *  isHasTitle的set方法
     *
     *  @param isHasTitle
     */
    - (void)setIsHasTitle:(BOOL)isHasTitle
    {
        if (_isHasTitle != isHasTitle) {
    
            _isHasTitle = isHasTitle;
    
            // 判斷有標題鸿摇,則將titleLabel控件添加到圖層中
            if (_isHasTitle) {
        
                _titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 80, [UIScreen mainScreen].bounds.size.width, 40)];
        
                _titleLabel.text = @"這是圖片上的文字";
        
                _titleLabel.textAlignment = 1;
        
                [self.contentView addSubview:_titleLabel];
        
            }
        }
    }

    - (void)setTitleBackgroundColor:(UIColor *)titleBackgroundColor
    {
        if (_titleBackgroundColor != titleBackgroundColor) {
    
            _titleBackgroundColor = titleBackgroundColor;
    
        }

        _titleLabel.backgroundColor = titleBackgroundColor;
    }

    /**
    *  設置圖片高度
    *
    *  @param imageViewHeight 圖片高度
    */
    -(void)setImageViewHeight:(CGFloat)imageViewHeight
    {
        if (_imageViewHeight != imageViewHeight) {
    
            _imageViewHeight = imageViewHeight;
    
            // 將圖片高度修改為用戶設置
            _mainImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [[UIScreen mainScreen] bounds].size.width , _imageViewHeight)];
    
        }
    }

封裝好的代碼地址:https://github.com/menglingtong/LTParallaxTableView/tree/master

五. 調(diào)用方法
使用起來就很簡單了石景,將頭文件引入到VC中,按照我們開放好的接口挨個設置就好啦拙吉!例如:

LTParallaxTableView *tableView = [[LTParallaxTableView alloc] initWithFrame:self.view.frame style:UITableViewStylePlain];

// 設置包含標題
tableView.isHasTitle        = YES;
// 將圖片數(shù)組傳入
    tableView.sourceArray       = sourceArr;
// 將標題數(shù)組傳入
tableView.titleSourceArray  = titleSourceArr;
// 設置cell的高度
tableView.cellHeight        = 200;
// 設置imageView的高度
tableView.imageHeight       = 300;
// 設置標題背景顏色
tableView.titleBackgroundColor = [UIColor colorWithRed:0.36 green:0.72 blue:0.33 alpha:0.40];

[self.view addSubview:tableView];
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末潮孽,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子筷黔,更是在濱河造成了極大的恐慌往史,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,576評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件佛舱,死亡現(xiàn)場離奇詭異椎例,居然都是意外死亡挨决,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評論 3 399
  • 文/潘曉璐 我一進店門订歪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來脖祈,“玉大人,你說我怎么就攤上這事刷晋「歉撸” “怎么了?”我有些...
    開封第一講書人閱讀 168,017評論 0 360
  • 文/不壞的土叔 我叫張陵眼虱,是天一觀的道長喻奥。 經(jīng)常有香客問我,道長蒙幻,這世上最難降的妖魔是什么映凳? 我笑而不...
    開封第一講書人閱讀 59,626評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮邮破,結(jié)果婚禮上诈豌,老公的妹妹穿的比我還像新娘。我一直安慰自己抒和,他們只是感情好矫渔,可當我...
    茶點故事閱讀 68,625評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著摧莽,像睡著了一般庙洼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上镊辕,一...
    開封第一講書人閱讀 52,255評論 1 308
  • 那天油够,我揣著相機與錄音,去河邊找鬼征懈。 笑死石咬,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的卖哎。 我是一名探鬼主播鬼悠,決...
    沈念sama閱讀 40,825評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼亏娜!你這毒婦竟也來了焕窝?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,729評論 0 276
  • 序言:老撾萬榮一對情侶失蹤维贺,失蹤者是張志新(化名)和其女友劉穎它掂,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體溯泣,經(jīng)...
    沈念sama閱讀 46,271評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡虐秋,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,363評論 3 340
  • 正文 我和宋清朗相戀三年晰韵,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片熟妓。...
    茶點故事閱讀 40,498評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡雪猪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出起愈,到底是詐尸還是另有隱情只恨,我是刑警寧澤,帶...
    沈念sama閱讀 36,183評論 5 350
  • 正文 年R本政府宣布抬虽,位于F島的核電站官觅,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏阐污。R本人自食惡果不足惜休涤,卻給世界環(huán)境...
    茶點故事閱讀 41,867評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望笛辟。 院中可真熱鬧功氨,春花似錦、人聲如沸手幢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,338評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽围来。三九已至跺涤,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間监透,已是汗流浹背桶错。 一陣腳步聲響...
    開封第一講書人閱讀 33,458評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留胀蛮,地道東北人院刁。 一個月前我還...
    沈念sama閱讀 48,906評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像醇滥,于是被迫代替她去往敵國和親黎比。 傳聞我的和親對象是個殘疾皇子超营,可洞房花燭夜當晚...
    茶點故事閱讀 45,507評論 2 359

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

  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫鸳玩、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,119評論 4 61
  • 國家電網(wǎng)公司企業(yè)標準(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報批稿:20170802 前言: 排版 ...
    庭說閱讀 11,004評論 6 13
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理演闭,服務發(fā)現(xiàn)不跟,斷路器,智...
    卡卡羅2017閱讀 134,697評論 18 139
  • 作者碎碎念:此乃世紀大坑 慢慢填 一篇文章三到四首歌 不專業(yè)米碰,不會寫樂評窝革,正在努力學習中购城。以小故事和聽后感為主。 ...
    舒嘉儀閱讀 612評論 0 0
  • 孟河是一個村子虐译,不是一條河瘪板。但確實有一條河繞了大半個村子,這條河沒有名字漆诽,村子里最老的老人也從沒提過它的名字...
    月亮像銀子閱讀 882評論 2 1