带有自定义图像的活动指示器
Posted
技术标签:
【中文标题】带有自定义图像的活动指示器【英文标题】：Activity indicator with custom image 【发布时间】：2014-01-18 16:30:19 【问题描述】：我正在加载一个UIWebView，同时我不想显示一个空白页，这个 活动指示器正在旋转（siri 活动指示器）。据我了解，您不能更改图像，但我不能使用该图像并创建一个旋转 360° 并循环播放的动画吗？还是会耗尽电池？
像这样？：
- (void)webViewDidStartLoad:(UIWebView *)webView
//set up animation
[self.view addSubview:self.loadingImage];
//start animation
- (void)webViewDidFinishLoad:(UIWebView *)webView
//stop animation
[self.loadingImage removeFromSuperview];
我该怎么办？
提前致谢！
【问题讨论】：
【参考方案1】：大部分都可以在 Stack Overflow 中找到。让我总结一下：
创建一个用作活动指示器的 UIImageView（在情节提要场景、NIB、代码......任何你想要的地方）。我们就叫它_activityIndicatorImage
加载您的图片：_activityIndicatorImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"activity_indicator"]];
您需要使用动画来旋转它。这是我使用的方法：
+ (void)rotateLayerInfinite:(CALayer *)layer
CABasicAnimation *rotation;
rotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
rotation.fromValue = [NSNumber numberWithFloat:0];
rotation.toValue = [NSNumber numberWithFloat:(2 * M_PI)];
rotation.duration = 0.7f; // Speed
rotation.repeatCount = HUGE_VALF; // Repeat forever. Can be a finite number.
[layer removeAllAnimations];
[layer addAnimation:rotation forKey:@"Spin"];
在我的 layoutSubviews 方法中，我启动了旋转。如果这更适合您的情况，您可以将其放在您的 webViewDidStartLoad 和 webViewDidFinishLoad 中：
- (void)layoutSubviews
[super layoutSubviews];
// some other code
[Utils rotateLayerInfinite:_activityIndicatorImage.layer];
您总是可以使用[_activityIndicatorImage.layer removeAllAnimations]; 停止旋转
【讨论】：
[Utils rotateLayerInfinite:_activityIndicatorImage.layer]; 无法识别标识符“utils”？我必须进口一些东西吗？再次感谢
不，Utils 是我放+ (void)rotateLayerInfinite:(CALayer *)layer 代码的班级。如果您在同一个班级中使用[self.class rotateLayerInfinite:_activityIndicatorImage.layer];，则可以使用它。【参考方案2】：
你可以使用这个灵感来自 Tumblr 应用的漂亮 loader：Asich/AMTumblrHud
【讨论】：
【参考方案3】：斯威夫特 5
另一个完美的答案
第 1 步。
创建快速文件“CustomLoader.swift”并将此代码放入该文件中
import UIKit
import CoreGraphics
import QuartzCore
class CustomLoader: UIView
//MARK:- NOT ACCESSABLE OUT SIDE
fileprivate var duration : CFTimeInterval! = 1
fileprivate var isAnimating :Bool = false
fileprivate var backgroundView : UIView!
//MARK:- ACCESS INSTANCE ONLY AND CHANGE ACCORDING TO YOUR NEEDS *******
let colors : [UIColor] = [.red, .blue, .orange, .purple]
var defaultColor : UIColor = UIColor.red
var isUsrInteractionEnable : Bool = false
var defaultbgColor: UIColor = UIColor.white
var loaderSize : CGFloat = 80.0
/// **************** ****************** ////////// **************
//MARK:- MAKE SHARED INSTANCE
private static var Instance : CustomLoader!
static let sharedInstance : CustomLoader =
if Instance == nil
Instance = CustomLoader()
return Instance
()
//MARK:- DESTROY TO SHARED INSTANCE
@objc fileprivate func destroyShardInstance()
CustomLoader.Instance = nil
//MARK:- SET YOUR LOADER INITIALIZER FRAME ELSE DEFAULT IS CENTER
func startAnimation()
let win = UIApplication.shared.keyWindow
backgroundView = UIView()
backgroundView.frame = (UIApplication.shared.keyWindow?.frame)!
backgroundView.backgroundColor = UIColor.init(white: 0, alpha: 0.4)
win?.addSubview(backgroundView)
self.frame = CGRect.init(x: ((UIScreen.main.bounds.width) - loaderSize)/2, y: ((UIScreen.main.bounds.height) - loaderSize)/2, width: loaderSize, height: loaderSize)
self.addCenterImage()
self.isHidden = false
self.backgroundView.addSubview(self)
self.layer.cornerRadius = loaderSize/2
self.layer.masksToBounds = true
backgroundView.accessibilityIdentifier = "CustomLoader"
NotificationCenter.default.removeObserver(self, name: NSNotification.Name.NSExtensionHostDidBecomeActive, object: nil)
NotificationCenter.default.addObserver(self, selector: #selector(CustomLoader.ResumeLoader), name: NSNotification.Name.NSExtensionHostDidBecomeActive, object: nil)
self.layoutSubviews()
//MARK:- AVOID STUCKING LOADER WHEN CAME BACK FROM BACKGROUND
@objc fileprivate func ResumeLoader()
if isAnimating
self.stopAnimation()
self.AnimationStart()
override func layoutSubviews()
super.layoutSubviews()
self.backgroundColor = defaultbgColor
UIApplication.shared.keyWindow?.isUserInteractionEnabled = isUsrInteractionEnable
self.AnimationStart()
@objc fileprivate func addCenterImage()
/// add image in center
let centerImage = UIImage(named: "Logo")
let imageSize = loaderSize/2.5
let centerImgView = UIImageView(image: centerImage)
centerImgView.frame = CGRect(
x: (self.bounds.width - imageSize) / 2 ,
y: (self.bounds.height - imageSize) / 2,
width: imageSize,
height: imageSize
)
centerImgView.contentMode = .scaleAspectFit
centerImgView.layer.cornerRadius = imageSize/2
centerImgView.clipsToBounds = true
self.addSubview(centerImgView)
//MARK:- CALL IT TO START THE LOADER , AFTER INITIALIZE THE LOADER
@objc fileprivate func AnimationStart()
if isAnimating
return
let size = CGSize.init(width: loaderSize , height: loaderSize)
let dotNum: CGFloat = 10
let diameter: CGFloat = size.width / 5.5 //10
let dot = CALayer()
let frame = CGRect(
x: (layer.bounds.width - diameter) / 2 + diameter * 2,
y: (layer.bounds.height - diameter) / 2,
width: diameter/1.3,
height: diameter/1.3
)
dot.backgroundColor = colors[0].cgColor
dot.cornerRadius = frame.width / 2
dot.frame = frame
let replicatorLayer = CAReplicatorLayer()
replicatorLayer.frame = layer.bounds
replicatorLayer.instanceCount = Int(dotNum)
replicatorLayer.instanceDelay = 0.1
let angle = (2.0 * M_PI) / Double(replicatorLayer.instanceCount)
replicatorLayer.instanceTransform = CATransform3DMakeRotation(CGFloat(angle), 0.0, 0.0, 1.0)
layer.addSublayer(replicatorLayer)
replicatorLayer.addSublayer(dot)
let scaleAnimation = CABasicAnimation(keyPath: "transform.scale")
scaleAnimation.toValue = 0.4
scaleAnimation.duration = 0.5
scaleAnimation.autoreverses = true
scaleAnimation.repeatCount = .infinity
scaleAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
dot.add(scaleAnimation, forKey: "scaleAnimation")
let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation")
rotationAnimation.toValue = -2.0 * Double.pi
rotationAnimation.duration = 6.0
rotationAnimation.repeatCount = .infinity
rotationAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
replicatorLayer.add(rotationAnimation, forKey: "rotationAnimation")
if colors.count > 1
var cgColors : [CGColor] = []
for color in colors
cgColors.append(color.cgColor)
let colorAnimation = CAKeyframeAnimation(keyPath: "backgroundColor")
colorAnimation.values = cgColors
colorAnimation.duration = 2
colorAnimation.repeatCount = .infinity
colorAnimation.autoreverses = true
dot.add(colorAnimation, forKey: "colorAnimation")
self.isAnimating = true
self.isHidden = false
//MARK:- CALL IT TO STOP THE LOADER
func stopAnimation()
if !isAnimating
return
UIApplication.shared.keyWindow?.isUserInteractionEnabled = true
let winSubviews = UIApplication.shared.keyWindow?.subviews
if (winSubviews?.count)! > 0
for viw in winSubviews!
if viw.accessibilityIdentifier == "CustomLoader"
viw.removeFromSuperview()
// break
layer.sublayers = nil
isAnimating = false
self.isHidden = true
self.destroyShardInstance()
//MARK:- GETTING RANDOM COLOR , AND MANAGE YOUR OWN COLORS
@objc fileprivate func randomColor()->UIColor
let randomRed:CGFloat = CGFloat(drand48())
let randomGreen:CGFloat = CGFloat(drand48())
let randomBlue:CGFloat = CGFloat(drand48())
return UIColor(red: randomRed, green: randomGreen, blue: randomBlue, alpha: 1.0)
override func draw(_ rect: CGRect)
找到函数名称和“addCenterImage”并将图像名称替换为您的自定义图像。
第 2 步
像这样在 AppDelegate 类之外创建 AppDelegate 类实例。
var AppInstance: AppDelegate!
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool
AppInstance = self
第 3 步。
把这两个函数放在你的 AppDelegate 中
//MARK: - Activity Indicator -
func showLoader()
CustomLoader.sharedInstance.startAnimation()
func hideLoader()
CustomLoader.sharedInstance.stopAnimation()
第 4 步。只要您想为加载器设置动画并停止，请使用此类函数。
AppInstance.showLoader()
AppInstance.hideLoader()
加载愉快...
【讨论】：
我想逆时针旋转，代码哪里可以改？【参考方案4】：SWIFT 4 Sweet And Simply put extension UIView
@gandhi Mena
的修改答案如果您想创建自己的自定义加载指示器
创建一个 UIView 扩展，它创建和自定义您的品牌徽标作为自定义指示器，将此代码放入您的全局声明文件中。
extension UIView
func customActivityIndicator(view: UIView, widthView: CGFloat?,backgroundColor: UIColor?, textColor:UIColor?, message: String?) -> UIView
//Config UIView
self.backgroundColor = backgroundColor //Background color of your view which you want to set
var selfWidth = view.frame.width
if widthView != nil
selfWidth = widthView ?? selfWidth
let selfHeigh = view.frame.height
let loopImages = UIImageView()
let imageListArray = ["image1", "image2"] // Put your desired array of images in a specific order the way you want to display animation.
loopImages.animationImages = imageListArray
loopImages.animationDuration = TimeInterval(0.8)
loopImages.startAnimating()
let imageFrameX = (selfWidth / 2) - 30
let imageFrameY = (selfHeigh / 2) - 60
var imageWidth = CGFloat(60)
var imageHeight = CGFloat(60)
if widthView != nil
imageWidth = widthView ?? imageWidth
imageHeight = widthView ?? imageHeight
//ConfigureLabel
let label = UILabel()
label.textAlignment = .center
label.textColor = .gray
label.font = UIFont(name: "SFUIDisplay-Regular", size: 17.0)! // Your Desired UIFont Style and Size
label.numberOfLines = 0
label.text = message ?? ""
label.textColor = textColor ?? UIColor.clear
//Config frame of label
let labelFrameX = (selfWidth / 2) - 100
let labelFrameY = (selfHeigh / 2) - 10
let labelWidth = CGFloat(200)
let labelHeight = CGFloat(70)
// Define UIView frame
self.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width , height: UIScreen.main.bounds.size.height)
//ImageFrame
loopImages.frame = CGRect(x: imageFrameX, y: imageFrameY, width: imageWidth, height: imageHeight)
//LabelFrame
label.frame = CGRect(x: labelFrameX, y: labelFrameY, width: labelWidth, height: labelHeight)
//add loading and label to customView
self.addSubview(loopImages)
self.addSubview(label)
return self
隐藏类似这样的指示器，您可以从子视图堆栈中删除顶部的子视图。将此代码放在同一个全局声明的 swift 文件中。
func hideLoader(removeFrom : UIView)
removeFrom.subviews.last?.removeFromSuperview()
现在您可以通过此代码射击标记 要在视图控制器中显示活动指示器，请在要显示时输入此代码。
self.view.addSubview(UIView().customActivityIndicator(view: self.view, widthView: nil, backgroundColor:"Desired color", textColor: "Desired color", message: "Loading something"))
要隐藏动画加载器，您可以使用您在全局中定义的上述函数。在您要隐藏的 ViewController.swift 中放置这行代码。
hideLoader(removeFrom: self.view)
imageListArray 看起来像这样。
【讨论】：
这是一个有趣的解决方案。为了让它为我工作，我不得不稍微重构和修改。首先必须删除“屏幕尺寸”。我只是将 self.frame 设置为 view.frame。然后我删除了字体行。接下来，我需要能够删除活动指示器，而不假设它是最后一个子视图。为此，我创建了 UIView 的自定义子类并使用了相同的代码。然后，当我去删除活动指示器时，我遍历子视图寻找我的自定义类型之一。 @Allen 那是伟大的兄弟，你会分享你的来源吗@azusam75@gmail.com【参考方案5】：我最近遇到了类似的问题。这是我的解决方案。基本上，这就是主题启动者最初想要的：带有自定义活动指示器的空白页面。 我部分使用了@Azharhussain Shaikh 的答案，但我实现了自动布局而不是使用框架，并添加了一些其他改进，旨在使使用尽可能简单。
所以，它是 UIView 的扩展，有两个方法：addActivityIndicator() 和 removeActivityIndicator()
extension UIView
func addActivityIndicator()
// creating a view (let's call it "loading" view) which will be added on top of the view you want to have activity indicator on (parent view)
let view = UIView()
// setting up a background for a view so it would make content under it look like not active
view.backgroundColor = UIColor.white.withAlphaComponent(0.7)
// adding "loading" view to a parent view
// setting up auto-layout anchors so it would cover whole parent view
self.addSubview(view)
view.translatesAutoresizingMaskIntoConstraints = false
view.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
view.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
view.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
view.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
// creating array with images, which will be animated
// in my case I have 30 images with names activity0.png ... activity29.png
var imagesArray = [UIImage(named: "activity\(0)")!]
for i in 1..<30
imagesArray.append(UIImage(named: "activity\(i)")!)
// creating UIImageView with array of images
// setting up animation duration and starting animation
let activityImage = UIImageView()
activityImage.animationImages = imagesArray
activityImage.animationDuration = TimeInterval(0.7)
activityImage.startAnimating()
// adding UIImageView on "loading" view
// setting up auto-layout anchors so it would be in center of "loading" view with 30x30 size
view.addSubview(activityImage)
activityImage.translatesAutoresizingMaskIntoConstraints = false
activityImage.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
activityImage.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
activityImage.widthAnchor.constraint(equalToConstant: 30).isActive = true
activityImage.heightAnchor.constraint(equalToConstant: 30).isActive = true
func removeActivityIndicator()
// checking if a view has subviews on it
guard let lastSubView = self.subviews.last else return
// removing last subview with an assumption that last view is a "loading" view
lastSubView.removeFromSuperview()
“旋转”效果是通过你放入 imagesArray 中的那 30 张图像来实现的。每张图片都是一个旋转指示器like this的新帧。
用法。在显示活动指示器的视图控制器中简单地说：
view.addActivityIndicator()
移除活动指示器：
view.removeActivityIndicator()
例如，如果将它与表格视图一起使用（就像我一样），它可以这样使用：
func setLoadingScreen()
view.addActivityIndicator()
tableView.isScrollEnabled = false
func removeLoadingScreen()
view.removeActivityIndicator()
tableView.isScrollEnabled = true
它适用于 Swift 4。
【讨论】：
【参考方案6】：已接受答案的 Swift 5.0 版本
public extension UIImageView
func spin(duration: Float)
let rotation = CABasicAnimation(keyPath: "transform.rotation")
rotation.fromValue = 0
rotation.toValue = 2 * Double.pi
rotation.duration = 0.7
rotation.repeatCount = duration
layer.add(rotation, forKey: "spin")
func stopSpinning()
layer.removeAllAnimations()
【讨论】：
如何启动图像动画？我调用了 myImageView.spin()，但它没有旋转。 我添加后它开始工作：rotation.isRemovedOnCompletion = false【参考方案7】：
没有Image，你可以使用第三方库
用于目标 C（ios 6 也支持）https://github.com/shebinkoshy/UIControllsRepo
为斯威夫特https://github.com/shebinkoshy/Activity-Indicator-Swift
优势
-> 可以为微调器设置颜色
-> 提供不同的尺寸，如小、小、中、大、非常大
-> 能够为中、大、超大尺寸设置标题（中心和底部）
【讨论】：
【参考方案8】：您可以为您的activityIndicator 设置图片。我为添加自定义图像创建了一个函数到activityIndicator。这是我创建的。
public func showProgressView(view: UIView) -> UIImageView
let containerView = UIView()
let progressView = UIView()
var activityIndicatorImageView = UIImageView()
if let statusImage = UIImage(named: Constants.ActivityIndicatorImageName1)
let activityImageView = UIImageView(image: statusImage)
containerView.frame = view.frame
containerView.backgroundColor = UIColor(hex: 0xffffff, alpha: 0.3)
progressView.frame = CGRectMake(0, 0, 80, 80)
progressView.center = CGPointMake(view.bounds.width / 2, view.bounds.height / 2)
progressView.backgroundColor = UIColor(hex: 0x18bda3, alpha: 0.7)
progressView.clipsToBounds = true
progressView.layer.cornerRadius = 10
activityImageView.animationImages = [UIImage(named: Constants.ActivityIndicatorImageName1)!,
UIImage(named: Constants.ActivityIndicatorImageName2)!,
UIImage(named: Constants.ActivityIndicatorImageName3)!,
UIImage(named: Constants.ActivityIndicatorImageName4)!,
UIImage(named: Constants.ActivityIndicatorImageName5)!]
activityImageView.animationDuration = 0.8;
activityImageView.frame = CGRectMake(view.frame.size.width / 2 - statusImage.size.width / 2, view.frame.size.height / 2 - statusImage.size.height / 2, 40.0, 48.0)
activityImageView.center = CGPointMake(progressView.bounds.width / 2, progressView.bounds.height / 2)
dispatch_async(dispatch_get_main_queue())
progressView.addSubview(activityImageView)
containerView.addSubview(progressView)
view.addSubview(containerView)
activityIndicatorImageView = activityImageView
return activityIndicatorImageView
您可以在代码中的任何位置调用此方法。只需调用startAnimating 方法。如果你想隐藏，只需调用stopAnimating 方法。
【讨论】：
【参考方案9】：它适用于 SWITF 3 和 4
var activityIndicator = UIActivityIndicatorView()
var myView : UIView = UIView()
func viewDidLoad()
spinnerCreation()
func spinnerCreation()
activityIndicator.activityIndicatorViewStyle = .whiteLarge
let label = UILabel.init(frame: CGRect(x: 5, y: 60, width: 90, height: 20))
label.textColor = UIColor.white
label.font = UIFont.boldSystemFont(ofSize: 14.0)
label.textAlignment = NSTextAlignment.center
label.text = "Please wait...."
myView.frame = CGRect(x: (UIScreen.main.bounds.size.width - 100)/2, y: (UIScreen.main.bounds.size.height - 100)/2, width: 100, height: 100)
myView.backgroundColor = UIColor.init(white: 0.0, alpha: 0.7)
myView.layer.cornerRadius = 5
activityIndicator.center = CGPoint(x: myView.frame.size.width/2, y: myView.frame.size.height/2 - 10)
myView.addSubview(activityIndicator)
myView.addSubview(label)
myView.isHidden = true
self.window?.addSubview(myView)
@IBAction func activityIndicatorStart(_ sender: Any)
myView.isHidden = false
self.activityIndicator.startAnimating()
self.view.isUserInteractionEnabled = false
self.view.bringSubview(toFront: myView)
@IBAction func activityIndicatorStop(_ sender: Any)()
myView.isHidden = true
self.activityIndicator.stopAnimating()
self.view.isUserInteractionEnabled = true
【讨论】：
这段代码没有添加自定义图片，只是在系统Activity Indicator后面添加了一层【参考方案10】：您可以在 Swift 3 & 4 中使用它来创建您的自定义活动指示器：
创建一个名为 UIViewExtension.Swift 的新文件并复制此代码并粘贴到您的新文件文件中：
import UIkit
extension UIView
func customActivityIndicator(view: UIView, widthView: CGFloat? = nil,backgroundColor: UIColor? = nil, message: String? = nil,colorMessage:UIColor? = nil ) -> UIView
//Config UIView
self.backgroundColor = backgroundColor ?? UIColor.clear
self.layer.cornerRadius = 10
var selfWidth = view.frame.width - 100
if widthView != nil
selfWidth = widthView ?? selfWidth
let selfHeigh = CGFloat(100)
let selfFrameX = (view.frame.width / 2) - (selfWidth / 2)
let selfFrameY = (view.frame.height / 2) - (selfHeigh / 2)
let loopImages = UIImageView()
//ConfigCustomLoading with secuence images
let imageListArray = [UIImage(named:""),UIImage(named:""), UIImage(named:"")]
loopImages.animationImages = imageListArray
loopImages.animationDuration = TimeInterval(1.3)
loopImages.startAnimating()
let imageFrameX = (selfWidth / 2) - 17
let imageFrameY = (selfHeigh / 2) - 35
var imageWidth = CGFloat(35)
var imageHeight = CGFloat(35)
if widthView != nil
imageWidth = widthView ?? imageWidth
imageHeight = widthView ?? imageHeight
//ConfigureLabel
let label = UILabel()
label.textAlignment = .center
label.textColor = .gray
label.font = UIFont.boldSystemFont(ofSize: 17)
label.numberOfLines = 0
label.text = message ?? ""
label.textColor = colorMessage ?? UIColor.clear
//Config frame of label
let labelFrameX = (selfWidth / 2) - 100
let labelFrameY = (selfHeigh / 2) - 10
let labelWidth = CGFloat(200)
let labelHeight = CGFloat(70)
//add loading and label to customView
self.addSubview(loopImages)
self.addSubview(label)
//Define frames
//UIViewFrame
self.frame = CGRect(x: selfFrameX, y: selfFrameY, width: selfWidth , height: selfHeigh)
//ImageFrame
loopImages.frame = CGRect(x: imageFrameX, y: imageFrameY, width: imageWidth, height: imageHeight)
//LabelFrame
label.frame = CGRect(x: labelFrameX, y: labelFrameY, width: labelWidth, height: labelHeight)
return self
然后你可以像这样在你的 ViewController 中使用它：
import UIKit
class ExampleViewController: UIViewController
override func viewDidLoad()
super.viewDidLoad()
self.view.addSubview(UIView().customActivityIndicator(view: self.view,backgroundColor: UIColor.green))
//function for stop and desappear loading
func deseappearLoading()
self.view.subviews.last?.removeFromSuperview()
不要忘记将 [UIImage(named:" "),UIImage(named:" "), UIImage(named:" ")] 替换为您的图像名称并调整 TimeInterval(1.3)。好好享受。
【讨论】：
以上是关于带有自定义图像的活动指示器的主要内容，如果未能解决你的问题，请参考以下文章