MBProgressHUD自定义Loading图片

最新推荐文章于 2019-08-13 21:12:57 发布

原创最新推荐文章于 2019-08-13 21:12:57 发布 · 4.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iOS #MBProgressHUD #自定义图片

iOS 专栏收录该内容

72 篇文章

订阅专栏

本文介绍如何使用MBProgressHUD库来自定义iOS应用中的加载动画。通过创建一个旋转的图片动画，并将其设置为MBProgressHUD的customView，实现了个性化的加载效果。此外，还介绍了如何调整背景颜色和大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

githud路径：https://github.com/jdg/MBProgressHUD

MBProgressHUD提供了一个很好的demo，在github上可以下载。

但是在loading中，如何才能自定义转圈图片呢？

我们需要自定义一个动画，即将一个image旋转即可，如果还需要在旋转图中心另加其他图，则要做些小动作了

代码如下：

    MBProgressHUD * hud = [MBProgressHUD showHUDAddedTo:[HUDUtil getRealView:view] animated:animated];
    hud.mode = MBProgressHUDModeCustomView;
    hud.offset = offset;
    
    //loading图片和动画
    UIImage *image = [[UIImage imageNamed:@"loading圈"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    UIImageView *imgView = [[UIImageView alloc] initWithImage:image];
    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    anima.toValue = @(M_PI*2);
    anima.duration = 1.0f;
    anima.repeatCount = 100;
    [imgView.layer addAnimation:anima forKey:nil];
    
    UIImage *image_ye = [[UIImage imageNamed:@"loading叶"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    UIImageView *imgCenterView = [[UIImageView alloc] initWithImage:image_ye];
    
    UIImageView *contentView = [[UIImageView alloc] initWithImage:image_ye];
    [contentView addSubview:imgView];
    [contentView addSubview:imgCenterView];
    imgCenterView.center = contentView.center;
    imgView.center = contentView.center;
    hud.customView = contentView;
    
    //背景颜色
    hud.bezelView.color = [UIColor colorWithHexString:@"0x000000"];
    hud.bezelView.alpha = 0.5f;
    
    //背景宽高
    CGFloat targetWidth;
    CGFloat targetHeight;
    CGFloat margin = 10.0f;
    targetWidth = imgView.width + margin*2;
    targetHeight = imgView.height + margin*2;
    CGSize newSize = CGSizeMake(targetWidth, targetHeight);
    hud.minSize = newSize;
    
    //颜色
    hud.contentColor = [UIColor whiteColor];
    hud.animationType = MBProgressHUDAnimationFade;

其中MBProgressHUD有一个view叫做bezelView，这个View就是承载loading圈圈的背景view，背景的颜色／透明度就可以直接通过caozuo bezeView

的响应值来修改。

而loading中，承载图片的view叫做customView，他是vezelView的一个子控件。

如若不需要负责的图片loading，而只需要一张图片转圈，那么就将该转圈图片放入一个UIImageView，再赋值给customView就可以了（hud.bezelVIew = imageView(承载转圈图片的view)）