WechatIMG29.jpeg

假如你拿到這樣的設(shè)計圖，你第一反應(yīng)是什么呢？是不是覺得沒什么特別啊，就一個普普通通的view，實現(xiàn)起來也不會有什么難??！老實說，我也是這樣想的，可是我的組長一定要我用MBProgressHUD去實現(xiàn)哦。媽媽咪，這不是為難我嗎？本來我對MBProgressHUD的實現(xiàn)原因就不了解，還要我去改它的第三方庫，不過也是，正因為我不理解，讓我去改改就會了解。

1.彈框離界面的左右邊距192px的實現(xiàn)

這個我看了MBProgressHUD好久，一直不知道怎樣去改，因為- (void)updateConstraints方法中的NSLayoutConstraint *padding = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:subviews[idx - 1] attribute:NSLayoutAttributeBottom multiplier:1.f constant:0.f];這些，我真的看不懂，不過好彩嘗試通過給detailLabel添加約束。我這個主要是要限定最大的寬度的，所以采用以下判斷來布局。

CGFloat textWidth = [msg boundingRectWithSize:CGSizeMake(MAXFLOAT, 33) options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading | NSStringDrawingTruncatesLastVisibleLine attributes:@{NSFontAttributeName: [UIFont systemFontOfSize:15]} context:nil].size.width;
    
if (textWidth > (SCREEN_WIDTH - 100 - 40)) {
    [hud.detailsLabel mas_makeConstraints:^(MASConstraintMaker *make) {
         make.width.equalTo(@(SCREEN_WIDTH - 100 - 40));
    }];
}

實質(zhì)是黑色的彈框的大小是依據(jù)中間的detailsLabel的寬度來做約束的，所以你只要限制中間detailsLabel的寬度就可以了。

2.圖片大小的限定

首先，要實現(xiàn)圖片的顯示，MBProgressHUD的mode要設(shè)置為MBProgressHUDModeCustomView。要限定圖片大小，有以下兩種方法：
1.MBProgressHUD是根據(jù)你給定的圖片大小來約束大小，所以你要圖片顯示多大，你就叫UI給你這種尺寸的切圖就可以了。
2.自己通過代碼縮小圖片

#pragma mark - 等比例去壓縮圖片大小
- (UIImage *)scaleImage:(UIImage *)originImage toWidth:(CGFloat)width
{
     if (width > originImage.size.width) {
            return originImage;
    }

    CGFloat height = (width / originImage.size.width) * originImage.size.height;

    CGRect  rect = CGRectMake(0, 0, width, height);

    UIGraphicsBeginImageContext(rect.size);

    [originImage drawInRect:rect];

    UIImage * image = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return image;

}

3.用MBProgressHUD做自定義動畫

hud.mode = MBProgressHUDModeCustomView;
UIImageView *gifImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"gif_loading_m_1"]];
NSMutableArray *arrOrigin = [[NSMutableArray alloc] initWithObjects:
                                   [UIImage imageNamed:@"gif_loading_m_1"],
                                   [UIImage imageNamed:@"gif_loading_m_2"],
                                   [UIImage imageNamed:@"gif_loading_m_3"],
                                   [UIImage imageNamed:@"gif_loading_m_4"],
                                   [UIImage imageNamed:@"gif_loading_m_5"],
                                   [UIImage imageNamed:@"gif_loading_m_6"],
                                   [UIImage imageNamed:@"gif_loading_m_7"],
                                   [UIImage imageNamed:@"gif_loading_m_8"],
                                   [UIImage imageNamed:@"gif_loading_m_3"],
                                   [UIImage imageNamed:@"gif_loading_m_1"],
                                   nil];

[gifImageView setAnimationImages:arrOrigin];
[gifImageView setAnimationDuration:1];
[gifImageView setAnimationRepeatCount:0];
[gifImageView startAnimating];

hud.customView = gifImageView;