iOS MBProgressHUD 源码泛读

<code>MBProgressHUD</code>源码通读。

<code>MBProgressHUD</code>是一个简单的在app里面弹出tost的开源库,可以显示进度条,菊花,文字,等等。直接看<code>git</code>就很容易上手使用。

因为项目中使用到了,敢完一期需求巴拉巴拉一下源码。

<code>.h</code>文件中的定义。

///显示样式
MBProgressHUDMode
///动画样式
MBProgressHUDAnimation

///view 定义
MBProgressHUD

///条状进度条定义
MBBarProgressView

///环状进度条定义
MBRoundProgressView

应用中如果有要使用进度条的的地方,可以直接从源码中抠出<code>MBBarProgressView</code>或者<code> MBRoundProgressView </code>修改使用。

先 巴拉一下进度条的实现,比如:<code>MBBarProgressView</code>

定义如下:

@interface MBBarProgressView : UIView

//进度 0 到 1 之间
@property (nonatomic, assign) float progress;

//边线颜色
@property (nonatomic, MB_STRONG) UIColor *lineColor;

//背景色
@property (nonatomic, MB_STRONG) UIColor *progressRemainingColor;

//进度条的颜色
@property (nonatomic, MB_STRONG) UIColor *progressColor;

@end

实现比较简单,默认的宽高是120 * 20

- (id)init {
    return [self initWithFrame:CGRectMake(.0f, .0f, 120.0f, 20.0f)];
}

初始化方法只是简单的设置一些默认值,还有注册<code>kvo</code>

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _progress = 0.f;
        _lineColor = [UIColor whiteColor];
        _progressColor = [UIColor whiteColor];
        _progressRemainingColor = [UIColor clearColor];
        self.backgroundColor = [UIColor clearColor];
        self.opaque = NO;
        [self registerForKVO];
    }
    return self;
}

进度条的实现是通过<code>drawRect</code>方法,画上去的,有空可以细细的研究一番。

所有属性变化都是通过kvo来监听的,然后强制调用一下draw方法。

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();

- (void)registerForKVO {
    for (NSString *keyPath in [self observableKeypaths]) {
        [self addObserver:self forKeyPath:keyPath options:NSKeyValueObservingOptionNew context:NULL];
    }
}

- (void)unregisterFromKVO {
    for (NSString *keyPath in [self observableKeypaths]) {
        [self removeObserver:self forKeyPath:keyPath];
    }
}

- (NSArray *)observableKeypaths {
    return [NSArray arrayWithObjects:@"lineColor", @"progressRemainingColor", @"progressColor", @"progress", nil];
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
    [self setNeedsDisplay];
}

<strong>到此,一个简单的进度条就实现了。</strong>以后可以借鉴,毕竟,这么人使用过。。。MBRoundProgressView 进度条实现方法基本一致,只是大小和 画图的地方不一样。

<code> MBProgressHUD </code> 的组成

label
detailsLabel
Indicator

其中 <code>Indicator</code>可以是

UIActivityIndicatorView
MBBarProgressView
MBRoundProgressView

或者自定义的一个view

<code> MBProgressHUD </code> 并没有使用 <code>autolayout</code>,而是使用 <code>frame</code> 直接设置位置, 位置的设置 是在 <code>layoutSubviews</code>中完成的,
布局完成后会记录总共的使用的<code>size</code>
<code>self.size = totalSize;</code>这是为了绘制黑色背景部分记录的。

绘制背景依旧在<code>drawRect</code>方法中。

属性的改变也是通过kvo 来监听的,变化了就调用布局和绘制方法,

- (void)updateUIForKeypath:(NSString *)keyPath {
    if ([keyPath isEqualToString:@"mode"] || [keyPath isEqualToString:@"customView"]) {
        [self updateIndicators];
    } else if ([keyPath isEqualToString:@"labelText"]) {
        label.text = self.labelText;
    } else if ([keyPath isEqualToString:@"labelFont"]) {
        label.font = self.labelFont;
    } else if ([keyPath isEqualToString:@"detailsLabelText"]) {
        detailsLabel.text = self.detailsLabelText;
    } else if ([keyPath isEqualToString:@"detailsLabelFont"]) {
        detailsLabel.font = self.detailsLabelFont;
    } else if ([keyPath isEqualToString:@"progress"]) {
        if ([indicator respondsToSelector:@selector(setProgress:)]) {
            [(id)indicator setProgress:progress];
        }
        return;
    }
    [self setNeedsLayout];
    [self setNeedsDisplay];
}

代码整体难度不大,但是在项目中使用广泛。

我们的项目从头到尾只使用了菊花和问题的样式,所以,进度条那些完全可以自己剔除掉。个人愚见。。

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

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • 栏目缘起:慢私塾「有一个朋友」领受天命,纯粹的宇宙意识从那光芒万丈的源头出发,暖意融融,只是流淌。流淌。流淌。衷心...
    dc012dc63302阅读 296评论 0 0
  • 我们每个人对抗的 都是全世界。 你顺从自己的内心?还是顺应外部的环境? 似乎有点唯心主义了,人都是顺从世界,然后拥...
    4d8ef48cfd78阅读 201评论 1 1
  • 根据输入框内的时间日期,获得该日期前6天的日期; 得到该时间近一周的日期: 我原先写了得到前一天的函数: 在使用过...
    httIsHere阅读 270评论 0 0
  • “学而则思不罔,思而则学不殆”。一本书能否发挥它本身的益处,就要看读者对它的感悟程度。 ...
    一处落英阅读 365评论 0 1