MJRefresh阅读笔记

李明杰老师的代表作之一MJRefresh可以说是棒棒的,很多小伙伴都会在没有什么特殊要求的情况下使用这个框架,简单好用,功能还丰富,我也是用了很久,最近项目不是很忙,决定研究一下老师的设计思路。

这个框架第一遍看的时候我是懵逼的,一句代码要跳转很多类,看的晕头转向,造成这个原因主要是因为李老师的框架设计采用继承的方式,有一个基类MJRefreshComponent,然后所以类都是继承于它,每个子类实现不同的功能,如此一层层继承下去,这样的做的好处方便扩展,如果你想要自定义某些东西的时候,可以选择一个子类继承,然后在原有的基础上加东西,很方便。什么意思呢,比方说A类实现的a功能,B类继承于A类,它实现了b功能,C类继承于B类,实现了c功能,那么现在创建一个D类,继承于C类,那么这个D类同时拥有的a,b,c三个功能,如有你不想拥有c功能,这个时候你可以让D类继承于B类,那么D类就只拥有a和b两个功能,在此基础上你可以自己再添加e,f,g等等功能,这样做方便扩展。我是这么理解的,如果有不对的地方,欢迎大家指正,共同学习。那么下面进入正题了。


这张图是在其他文章里看到,清楚的介绍了这个框架的结构,下面我们具体看看都做了啥。

基类MJRefreshComponent继承与UIView,它主要做了哪么事呢?

1.定义了刷新的所有状态,一共6种

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.初始化方法

- (instancetype)initWithFrame:(CGRect)frame

{

    if (self = [super initWithFrame:frame]) {

        // 准备工作

        [self prepare];

         // 默认是普通状态

        self.state = MJRefreshStateIdle;

    }

    return self;

}

4.添加了对scrollView属性的监听,刷新功能主要是利用scrollView的三个属性来实现的, contentOffset:scrollView的偏移量,contentSize:内容大小,contentInset:内容距离上下左右的距离,正在刷新的时候刷新控件会在顶部停留,刷新之后刷新控件会上移消失,这个效果就是通过设置contentInset的top来实现的,后面会具体说道,如果对这三个属性的用法不太了解,最好先去写个scorllView研究一下这三个属性具体干嘛的,不然后面的介绍可能会比较不好理解。

- (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];

}

5.留给子类实现的接口

- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change{}
- (void)scrollViewContentSizeDidChange:(NSDictionary *)change{}
- (void)scrollViewPanStateDidChange:(NSDictionary *)change{}

6.所有子类都实现的一个方法,所有子类根据不同的状态做出不同的响应都是通过- (void)setState:(MJRefreshState)state这个方法来实现的

- (void)setState:(MJRefreshState)state

{ _state = state;

// 加入主队列的目的是等setState:方法调用完毕、设置完文字后再去布局子控件

dispatch_async(dispatch_get_main_queue(), ^{

        [self setNeedsLayout];

    });

}我们看一下这个方法里面就几行代码,第一句_state = state;就是简单的赋值,然后是一个GCD知识,开启一个异步任务,将block添加到主队列里,异步任务的特点就是不用等到它执行完就可以执行下面的任务,所有代码会继续往下走,之后才执行 [self setNeedsLayout];这句代码,这样的做的目的是等setState:方法调用完毕、设置完文字后再去布局子控件。

7.提供了开始很暂停刷新的接口

- (void)beginRefreshing;
- (void)endRefreshing;

MJRefreshComponent这个类下面分出来两条线MJRefreshHeader和MJRefreshFooter,顾名思义一个是下来刷新,一个是上拉加载对应的head和foot。我们看一下MJRefreshHeader这个类都干嘛了,MJRefreshFooter这个类对比着学习就行了。

MJRefreshHeade主要做了那些事?

1.设置了初始化方法

+ (instancetype)headerWithRefreshingBlock:(MJRefreshComponentRefreshingBlock)refreshingBlock
{
    MJRefreshHeader *cmp = [[self alloc] init];
    //cmp.backgroundColor = [UIColor blueColor];
    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.设置了head的高度

- (void)placeSubviews

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

    self.mj_y = - self.mj_h - self.ignoredScrollViewContentInsetTop;

}

3.滑动的回调方法- (void)scrollViewContentOffsetDidChange:(NSDictionary *)change,只要偏移量发生变化就会掉这个方法,这个方法的绑定是在父类的kvo里面。具体代码逻辑

- (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;

    }

}

4.根据不同的状态设置不同的效果还是调用- (void)setState:(MJRefreshState)state方法

- (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];

            }];

        });

    }

}

接下来就到了MJRefreshStateHeader这个类

MJRefreshStateHeader继承于MJRefreshHeader,它的作用是给刷新控件添加了两个label,一个显示刷新状态,一个显示上次刷新时间,具体看一下里面的代码。

1.首先将所有状态对应的文字添加到字典stateTitles中,这样做的目的是根据不同的状态取出对应的文字内容。

    // 初始化文字

    [self setTitle:[NSBundle mj_localizedStringForKey:MJRefreshHeaderIdleText] forState:MJRefreshStateIdle];

    [self setTitle:[NSBundle mj_localizedStringForKey:MJRefreshHeaderPullingText] forState:MJRefreshStatePulling];

    [self setTitle:[NSBundle mj_localizedStringForKey:MJRefreshHeaderRefreshingText] forState:MJRefreshStateRefreshing];

- (void)setTitle:(NSString *)title forState:(MJRefreshState)state

{

    if (title == nil) return;

    self.stateTitles[@(state)] = title;

    self.stateLabel.text = self.stateTitles[@(self.state)];

}

2.关于更新时间的格式处理

- (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]];

    }


}这里面有一段代码if (self.lastUpdatedTimeText) {

        self.lastUpdatedTimeLabel.text = self.lastUpdatedTimeText(lastUpdatedTime);

        return;

    },这段代码的作用是让用户可以自定义事件格式,如果你不想用它的。


最后就是MJRefreshNormalHeader这个类了

MJRefreshNormalHeader继承于MJRefreshStateHeader,它主要是给刷新视图添加了箭头指示和菊花。

1.布局箭头和菊花

- (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;

 }

2.根据不同的状态显示不同的效果

- (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;

    }

}

这就是整个下拉刷新大致的流程

MJRefreshComponent------>>>>MJRefreshHeader----->>>>>MJRefreshStateHeader----->>>>MJRefreshNormalHeader

通过继承,每个子类实现各自的功能,从而完成一个完整地刷新操作。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 141,390评论 1 297
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 60,682评论 1 254
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 93,205评论 0 211
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 40,718评论 0 171
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,406评论 1 250
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,590评论 1 170
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,271评论 2 267
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,052评论 0 163
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,801评论 6 227
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,404评论 0 212
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,176评论 2 212
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,489评论 1 222
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,156评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,031评论 2 210
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,402评论 3 201
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,583评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 25,927评论 0 163
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,352评论 2 228
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,478评论 2 229

推荐阅读更多精彩内容