MBProgressHUD

[TOC]

MBProgressHUD 是iOS 第三方Hub 框控件喇肋。

結(jié)構(gòu)

控件組成

在MBProgressHUD(以下簡稱MB)中hub 的結(jié)構(gòu)是由幾部分組成的

  • indicatorView 展示菊花农渊,進(jìn)度條等樣式的視圖雇逞。根據(jù)不同mode來創(chuàng)建不同的View麻裁。
  • backgroundView背景View期升,處理暗色拜姿,或者模糊樣式峻汉,對應(yīng)類MBBackgroundView
typedef NS_ENUM(NSInteger, MBProgressHUDBackgroundStyle) {
    MBProgressHUDBackgroundStyleSolidColor,
    MBProgressHUDBackgroundStyleBlur
};
  • label 加載框下方的描述信息
  • detailsLabel 描述信息下面的詳細(xì)描述信息
  • actionButton 在提供一個操作的button

樣式

在MBProgressHUD(以下簡稱MB)的頭文件中描述了幾種樣式

typedef NS_ENUM(NSInteger, MBProgressHUDMode) {
    /// 無限菊花樣式.
    MBProgressHUDModeIndeterminate,
    /// 圓形進(jìn)度條樣式.
    MBProgressHUDModeDeterminate,
    /// 橫向滾動進(jìn)度條樣式.
    MBProgressHUDModeDeterminateHorizontalBar,
    /// 圓形進(jìn)度條樣式.和第二個有點(diǎn)不同
    MBProgressHUDModeAnnularDeterminate,
    /// 自定義View的樣式
    MBProgressHUDModeCustomView,
    /// 只有文字的樣式.
    MBProgressHUDModeText
};

MB 通過MBProgressHUDMode來創(chuàng)建不同展示Hub

- (void)updateIndicators {
    UIView *indicator = self.indicator;
    BOOL isActivityIndicator = [indicator isKindOfClass:[UIActivityIndicatorView class]];
    BOOL isRoundIndicator = [indicator isKindOfClass:[MBRoundProgressView class]];

    MBProgressHUDMode mode = self.mode;
    if (mode == MBProgressHUDModeIndeterminate) {
        if (!isActivityIndicator) {
            // Update to indeterminate indicator
            [indicator removeFromSuperview];
            indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
            [(UIActivityIndicatorView *)indicator startAnimating];
            [self.bezelView addSubview:indicator];
        }
    }
    else if (mode == MBProgressHUDModeDeterminateHorizontalBar) {
        // Update to bar determinate indicator
        [indicator removeFromSuperview];
        indicator = [[MBBarProgressView alloc] init];
        [self.bezelView addSubview:indicator];
    }
    else if (mode == MBProgressHUDModeDeterminate || mode == MBProgressHUDModeAnnularDeterminate) {
        if (!isRoundIndicator) {
            // Update to determinante indicator
            [indicator removeFromSuperview];
            indicator = [[MBRoundProgressView alloc] init];
            [self.bezelView addSubview:indicator];
        }
        if (mode == MBProgressHUDModeAnnularDeterminate) {
            [(MBRoundProgressView *)indicator setAnnular:YES];
        }
    } 
    else if (mode == MBProgressHUDModeCustomView && self.customView != indicator) {
        // Update custom view indicator
        [indicator removeFromSuperview];
        indicator = self.customView;
        [self.bezelView addSubview:indicator];
    }
    else if (mode == MBProgressHUDModeText) {
        [indicator removeFromSuperview];
        indicator = nil;
    }
    indicator.translatesAutoresizingMaskIntoConstraints = NO;
    self.indicator = indicator;

    if ([indicator respondsToSelector:@selector(setProgress:)]) {
        [(id)indicator setValue:@(self.progress) forKey:@"progress"];
    }

    [indicator setContentCompressionResistancePriority:998.f forAxis:UILayoutConstraintAxisHorizontal];
    [indicator setContentCompressionResistancePriority:998.f forAxis:UILayoutConstraintAxisVertical];

    [self updateViewsForColor:self.contentColor];
    [self setNeedsUpdateConstraints];
}

具體實(shí)現(xiàn)

