版本記錄
| 版本號 | 時間 |
|---|---|
| V1.0 | 2017.05.28 |
前言
在我們的app項目中，為了增加和用戶很好的交互能力，通常都需要加一些提示圖，比如說，當(dāng)我們需要網(wǎng)絡(luò)加載數(shù)據(jù)的時候，首先要監(jiān)測網(wǎng)絡(luò)，如果網(wǎng)絡(luò)斷開的時候，我們需要提示用戶；還有一個場景就是登陸的時候，需要提示用戶正在登錄中和登錄成功；再比如清除用戶的緩存數(shù)據(jù)成功的時候，也需要進行清除成功的提示的，等等。總之，用的場景很多，好的提示圖可以增強和用戶的交互體驗，試想，如果沒有網(wǎng)絡(luò)，也不提示用戶，用戶還以為還在登錄，過了一會還是上不去，那可能用戶就瘋掉了，怒刪app了。最近做的幾個項目中也是對這個要求的也很多，在實際應(yīng)用中可以自己寫，也可以使用第三方框架，比較知名的比如MBProgressHUD和SVProgressHUD，從這一篇開始我就一點一點的介紹它們以及它們的使用方法，希望對大家有所幫助，那我們就開始嘍。先給出github地址：
MBProgressHUD github
感興趣可以先看上一篇
1.提示圖顯示篇之MBProgressHUD（一）
這一篇將對MBProgreeHUD的結(jié)構(gòu)和模式等基本概念進行介紹。
詳情
在我們使用MBProgreeHUD之前我們需要先了解一下它的幾個概念。我們首先要記住的是它是UIView的子類，也就是說它就是一個特殊的自定義View。
一、模式
MBProgreeHUD有很多不同的指示模式，有餅狀的，條狀的，還有系統(tǒng)默認(rèn)的菊花狀的等等，在代碼里面是以枚舉的方式體現(xiàn)的，如下所示：
typedef enum {
//1. 默認(rèn)模式,使用系統(tǒng)自帶的指示器 ,不能顯示進度,只能不停地轉(zhuǎn)呀轉(zhuǎn)
MBProgressHUDModeIndeterminate,
// 2. 用餅狀圖顯示進度
MBProgressHUDModeDeterminate,
//3. 進度條
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];
圖案是下邊這樣的
這里沒有給進度，所以看起來像是環(huán)狀，但是確實是餅狀的以后會給大家演示。
- 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];
圖案是下邊這樣的
這里我沒有給進度參數(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個部分組成。
我們還以下邊這個圖案進行說明。
這里的圖片就相當(dāng)于指示器，等同于上面那幾種模式中的菊花等，如果是自定義的視圖，需要傳一個屬性值customView，它繼承于UIView，所以傳一個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)于詳細文本框detailLabel，與它相關(guān)的屬性，如下：
//詳細文本框的文字
@property (copy) NSString *detailsLabelText;
//詳細文本框的字體
@property (MB_STRONG) UIFont* detailsLabelFont;
//詳細文本框的文字顏色
@property (MB_STRONG) UIColor* detailsLabelColor;
- 灰色的背景其實就是這里的背景框，它可以設(shè)置透明度，顏色，等等。與其相關(guān)的屬性如下所示。
// 背景框的透明度，默認(rèn)值是0.8
@property (assign) float opacity;
// 背景框的顏色, 如果設(shè)置了這個屬性，則opacity屬性會失效，即不會有半透明效果
@property (MB_STRONG) UIColor *color;
// 背景框的圓角半徑。默認(rèn)值是10.0
@property (assign) float cornerRadius;
// 菊花的顏色，默認(rèn)是白色
@property (MB_STRONG) UIColor *activityIndicatorColor;
后記
這一篇我們主要介紹了MBProgressHUD的模式和組成，并且簡單說明了相關(guān)組成的單元屬性，下一篇我會接著給大家介紹。謝謝大家，端午第一天假期愉快。
