美文网首页小知识点好东西
iOS源码解析之--MJRefresh

iOS源码解析之--MJRefresh

作者: iOS_肖晨 | 来源:发表于2017-12-07 13:40 被阅读34次

    博主写的特别棒,在此收藏一遍以防丢失,供自己学习参考之用。链接如下:
    MJRefresh源码解析

    MJRefresh是李明杰老师的作品,到现在已经有9800多颗star了,是一个简单实用,功能强大的iOS下拉刷新(也支持上拉加载更多)控件。它的可定制性很高,几乎可以满足大部分下拉刷新的设计需求,值得学习。

    该框架的结构设计得很清晰,使用一个基类MJRefreshComponent来做一些基本的设定,然后通过继承的方式,让MJRefreshHeaderMJRefreshFooter分别具备下拉刷新和上拉加载的功能。从继承机构来看可以分为三层,具体可以从下面的图里看出来:

    框架组织结构图.png

    首先来看一下该控件的基类:MJRefreshComponent:

    MJRefreshComponent

    这个类作为该控件的基类,涵盖了基类所具备的一些:状态,回调block等,大致分成下面这5种职能:

    1. 声明控件的所有状态。
    2. 声明控件的回调函数。
    3. 添加监听。
    4. 提供刷新,停止刷新接口。
    5. 提供子类需要实现的方法。

    职能如何实现?

    1. 声明控件的所有状态

    /** 刷新控件的状态 */
    typedef NS_ENUM(NSInteger, MJRefreshState) {
        /** 普通闲置状态 */
        MJRefreshStateIdle = 1,
        /** 松开就可以进行刷新的状态 */
        MJRefreshStatePulling,
        /** 正在刷新中的状态 */
        MJRefreshStateRefreshing,
        /** 即将刷新的状态 */
        MJRefreshStateWillRefresh,
        /** 所有数据加载完毕,没有更多的数据了 */
        MJRefreshStateNoMoreData
    };
    

    2. 声明控件的回调函数

    /** 进入刷新状态的回调 */
    typedef void (^MJRefreshComponentRefreshingBlock)(void);
    /** 开始刷新后的回调(进入刷新状态后的回调) */
    typedef void (^MJRefreshComponentbeginRefreshingCompletionBlock)(void);
    /** 结束刷新后的回调 */
    typedef void (^MJRefreshComponentEndRefreshingCompletionBlock)(void);
    

    3. 添加监听

    监听的声明:

    - (void)addObservers
    {
        NSKeyValueObservingOptions options = NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld;
        [self.scrollView addObserver:self forKeyPath:MJRefreshKeyPathContentOffset options:options context:nil];
        [self.scrollView addObserver:self forKeyPath:MJRefreshKeyPathContentSize options:options context:nil];
        self.pan = self.scrollView.panGestureRecognizer;
        [self.pan addObserver:self forKeyPath:MJRefreshKeyPathPanState options:options context:nil];
    }
    

    对于监听的处理:

    - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context
    {
        // 遇到这些情况就直接返回
        if (!self.userInteractionEnabled) return;
        
        // 这个就算看不见也需要处理
        if ([keyPath isEqualToString:MJRefreshKeyPathContentSize]) {
            [self scrollViewContentSizeDidChange:change];
        }
        
        // 看不见
        if (self.hidden) return;
        if ([keyPath isEqualToString:MJRefreshKeyPathContentOffset]) {
            [self scrollViewContentOffsetDidChange:change];
        } else if ([keyPath isEqualToString:MJRefreshKeyPathPanState]) {
            [self scrollViewPanStateDidChange:change];
        }
    }
    

    4. 提供刷新,停止刷新接口

    #pragma mark 进入刷新状态
    - (void)beginRefreshing
    {
        [UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
            self.alpha = 1.0;
        }];
        self.pullingPercent = 1.0;
        // 只要正在刷新,就完全显示
        if (self.window) {
            self.state = MJRefreshStateRefreshing;
        } else {
            // 预防正在刷新中时,调用本方法使得header inset回置失败
            if (self.state != MJRefreshStateRefreshing) {
                self.state = MJRefreshStateWillRefresh;
                // 刷新(预防从另一个控制器回到这个控制器的情况,回来要重新刷新一下)
                [self setNeedsDisplay];
            }
        }
    }
    
    - (void)beginRefreshingWithCompletionBlock:(void (^)(void))completionBlock
    {
        self.beginRefreshingCompletionBlock = completionBlock;
        
        [self beginRefreshing];
    }
    
    #pragma mark 结束刷新状态
    - (void)endRefreshing
    {
        dispatch_async(dispatch_get_main_queue(), ^{
            self.state = MJRefreshStateIdle;
        });
    }
    
    - (void)endRefreshingWithCompletionBlock:(void (^)(void))completionBlock
    {
        self.endRefreshingCompletionBlock = completionBlock;
        
        [self endRefreshing];
    }
    

    5. 提供子类需要实现的方法

    /** 初始化 */
    - (void)prepare NS_REQUIRES_SUPER;
    /** 摆放子控件frame */
    - (void)placeSubviews NS_REQUIRES_SUPER;
    /** 当scrollView的contentOffset发生改变的时候调用 */
    - (void)scrollViewContentOffsetDidChange:(NSDictionary *)change NS_REQUIRES_SUPER;
    /** 当scrollView的contentSize发生改变的时候调用 */
    - (void)scrollViewContentSizeDidChange:(NSDictionary *)change NS_REQUIRES_SUPER;
    /** 当scrollView的拖拽状态发生改变的时候调用 */
    - (void)scrollViewPanStateDidChange:(NSDictionary *)change NS_REQUIRES_SUPER;
    

    从上面等结构图可以看出,紧接着这个基类,下面分为MJRefreshHeaderMJRefreshFooter,这里顺着MJRefreshHeader这个分支向下展开:

    MJRefreshHeader

    MJRefreshHeader继承于MJRefreshComponent,它做了这几件事:

    有哪些职能?

    1. 初始化。
    2. 设置header高度。
    3. 重新调整y值。
    4. 根据contentOffset的变化,来切换状态(默认状态,可以刷新的状态,正在刷新的状态),实现方法是:scrollViewContentOffsetDidChange:
    5. 在切换状态时,执行相应的操作。实现方法是:setState:

    职能如何实现?

    1. 初始化

    初始化有两种方法:

    + (instancetype)headerWithRefreshingBlock:(MJRefreshComponentRefreshingBlock)refreshingBlock
    {
        MJRefreshHeader *cmp = [[self alloc] init];
        cmp.refreshingBlock = refreshingBlock;
        return cmp;
    }
    + (instancetype)headerWithRefreshingTarget:(id)target refreshingAction:(SEL)action
    {
        MJRefreshHeader *cmp = [[self alloc] init];
        [cmp setRefreshingTarget:target refreshingAction:action];
        return cmp;
    }
    

    2. 设置header高度

    通过重写prepare方法来设置header的高度:

    - (void)prepare
    {
        [super prepare];
        
        // 设置key
        self.lastUpdatedTimeKey = MJRefreshHeaderLastUpdatedTimeKey;
        
        // 设置高度
        self.mj_h = MJRefreshHeaderHeight;
    }
    

    3. 重新调整y值

    通过重写placeSubviews方法来重新调整y值:

    - (void)placeSubviews
    {
        [super placeSubviews];
        
        // 设置y值(当自己的高度发生改变了,肯定要重新调整Y值,所以放到placeSubviews方法中设置y值)
        self.mj_y = - self.mj_h - self.ignoredScrollViewContentInsetTop;
    }
    

    4. 状态切换的代码:

    - (void)scrollViewContentOffsetDidChange:(NSDictionary *)change
    {
        [super scrollViewContentOffsetDidChange:change];
        
        // 在刷新的refreshing状态
        if (self.state == MJRefreshStateRefreshing) {
    //        if (self.window == nil) return;
            
            // sectionheader停留解决
            CGFloat insetT = - self.scrollView.mj_offsetY > _scrollViewOriginalInset.top ? - self.scrollView.mj_offsetY : _scrollViewOriginalInset.top;
            insetT = insetT > self.mj_h + _scrollViewOriginalInset.top ? self.mj_h + _scrollViewOriginalInset.top : insetT;
            self.scrollView.mj_insetT = insetT;
            
            self.insetTDelta = _scrollViewOriginalInset.top - insetT;
            return;
        }
        
        // 跳转到下一个控制器时,contentInset可能会变
         _scrollViewOriginalInset = self.scrollView.mj_inset;
        
        // 当前的contentOffset
        CGFloat offsetY = self.scrollView.mj_offsetY;
        // 头部控件刚好出现的offsetY
        CGFloat happenOffsetY = - self.scrollViewOriginalInset.top;
        
        // 如果是向上滚动到看不见头部控件,直接返回
        // >= -> >
        if (offsetY > happenOffsetY) return;
        
        // 普通 和 即将刷新 的临界点
        CGFloat normal2pullingOffsetY = happenOffsetY - self.mj_h;
        CGFloat pullingPercent = (happenOffsetY - offsetY) / self.mj_h;
        
        if (self.scrollView.isDragging) { // 如果正在拖拽
            self.pullingPercent = pullingPercent;
            if (self.state == MJRefreshStateIdle && offsetY < normal2pullingOffsetY) {
                // 转为即将刷新状态
                self.state = MJRefreshStatePulling;
            } else if (self.state == MJRefreshStatePulling && offsetY >= normal2pullingOffsetY) {
                // 转为普通状态
                self.state = MJRefreshStateIdle;
            }
        } else if (self.state == MJRefreshStatePulling) {// 即将刷新 && 手松开
            // 开始刷新
            [self beginRefreshing];
        } else if (pullingPercent < 1) {
            self.pullingPercent = pullingPercent;
        }
    }
    

    需要注意三点:

    1. 这里的状态有三种:默认状态(MJRefreshStateIdle),可以刷新的状态(MJRefreshStatePulling)以及正在刷新的状态(MJRefreshStateRefreshing)。
    2. 状态切换的因素有两个:一个是下拉的距离是否超过临界值,另一个是 手指是否离开屏幕。
    3. 注意:可以刷新的状态和正在刷新的状态是不同的。因为在手指还贴在屏幕的时候是不能进行刷新的。所以即使在下拉的距离超过了临界距离(状态栏 + 导航栏 + header高度),如果手指没有离开屏幕,那么也不能马上进行刷新,而是将状态切换为:可以刷新。一旦手指离开了屏幕,马上将状态切换为正在刷新。

    这里提供一张图来体现三个状态的不同:


    三个状态.png

    5. 状态切换时的相应操作:

    - (void)setState:(MJRefreshState)state
    {
        MJRefreshCheckState
        
        // 根据状态做事情
        if (state == MJRefreshStateIdle) {
            if (oldState != MJRefreshStateRefreshing) return;
            
            // 保存刷新时间
            [[NSUserDefaults standardUserDefaults] setObject:[NSDate date] forKey:self.lastUpdatedTimeKey];
            [[NSUserDefaults standardUserDefaults] synchronize];
            
            // 恢复inset和offset
            [UIView animateWithDuration:MJRefreshSlowAnimationDuration animations:^{
                self.scrollView.mj_insetT += self.insetTDelta;
                
                // 自动调整透明度
                if (self.isAutomaticallyChangeAlpha) self.alpha = 0.0;
            } completion:^(BOOL finished) {
                self.pullingPercent = 0.0;
                
                if (self.endRefreshingCompletionBlock) {
                    self.endRefreshingCompletionBlock();
                }
            }];
        } else if (state == MJRefreshStateRefreshing) {
             dispatch_async(dispatch_get_main_queue(), ^{
                [UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
                    CGFloat top = self.scrollViewOriginalInset.top + self.mj_h;
                    // 增加滚动区域top
                    self.scrollView.mj_insetT = top;
                    // 设置滚动位置
                    CGPoint offset = self.scrollView.contentOffset;
                    offset.y = -top;
                    [self.scrollView setContentOffset:offset animated:NO];
                } completion:^(BOOL finished) {
                    [self executeRefreshingCallback];
                }];
             });
        }
    }
    

    这里需要注意两点:

    1. 这里状态的切换,主要围绕着两种:默认状态和正在刷新状态。也就是针对开始刷新和结束刷新这两个切换点。
    2. 从正在刷新状态状态切换为默认状态时(结束刷新),需要记录刷新结束的时间。因为header里面有一个默认的label是用来显示上次刷新的时间的。

    MJRefreshStateHeader

    这个类是MJRefreshHeader类的子类,它做了两件事:

    有哪些职能?

    1. 简单布局了stateLabellastUpdatedTimeLabel
    2. 根据控件状态的切换(默认状态,正在刷新状态),实现了这两个label显示的文字的切换。
      给一张图,让大家直观感受一下这两个控件:


      两个Label.png

    职能如何实现?

    这个类通过覆盖父类三个方法来实现上述两个实现:

    方法1:prepare方法

    - (void)prepare
    {
        [super prepare];
        
        // 初始化间距
        self.labelLeftInset = MJRefreshLabelLeftInset;
        
        // 初始化文字
        [self setTitle:[NSBundle mj_localizedStringForKey:MJRefreshHeaderIdleText] forState:MJRefreshStateIdle];
        [self setTitle:[NSBundle mj_localizedStringForKey:MJRefreshHeaderPullingText] forState:MJRefreshStatePulling];
        [self setTitle:[NSBundle mj_localizedStringForKey:MJRefreshHeaderRefreshingText] forState:MJRefreshStateRefreshing];
    }
    

    在这里,将每一个状态对应的提示文字放入一个字典里面,key是状态的NSNumber形式。

    - (void)setTitle:(NSString *)title forState:(MJRefreshState)state
    {
        if (title == nil) return;
        self.stateTitles[@(state)] = title;
        self.stateLabel.text = self.stateTitles[@(self.state)];
    }
    

    方法2:placeSubviews方法

    - (void)placeSubviews
    {
        [super placeSubviews];
        
        if (self.stateLabel.hidden) return;
        
        BOOL noConstrainsOnStatusLabel = self.stateLabel.constraints.count == 0;
        
        if (self.lastUpdatedTimeLabel.hidden) {
            // 状态
            if (noConstrainsOnStatusLabel) self.stateLabel.frame = self.bounds;
        } else {
            CGFloat stateLabelH = self.mj_h * 0.5;
            // 状态
            if (noConstrainsOnStatusLabel) {
                self.stateLabel.mj_x = 0;
                self.stateLabel.mj_y = 0;
                self.stateLabel.mj_w = self.mj_w;
                self.stateLabel.mj_h = stateLabelH;
            }
            
            // 更新时间
            if (self.lastUpdatedTimeLabel.constraints.count == 0) {
                self.lastUpdatedTimeLabel.mj_x = 0;
                self.lastUpdatedTimeLabel.mj_y = stateLabelH;
                self.lastUpdatedTimeLabel.mj_w = self.mj_w;
                self.lastUpdatedTimeLabel.mj_h = self.mj_h - self.lastUpdatedTimeLabel.mj_y;
            }
        }
    }
    

    这里主要是对lastUpdatedTimeLabelstateLabel进行布局。要注意lastUpdatedTimeLabel隐藏的情况。

    方法3: setState:方法

    - (void)setState:(MJRefreshState)state
    {
        MJRefreshCheckState
        
        // 设置状态文字
        self.stateLabel.text = self.stateTitles[@(state)];
        
        // 重新设置key(重新显示时间)
        self.lastUpdatedTimeKey = self.lastUpdatedTimeKey;
    }
    

    在这里,根据传入的state的不同,在stateLabellastUpdatedTimeLabel里切换相应的文字。

    • stateLabel里的文字直接从stateTitles字典里取出即可。
      < - lastUpdatedTimeLabel里的文字需要通过一个方法来取出即可。
    - (void)setLastUpdatedTimeKey:(NSString *)lastUpdatedTimeKey
    {
        [super setLastUpdatedTimeKey:lastUpdatedTimeKey];
        
        // 如果label隐藏了,就不用再处理
        if (self.lastUpdatedTimeLabel.hidden) return;
        
        NSDate *lastUpdatedTime = [[NSUserDefaults standardUserDefaults] objectForKey:lastUpdatedTimeKey];
        
        // 如果有block
        if (self.lastUpdatedTimeText) {
            self.lastUpdatedTimeLabel.text = self.lastUpdatedTimeText(lastUpdatedTime);
            return;
        }
        
        if (lastUpdatedTime) {
            // 1.获得年月日
            NSCalendar *calendar = [self currentCalendar];
            NSUInteger unitFlags = NSCalendarUnitYear| NSCalendarUnitMonth | NSCalendarUnitDay |NSCalendarUnitHour |NSCalendarUnitMinute;
            NSDateComponents *cmp1 = [calendar components:unitFlags fromDate:lastUpdatedTime];
            NSDateComponents *cmp2 = [calendar components:unitFlags fromDate:[NSDate date]];
            
            // 2.格式化日期
            NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
            BOOL isToday = NO;
            if ([cmp1 day] == [cmp2 day]) { // 今天
                formatter.dateFormat = @" HH:mm";
                isToday = YES;
            } else if ([cmp1 year] == [cmp2 year]) { // 今年
                formatter.dateFormat = @"MM-dd HH:mm";
            } else {
                formatter.dateFormat = @"yyyy-MM-dd HH:mm";
            }
            NSString *time = [formatter stringFromDate:lastUpdatedTime];
            
            // 3.显示日期
            self.lastUpdatedTimeLabel.text = [NSString stringWithFormat:@"%@%@%@",
                                              [NSBundle mj_localizedStringForKey:MJRefreshHeaderLastTimeText],
                                              isToday ? [NSBundle mj_localizedStringForKey:MJRefreshHeaderDateTodayText] : @"",
                                              time];
        } else {
            self.lastUpdatedTimeLabel.text = [NSString stringWithFormat:@"%@%@",
                                              [NSBundle mj_localizedStringForKey:MJRefreshHeaderLastTimeText],
                                              [NSBundle mj_localizedStringForKey:MJRefreshHeaderNoneLastDateText]];
        }
    }
    

    在这里注意两点:

    1. 作者通过使用block来让用户自己定义日期现实的格式,如果用户没有自定义,就使用作者提供的默认格式。
    2. 在默认格式的设置里,判断了是否是今日,是否是今年的情况。在以后设计显示时间的labe的时候可以借鉴一下。

    MJRefreshNormalHeader

    MJRefreshNormalHeader 继承于 MJRefreshStateHeader,它主要做了两件事:

    有哪些职能?

    1. 它在MJRefreshStateHeader上添加了_arrowViewloadingView
    2. 布局了这两个view并在Refresh控件的状态切换的时候改变这两个view的样式。
      还是给一张图来直观感受一下这两个view:


      两个view.png

    职能如何实现?

    同MJRefreshStateHeader一样,也是重写了父类的三个方法:

    方法1:prepare

    - (void)prepare
    {
        [super prepare];
        
        self.activityIndicatorViewStyle = UIActivityIndicatorViewStyleGray;
    }
    

    方法2:placeSubviews

    - (void)placeSubviews
    {
        [super placeSubviews];
        
        // 箭头的中心点
        CGFloat arrowCenterX = self.mj_w * 0.5;
        if (!self.stateLabel.hidden) {
            CGFloat stateWidth = self.stateLabel.mj_textWith;
            CGFloat timeWidth = 0.0;
            if (!self.lastUpdatedTimeLabel.hidden) {
                timeWidth = self.lastUpdatedTimeLabel.mj_textWith;
            }
            CGFloat textWidth = MAX(stateWidth, timeWidth);
            arrowCenterX -= textWidth / 2 + self.labelLeftInset;
        }
        CGFloat arrowCenterY = self.mj_h * 0.5;
        CGPoint arrowCenter = CGPointMake(arrowCenterX, arrowCenterY);
        
        // 箭头
        if (self.arrowView.constraints.count == 0) {
            self.arrowView.mj_size = self.arrowView.image.size;
            self.arrowView.center = arrowCenter;
        }
            
        // 圈圈
        if (self.loadingView.constraints.count == 0) {
            self.loadingView.center = arrowCenter;
        }
        
        self.arrowView.tintColor = self.stateLabel.textColor;
    }
    

    在这里注意一点:因为stateLabellastUpdatedTimeLabel是上下并排分布的,而arrowViewloadingView是在这二者的左边,所以为了避免这两组重合,在计算arrowViewloadingViewcenter的时候,需要获取stateLabellastUpdatedTimeLabel两个控件的宽度并比较大小,将较大的一个作为两个label的‘最宽距离’,再计算center,这样一来就不会重合了。
    而对于如何计算宽度,作者给出了一个方案,大家可以在以后的实践中使用。

    - (CGFloat)mj_textWith {
        CGFloat stringWidth = 0;
        CGSize size = CGSizeMake(MAXFLOAT, MAXFLOAT);
        if (self.text.length > 0) {
    #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 70000
            stringWidth =[self.text
                          boundingRectWithSize:size
                          options:NSStringDrawingUsesLineFragmentOrigin
                          attributes:@{NSFontAttributeName:self.font}
                          context:nil].size.width;
    #else
            
            stringWidth = [self.text sizeWithFont:self.font
                                 constrainedToSize:size
                                     lineBreakMode:NSLineBreakByCharWrapping].width;
    #endif
        }
        return stringWidth;
    }
    

    方法3: setState:

    - (void)setState:(MJRefreshState)state
    {
        MJRefreshCheckState
        
        // 根据状态做事情
        if (state == MJRefreshStateIdle) {
            if (oldState == MJRefreshStateRefreshing) {
                self.arrowView.transform = CGAffineTransformIdentity;
                
                [UIView animateWithDuration:MJRefreshSlowAnimationDuration animations:^{
                    self.loadingView.alpha = 0.0;
                } completion:^(BOOL finished) {
                    // 如果执行完动画发现不是idle状态,就直接返回,进入其他状态
                    if (self.state != MJRefreshStateIdle) return;
                    
                    self.loadingView.alpha = 1.0;
                    [self.loadingView stopAnimating];
                    self.arrowView.hidden = NO;
                }];
            } else {
                [self.loadingView stopAnimating];
                self.arrowView.hidden = NO;
                [UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
                    self.arrowView.transform = CGAffineTransformIdentity;
                }];
            }
        } else if (state == MJRefreshStatePulling) {
            [self.loadingView stopAnimating];
            self.arrowView.hidden = NO;
            [UIView animateWithDuration:MJRefreshFastAnimationDuration animations:^{
                self.arrowView.transform = CGAffineTransformMakeRotation(0.000001 - M_PI);
            }];
        } else if (state == MJRefreshStateRefreshing) {
            self.loadingView.alpha = 1.0; // 防止refreshing -> idle的动画完毕动作没有被执行
            [self.loadingView startAnimating];
            self.arrowView.hidden = YES;
        }
    }
    

    到此为止,我们已经从MJRefreshComponentMJRefreshNormalHeader的实现过程看了一遍。可以看出,作者将prepareplaceSubviews以及setState:方法作为基类的方法,让下面的子类去一层一层实现。

    而每一层的子类,根据自身的职责,分别按照自己的方式来实现这三个方法:

    • MJRefreshHeader:负责header的高度和调整header自身在外部的位置。
      MJRefreshStateHeader:负责header内部的stateLabellastUpdatedTimeLabel的布局和不同状态下内部文字的显示。
      MJRefreshNormalHeader:负责header内部的loadingView以及arrowView的布局和不同状态下的显示。

    这样做的好处是,如果想要增加某种类型的header,只要在某一层上做文章即可。例如该框架里的MJRefreshGifHeader,它和MJRefreshNormalHeader属于同一级,都是继承于MJRefreshStateHeader。因为二者都具有相同形式的stateLabellastUpdatedTimeLabel,唯一不同的就是左侧的部分:

    • MJRefreshNormalHeader的左侧是箭头。
    • MJRefreshGifHeader的左侧则是一个gif动画。
      还是提供一张图来直观感受一下:
      normalHeader 与 gifHeader.png
      下面我们来看一下的实现:

    MJRefreshGifHeader

    它提供了两个接口,是用来设置不同状态下使用的图片数组的:

    - (void)setImages:(NSArray *)images duration:(NSTimeInterval)duration forState:(MJRefreshState)state 
    { 
        if (images == nil) return; 
        
        self.stateImages[@(state)] = images; 
        self.stateDurations[@(state)] = @(duration); 
        
        /* 根据图片设置控件的高度 */ 
        UIImage *image = [images firstObject]; 
        if (image.size.height > self.mj_h) { 
            self.mj_h = image.size.height; 
        } 
    }
    
    - (void)setImages:(NSArray *)images forState:(MJRefreshState)state 
    { 
        [self setImages:images duration:images.count * 0.1 forState:state]; 
    }
    

    有哪些职能?

    然后,和MJRefreshNormalHeader一样,它也重写了基类提供的三个方法来实现显示gif图片的职能。

    职能如何实现?

    1. 初始化和label的间距

    - (void)prepare
    {
        [super prepare];
        
        // 初始化间距
        self.labelLeftInset = 20;
    }
    

    2. 根据label的宽度和存在与否设置gif的位置

    - (void)placeSubviews
    {
        [super placeSubviews];
        
        if (self.gifView.constraints.count) return;
        
        self.gifView.frame = self.bounds;
        if (self.stateLabel.hidden && self.lastUpdatedTimeLabel.hidden) {
            self.gifView.contentMode = UIViewContentModeCenter;
        } else {
            self.gifView.contentMode = UIViewContentModeRight;
            
            CGFloat stateWidth = self.stateLabel.mj_textWith;
            CGFloat timeWidth = 0.0;
            if (!self.lastUpdatedTimeLabel.hidden) {
                timeWidth = self.lastUpdatedTimeLabel.mj_textWith;
            }
            CGFloat textWidth = MAX(stateWidth, timeWidth);
            self.gifView.mj_w = self.mj_w * 0.5 - textWidth * 0.5 - self.labelLeftInset;
        }
    }
    

    3. 根据传入状态的不同来设置动画

    - (void)setState:(MJRefreshState)state
    {
        MJRefreshCheckState
        
        // 根据状态做事情
        if (state == MJRefreshStatePulling || state == MJRefreshStateRefreshing) {
            NSArray *images = self.stateImages[@(state)];
            if (images.count == 0) return;
            
            [self.gifView stopAnimating];
            if (images.count == 1) { // 单张图片
                self.gifView.image = [images lastObject];
            } else { // 多张图片
                self.gifView.animationImages = images;
                self.gifView.animationDuration = [self.stateDurations[@(state)] doubleValue];
                [self.gifView startAnimating];
            }
        } else if (state == MJRefreshStateIdle) {
            [self.gifView stopAnimating];
        }
    }
    

    Footer类是用来处理上拉加载的,实现原理和下拉刷新很类似,在这里先不介绍了~

    总的来说,该框架设计得非常工整:通过一个基类来定义一些状态和一些需要子类实现的接口。通过一层一层地继承,让每一层的子类各司其职,只完成真正属于自己的任务,提高了框架的可定制性,而且对于功能的扩展和bug的追踪也很有帮助,非常值得我们参考与借鉴。

    相关文章

      网友评论

        本文标题:iOS源码解析之--MJRefresh

        本文链接:https://www.haomeiwen.com/subject/qtuqixtx.html