版本記錄
| 版本號(hào) | 時(shí)間 |
|---|---|
| V1.0 | 2017.05.28 |
前言
在我們的app項(xiàng)目中，為了增加和用戶很好的交互能力细疚，通常都需要加一些提示圖蔗彤，比如說，當(dāng)我們需要網(wǎng)絡(luò)加載數(shù)據(jù)的時(shí)候疯兼，首先要監(jiān)測網(wǎng)絡(luò)然遏，如果網(wǎng)絡(luò)斷開的時(shí)候，我們需要提示用戶吧彪；還有一個(gè)場景就是登陸的時(shí)候待侵，需要提示用戶正在登錄中和登錄成功；再比如清除用戶的緩存數(shù)據(jù)成功的時(shí)候姨裸，也需要進(jìn)行清除成功的提示的秧倾，等等】酰總之中狂，用的場景很多，好的提示圖可以增強(qiáng)和用戶的交互體驗(yàn)扑毡，試想胃榕，如果沒有網(wǎng)絡(luò)，也不提示用戶瞄摊，用戶還以為還在登錄勋又，過了一會(huì)還是上不去，那可能用戶就瘋掉了换帜，怒刪app了楔壤。最近做的幾個(gè)項(xiàng)目中也是對這個(gè)要求的也很多，在實(shí)際應(yīng)用中可以自己寫惯驼，也可以使用第三方框架蹲嚣，比較知名的比如MBProgressHUD和SVProgressHUD，從這一篇開始我就一點(diǎn)一點(diǎn)的介紹它們以及它們的使用方法祟牲，希望對大家有所幫助隙畜，那我們就開始嘍。先給出github地址：
MBProgressHUD github
感興趣可以先看上一篇
1.提示圖顯示篇之MBProgressHUD（一）
這一篇將對MBProgreeHUD的結(jié)構(gòu)和模式等基本概念進(jìn)行介紹说贝。
詳情
在我們使用MBProgreeHUD之前我們需要先了解一下它的幾個(gè)概念议惰。我們首先要記住的是它是UIView的子類，也就是說它就是一個(gè)特殊的自定義View乡恕。
一言询、模式
MBProgreeHUD有很多不同的指示模式俯萎，有餅狀的，條狀的运杭，還有系統(tǒng)默認(rèn)的菊花狀的等等夫啊，在代碼里面是以枚舉的方式體現(xiàn)的，如下所示：
typedef enum {
//1. 默認(rèn)模式,使用系統(tǒng)自帶的指示器 ,不能顯示進(jìn)度,只能不停地轉(zhuǎn)呀轉(zhuǎn)
MBProgressHUDModeIndeterminate,
// 2. 用餅狀圖顯示進(jìn)度
MBProgressHUDModeDeterminate,
//3. 進(jìn)度條
MBProgressHUDModeDeterminateHorizontalBar,
//4. 圓環(huán)
MBProgressHUDModeAnnularDeterminate,
//5. 自定義視圖
MBProgressHUDModeCustomView,
//6. 只顯示文字
MBProgressHUDModeText
} MBProgressHUDMode;
可見這里的模式是可以自定義的辆憔，還可以是使用系統(tǒng)的涮母，下面就分別介紹這幾種模式。
- 1.MBProgressHUDModeIndeterminate
//系統(tǒng)自帶模式
MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
HUD.mode = MBProgressHUDModeIndeterminate;
[self.view addSubview:HUD];
[HUD showAnimated:YES];
[HUD hideAnimated:YES afterDelay:3.0];
圖案是下邊這樣的
- 2.MBProgressHUDModeDeterminate
//餅狀圖的樣式
MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
HUD.mode = MBProgressHUDModeDeterminate;
[self.view addSubview:HUD];
[HUD showAnimated:YES];
[HUD hideAnimated:YES afterDelay:3.0];
圖案是下邊這樣的
這里沒有給進(jìn)度躁愿，所以看起來像是環(huán)狀叛本，但是確實(shí)是餅狀的以后會(huì)給大家演示。
- 3.MBProgressHUDModeDeterminateHorizontalBar
//條狀圖的樣式
MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
HUD.mode = MBProgressHUDModeDeterminateHorizontalBar;
[self.view addSubview:HUD];
[HUD showAnimated:YES];
[HUD hideAnimated:YES afterDelay:3.0];
圖案是下邊這樣的
這里我沒有給進(jìn)度參數(shù)progress所以是中空的彤钟。
- 4.MBProgressHUDModeAnnularDeterminate
//環(huán)狀圖的樣式
MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
HUD.mode = MBProgressHUDModeAnnularDeterminate;
[self.view addSubview:HUD];
[HUD showAnimated:YES];
[HUD hideAnimated:YES afterDelay:3.0];
圖案是下邊這樣的
- 5.MBProgressHUDModeCustomView
//自定義視圖的樣式
UIImageView *imageView = [[UIImageView alloc] init];
imageView.image = [UIImage imageNamed:@"global"];
MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
HUD.mode = MBProgressHUDModeCustomView;
HUD.customView = imageView;
HUD.label.text = @"全球化";
HUD.detailsLabel.text = @"我們一起參與";
[self.view addSubview:HUD];
[HUD showAnimated:YES];
[HUD hideAnimated:YES afterDelay:3.0];
圖案是下邊這樣的
- 6.MBProgressHUDModeText
//只顯示文字
MBProgressHUD *HUD = [[MBProgressHUD alloc] initWithView:self.view];
HUD.mode = MBProgressHUDModeText;
HUD.label.text = @"全球化";
HUD.detailsLabel.text = @"我們一起參與";
[self.view addSubview:HUD];
[HUD showAnimated:YES];
[HUD hideAnimated:YES afterDelay:3.0];
圖案是下邊這樣的
二来候、組成
MBProgressHUD由指示器,文本框,詳情文本框,背景框4個(gè)部分組成。
我們還以下邊這個(gè)圖案進(jìn)行說明逸雹。
這里的圖片就相當(dāng)于指示器营搅，等同于上面那幾種模式中的菊花等，如果是自定義的視圖梆砸，需要傳一個(gè)屬性值customView转质，它繼承于UIView，所以傳一個(gè)UIImageView也是可以的帖世。
"全球化”這里就是文本框label休蟹，相當(dāng)于cell的主標(biāo)題一樣，與它相關(guān)的屬性如下：
//文本
@property (copy) NSString *labelText;
//文本字體
@property (MB_STRONG) UIFont* labelFont;
//文本顏色
@property (MB_STRONG) UIColor* labelColor;
- “我們一起參與”就相當(dāng)于詳細(xì)文本框detailLabel日矫，與它相關(guān)的屬性赂弓，如下：
//詳細(xì)文本框的文字
@property (copy) NSString *detailsLabelText;
//詳細(xì)文本框的字體
@property (MB_STRONG) UIFont* detailsLabelFont;
//詳細(xì)文本框的文字顏色
@property (MB_STRONG) UIColor* detailsLabelColor;
- 灰色的背景其實(shí)就是這里的背景框，它可以設(shè)置透明度哪轿，顏色盈魁，等等。與其相關(guān)的屬性如下所示窃诉。
// 背景框的透明度杨耙，默認(rèn)值是0.8
@property (assign) float opacity;
// 背景框的顏色, 如果設(shè)置了這個(gè)屬性，則opacity屬性會(huì)失效飘痛，即不會(huì)有半透明效果
@property (MB_STRONG) UIColor *color;
// 背景框的圓角半徑珊膜。默認(rèn)值是10.0
@property (assign) float cornerRadius;
// 菊花的顏色票编，默認(rèn)是白色
@property (MB_STRONG) UIColor *activityIndicatorColor;
后記
這一篇我們主要介紹了MBProgressHUD的模式和組成，并且簡單說明了相關(guān)組成的單元屬性凡桥，下一篇我會(huì)接著給大家介紹毛秘。謝謝大家掖疮，端午第一天假期愉快盼玄。
