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閱讀 229,732評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,214評論 3 426
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,781評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,588評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,315評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,699評論 1 327
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,698評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,882評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,441評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,189評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,388評論 1 372
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,933評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,613評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,023評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,310評論 1 293
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,112評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,334評論 2 377

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,162評論 4 61
  • 欄目緣起:慢私塾「有一個朋友」領受天命,純粹的宇宙意識從那光芒萬丈的源頭出發,暖意融融,只是流淌。流淌。流淌。衷心...
    dc012dc63302閱讀 321評論 0 0
  • 我們每個人對抗的 都是全世界。 你順從自己的內心?還是順應外部的環境? 似乎有點唯心主義了,人都是順從世界,然后擁...
    4d8ef48cfd78閱讀 208評論 1 1
  • 根據輸入框內的時間日期,獲得該日期前6天的日期; 得到該時間近一周的日期: 我原先寫了得到前一天的函數: 在使用過...
    httIsHere閱讀 286評論 0 0
  • “學而則思不罔,思而則學不殆”。一本書能否發揮它本身的益處,就要看讀者對它的感悟程度。 ...
    一處落英閱讀 372評論 0 1