MB 的實(shí)現(xiàn)比較樸實(shí)贴汪,沒有過多花哨的技巧,簡單實(shí)用休吠。
展示的流程大概是這樣的

  1. 通過initWithWindowinitWithView來創(chuàng)建Hub 扳埂,這里的Window和View不是MB 來添加的父視圖而是算確定frame的視圖
  2. 通過showHUDAddedTo來將Hub 添加到指定的父視圖。
  3. 調(diào)用showAnimated通過指定動畫來展示出Hub
  4. 實(shí)用hideAnimated來指定動畫消失

其他

MB 通過通知UIApplicationDidChangeStatusBarOrientationNotification來處理屏幕轉(zhuǎn)屏事件

- (void)registerForNotifications {
#if !TARGET_OS_TV
    NSNotificationCenter *nc = [NSNotificationCenter defaultCenter];

    [nc addObserver:self selector:@selector(statusBarOrientationDidChange:)
               name:UIApplicationDidChangeStatusBarOrientationNotification object:nil];
#endif
}

MB 的MBProgressHUDModeDeterminateHorizontalBar模式是通過drawrect 來繪制的瘤礁,對應(yīng)類是MBBarProgressView 阳懂,determinanteMode對應(yīng)類MBRoundProgressView

總結(jié)

優(yōu)點(diǎn)

  1. MB 的View層級靈活柜思,可以放到不同的View 或者Window 中岩调,而SVPoregress卻不行
  2. MB 的CustomView可以自定義視圖,相對比SVProgress定制性要高

缺點(diǎn)
1赡盘、 MB 的動畫用的是drawrect 而非CALayer 相對沒那么高效

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末号枕,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子陨享,更是在濱河造成了極大的恐慌葱淳,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件抛姑,死亡現(xiàn)場離奇詭異赞厕,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)定硝,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進(jìn)店門皿桑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事诲侮《婆埃” “怎么了?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵浆西,是天一觀的道長粉私。 經(jīng)常有香客問我顽腾,道長近零,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任抄肖,我火速辦了婚禮久信,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘漓摩。我一直安慰自己裙士,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布管毙。 她就那樣靜靜地躺著腿椎,像睡著了一般。 火紅的嫁衣襯著肌膚如雪夭咬。 梳的紋絲不亂的頭發(fā)上啃炸,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天,我揣著相機(jī)與錄音卓舵,去河邊找鬼南用。 笑死,一個胖子當(dāng)著我的面吹牛掏湾,可吹牛的內(nèi)容都是我干的裹虫。 我是一名探鬼主播,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼融击,長吁一口氣:“原來是場噩夢啊……” “哼筑公!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起尊浪,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤十酣,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后际长,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體耸采,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年工育,在試婚紗的時候發(fā)現(xiàn)自己被綠了虾宇。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡如绸,死狀恐怖嘱朽,靈堂內(nèi)的尸體忽然破棺而出旭贬,到底是詐尸還是另有隱情,我是刑警寧澤搪泳,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布稀轨,位于F島的核電站,受9級特大地震影響岸军,放射性物質(zhì)發(fā)生泄漏奋刽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一艰赞、第九天 我趴在偏房一處隱蔽的房頂上張望佣谐。 院中可真熱鬧,春花似錦方妖、人聲如沸狭魂。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽雌澄。三九已至,卻和暖如春杯瞻,著一層夾襖步出監(jiān)牢的瞬間镐牺,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工又兵, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留任柜,地道東北人。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓沛厨,卻偏偏與公主長得像宙地,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子逆皮,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評論 2 349

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

  • 源碼來源:gitHub源碼 轉(zhuǎn)載于: CocoaChina 來源:南峰子的技術(shù)博客 版本:0.9.1 MBPr...
    李小六_閱讀 6,425評論 2 5
  • - (void)testMBProgressHUD { NSLog(@"test MBProgressHUD ")...
    有偶像包袱的程序狗閱讀 1,539評論 0 1
  • 前言 作為初學(xué)者,想要快速提高自己的水平,閱讀一些優(yōu)秀的第三方源代碼是一個非常好的途徑.通過看別人的代碼,可以學(xué)習(xí)...
    __微涼閱讀 48,676評論 16 203
  • 11月的最后一天 學(xué)習(xí)了社群營銷知識 一個可以盈利的正確社群需要做到以下過程:社群策劃-文案引流-群員篩選-運(yùn)用社...
    candymoon閱讀 112評論 0 0
  • 1.我沒更新就是因為懶 上次寫了篇《如果你有長長的望遠(yuǎn)鏡电谣,我希望你用它來教孩子們看星星》秽梅,第二天就被邀請開通...
    離人心上秋11閱讀 256評論 0 1