我想以编程方式显示带有文本的活动指示器,如照片应用程序中的那个(编辑并保存图片后).我怎样才能做到这一点?
Xcode 8.2.1•Swift 3.0.2
import UIKit class ViewController: UIViewController, UINavigationControllerDelegate, UIImagePickerControllerDelegate { @IBOutlet weak var imageView: UIImageView! @IBOutlet weak var filterButton: UIButton! @IBOutlet weak var saveButton: UIButton! let destinatiOnUrl= FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first! .appendingPathComponent("filteredImage.png") let imagePicker = UIImagePickerController() let messageFrame = UIView() var activityIndicator = UIActivityIndicatorView() var strLabel = UILabel() let effectView = UIVisualEffectView(effect: UIBlurEffect(style: .dark)) func activityIndicator(_ title: String) { strLabel.removeFromSuperview() activityIndicator.removeFromSuperview() effectView.removeFromSuperview() strLabel = UILabel(frame: CGRect(x: 50, y: 0, width: 160, height: 46)) strLabel.text = title strLabel.fOnt= .systemFont(ofSize: 14, weight: UIFontWeightMedium) strLabel.textColor = UIColor(white: 0.9, alpha: 0.7) effectView.frame = CGRect(x: view.frame.midX - strLabel.frame.width/2, y: view.frame.midY - strLabel.frame.height/2 , width: 160, height: 46) effectView.layer.cornerRadius = 15 effectView.layer.masksToBounds = true activityIndicator = UIActivityIndicatorView(activityIndicatorStyle: .white) activityIndicator.frame = CGRect(x: 0, y: 0, width: 46, height: 46) activityIndicator.startAnimating() effectView.addSubview(activityIndicator) effectView.addSubview(strLabel) view.addSubview(effectView) } func saveImage() { do { try imageView.image?.data?.write(to: destinationUrl, options: .atomic) print("file saved") } catch { print(error) } } func applyFilterToImage() { imageView.image = imageView.image?.applying(contrast: 1.5) } override func viewDidLoad() { super.viewDidLoad() guard let url = URL(string: "https://upload.wikimedia.org/wikipedia/commons/a/a8/VST_images_the_Lagoon_Nebula.jpg"), let data = try? Data(contentsOf: url), let image = UIImage(data: data) else { return } view.backgroundColor = UIColor(white: 0, alpha: 1) imageView.image = image } @IBAction func startSavingImage(_ sender: AnyObject) { saveButton.isEnabled = false filterButton.isEnabled = false activityIndicator("Saving Image") DispatchQueue.main.async { self.saveImage() DispatchQueue.main.async { self.effectView.removeFromSuperview() self.saveButton.isEnabled = true self.filterButton.isEnabled = true } } } @IBAction func filterAction(_ sender: AnyObject) { filterButton.isEnabled = false saveButton.isEnabled = false activityIndicator("Applying Filter") DispatchQueue.main.async { self.applyFilterToImage() DispatchQueue.main.async { self.effectView.removeFromSuperview() self.filterButton.isEnabled = true self.saveButton.isEnabled = true } } } @IBAction func cameraAction(_ sender: AnyObject) { if UIImagePickerController.isSourceTypeAvailable(.camera) { imagePicker.delegate = self imagePicker.sourceType = .camera present(imagePicker, animated: true) } } func imagePickerController(_ picker: UIImagePickerController, didFinishPickingImage image: UIImage!, editingInfo: [AnyHashable: Any]!) { dismiss(animated: true, completion: nil) imageView.image = image } } extension Data { var image: UIImage? { return UIImage(data: self) } } extension UIImage { var data: Data? { return UIImagePNGRepresentation(self) } func applying(contrast value: NSNumber) -> UIImage? { guard let ciImage = CIImage(image: self)?.applyingFilter("CIColorControls", withInputParameters: [kCIInputContrastKey: value]) else { return nil } UIGraphicsBeginImageContextWithOptions(size, false, scale) defer { UIGraphicsEndImageContext() } UIImage(ciImage: ciImage).draw(in: CGRect(origin: .zero, size: size)) return UIGraphicsGetImageFromCurrentImageContext() } }
示例项目
Xcode 9.0•Swift 4.0
func activityIndicator(_ title: String) { strLabel.removeFromSuperview() activityIndicator.removeFromSuperview() effectView.removeFromSuperview() strLabel = UILabel(frame: CGRect(x: 50, y: 0, width: 160, height: 46)) strLabel.text = title strLabel.fOnt= .systemFont(ofSize: 14, weight: .medium) strLabel.textColor = UIColor(white: 0.9, alpha: 0.7) effectView.frame = CGRect(x: view.frame.midX - strLabel.frame.width/2, y: view.frame.midY - strLabel.frame.height/2 , width: 160, height: 46) effectView.layer.cornerRadius = 15 effectView.layer.masksToBounds = true activityIndicator = UIActivityIndicatorView(activityIndicatorStyle: .white) activityIndicator.frame = CGRect(x: 0, y: 0, width: 46, height: 46) activityIndicator.startAnimating() effectView.contentView.addSubview(activityIndicator) effectView.contentView.addSubview(strLabel) view.addSubview(effectView) }
虽然Esq的答案有效,但我添加了自己的实现,通过将视图分离到自己的类中,更符合良好的组件架构.它还使用iOS 8中引入的动态模糊.
以下是我的图像背景:
这个代码封装在它自己的UIView类中,这意味着你可以随时重用它.
针对Swift 3进行了更新用法
func viewDidLoad() { super.viewDidLoad() // Create and add the view to the screen. let progressHUD = ProgressHUD(text: "Saving Photo") self.view.addSubview(progressHUD) // All done! self.view.backgroundColor = UIColor.black }
UIView代码
import UIKit class ProgressHUD: UIVisualEffectView { var text: String? { didSet { label.text = text } } let activityIndictor: UIActivityIndicatorView = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.gray) let label: UILabel = UILabel() let blurEffect = UIBlurEffect(style: .light) let vibrancyView: UIVisualEffectView init(text: String) { self.text = text self.vibrancyView = UIVisualEffectView(effect: UIVibrancyEffect(blurEffect: blurEffect)) super.init(effect: blurEffect) self.setup() } required init?(coder aDecoder: NSCoder) { self.text = "" self.vibrancyView = UIVisualEffectView(effect: UIVibrancyEffect(blurEffect: blurEffect)) super.init(coder: aDecoder) self.setup() } func setup() { contentView.addSubview(vibrancyView) contentView.addSubview(activityIndictor) contentView.addSubview(label) activityIndictor.startAnimating() } override func didMoveToSuperview() { super.didMoveToSuperview() if let superview = self.superview { let width = superview.frame.size.width / 2.3 let height: CGFloat = 50.0 self.frame = CGRect(x: superview.frame.size.width / 2 - width / 2, y: superview.frame.height / 2 - height / 2, width: width, height: height) vibrancyView.frame = self.bounds let activityIndicatorSize: CGFloat = 40 activityIndictor.frame = CGRect(x: 5, y: height / 2 - activityIndicatorSize / 2, width: activityIndicatorSize, height: activityIndicatorSize) layer.cornerRadius = 8.0 layer.masksToBounds = true label.text = text label.textAlignment = NSTextAlignment.center label.frame = CGRect(x: activityIndicatorSize + 5, y: 0, width: width - activityIndicatorSize - 15, height: height) label.textColor = UIColor.gray label.fOnt= UIFont.boldSystemFont(ofSize: 16) } } func show() { self.isHidden = false } func hide() { self.isHidden = true } }斯威夫特2
如何使用它的一个例子是这样的:
override func viewDidLoad() { super.viewDidLoad() // Create and add the view to the screen. let progressHUD = ProgressHUD(text: "Saving Photo") self.view.addSubview(progressHUD) // All done! self.view.backgroundColor = UIColor.blackColor() }
这是UIView代码:
import UIKit class ProgressHUD: UIVisualEffectView { var text: String? { didSet { label.text = text } } let activityIndictor: UIActivityIndicatorView = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.White) let label: UILabel = UILabel() let blurEffect = UIBlurEffect(style: .Light) let vibrancyView: UIVisualEffectView init(text: String) { self.text = text self.vibrancyView = UIVisualEffectView(effect: UIVibrancyEffect(forBlurEffect: blurEffect)) super.init(effect: blurEffect) self.setup() } required init(coder aDecoder: NSCoder) { self.text = "" self.vibrancyView = UIVisualEffectView(effect: UIVibrancyEffect(forBlurEffect: blurEffect)) super.init(coder: aDecoder) self.setup() } func setup() { contentView.addSubview(vibrancyView) vibrancyView.contentView.addSubview(activityIndictor) vibrancyView.contentView.addSubview(label) activityIndictor.startAnimating() } override func didMoveToSuperview() { super.didMoveToSuperview() if let superview = self.superview { let width = superview.frame.size.width / 2.3 let height: CGFloat = 50.0 self.frame = CGRectMake(superview.frame.size.width / 2 - width / 2, superview.frame.height / 2 - height / 2, width, height) vibrancyView.frame = self.bounds let activityIndicatorSize: CGFloat = 40 activityIndictor.frame = CGRectMake(5, height / 2 - activityIndicatorSize / 2, activityIndicatorSize, activityIndicatorSize) layer.cornerRadius = 8.0 layer.masksToBounds = true label.text = text label.textAlignment = NSTextAlignment.Center label.frame = CGRectMake(activityIndicatorSize + 5, 0, width - activityIndicatorSize - 15, height) label.textColor = UIColor.grayColor() label.fOnt= UIFont.boldSystemFontOfSize(16) } } func show() { self.hidden = false } func hide() { self.hidden = true } }
我希望这有帮助,请随时在您需要的地方使用此代码.
下面是这段代码的样子:
继承我的拖放代码:
var boxView = UIView() override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. view.backgroundColor = UIColor.blackColor() addSavingPhotoView() //Custom button to test this app var button = UIButton(frame: CGRect(x: 20, y: 20, width: 20, height: 20)) button.backgroundColor = UIColor.redColor() button.addTarget(self, action: "buttonAction:", forControlEvents: UIControlEvents.TouchUpInside) view.addSubview(button) } func addSavingPhotoView() { // You only need to adjust this frame to move it anywhere you want boxView = UIView(frame: CGRect(x: view.frame.midX - 90, y: view.frame.midY - 25, width: 180, height: 50)) boxView.backgroundColor = UIColor.whiteColor() boxView.alpha = 0.8 boxView.layer.cornerRadius = 10 //Here the spinnier is initialized var activityView = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.Gray) activityView.frame = CGRect(x: 0, y: 0, width: 50, height: 50) activityView.startAnimating() var textLabel = UILabel(frame: CGRect(x: 60, y: 0, width: 200, height: 50)) textLabel.textColor = UIColor.grayColor() textLabel.text = "Saving Photo" boxView.addSubview(activityView) boxView.addSubview(textLabel) view.addSubview(boxView) } func buttonAction(sender:UIButton!) { //When button is pressed it removes the boxView from screen boxView.removeFromSuperview() }
这是一个开源版本:https://github.com/goktugyil/CozyLoadingActivity
根据我之前的回答,这是一个更优雅的解决方案,其中包含一个自定义类:
首先定义这个自定义类:
import UIKit import Foundation class ActivityIndicatorView { var view: UIView! var activityIndicator: UIActivityIndicatorView! var title: String! init(title: String, center: CGPoint, width: CGFloat = 200.0, height: CGFloat = 50.0) { self.title = title let x = center.x - width/2.0 let y = center.y - height/2.0 self.view = UIView(frame: CGRect(x: x, y: y, width: width, height: height)) self.view.backgroundColor = UIColor(red: 255.0/255.0, green: 204.0/255.0, blue: 51.0/255.0, alpha: 0.5) self.view.layer.cornerRadius = 10 self.activityIndicator = UIActivityIndicatorView(frame: CGRect(x: 0, y: 0, width: 50, height: 50)) self.activityIndicator.color = UIColor.blackColor() self.activityIndicator.hidesWhenStopped = false let titleLabel = UILabel(frame: CGRect(x: 60, y: 0, width: 200, height: 50)) titleLabel.text = title titleLabel.textColor = UIColor.blackColor() self.view.addSubview(self.activityIndicator) self.view.addSubview(titleLabel) } func getViewActivityIndicator() -> UIView { return self.view } func startAnimating() { self.activityIndicator.startAnimating() UIApplication.sharedApplication().beginIgnoringInteractionEvents() } func stopAnimating() { self.activityIndicator.stopAnimating() UIApplication.sharedApplication().endIgnoringInteractionEvents() self.view.removeFromSuperview() } //end }
现在UIViewController
上课:
var activityIndicatorView: ActivityIndicatorView! override func viewDidLoad() { super.viewDidLoad() self.activityIndicatorView = ActivityIndicatorView(title: "Processing...", center: self.view.center) self.view.addSubview(self.activityIndicatorView.getViewActivityIndicator()) } func doSomething() { self.activityIndicatorView.startAnimating() UIApplication.sharedApplication().beginIgnoringInteractionEvents() //do something here that will taking time self.activityIndicatorView.stopAnimating() }
对于活动指示器,您最好创建一个自定义类.
而不是UIActivityIndicator
在每个UIViewController
.Subclass 中创建UIView
并使用任何UIViewController
.
import UIKit import Foundation class ProgressIndicator: UIView { var indicatorColor:UIColor var loadingViewColor:UIColor var loadingMessage:String var messageFrame = UIView() var activityIndicator = UIActivityIndicatorView() init(inview:UIView,loadingViewColor:UIColor,indicatorColor:UIColor,msg:String){ self.indicatorColor = indicatorColor self.loadingViewColor = loadingViewColor self.loadingMessage = msg super.init(frame: CGRectMake(inview.frame.midX - 150, inview.frame.midY - 25 , 300, 50)) initalizeCustomIndicator() } convenience init(inview:UIView) { self.init(inview: inview,loadingViewColor: UIColor.brownColor(),indicatorColor:UIColor.blackColor(), msg: "Loading..") } convenience init(inview:UIView,messsage:String) { self.init(inview: inview,loadingViewColor: UIColor.brownColor(),indicatorColor:UIColor.blackColor(), msg: messsage) } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } func initalizeCustomIndicator(){ messageFrame.frame = self.bounds activityIndicator = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.White) activityIndicator.tintColor = indicatorColor activityIndicator.hidesWhenStopped = true activityIndicator.frame = CGRect(x: self.bounds.origin.x + 6, y: 0, width: 20, height: 50) print(activityIndicator.frame) let strLabel = UILabel(frame:CGRect(x: self.bounds.origin.x + 30, y: 0, width: self.bounds.width - (self.bounds.origin.x + 30) , height: 50)) strLabel.text = loadingMessage strLabel.adjustsFOntSizeToFitWidth= true strLabel.textColor = UIColor.whiteColor() messageFrame.layer.cornerRadius = 15 messageFrame.backgroundColor = loadingViewColor messageFrame.alpha = 0.8 messageFrame.addSubview(activityIndicator) messageFrame.addSubview(strLabel) } func start(){ //check if view is already there or not..if again started if !self.subviews.contains(messageFrame){ activityIndicator.startAnimating() self.addSubview(messageFrame) } } func stop(){ if self.subviews.contains(messageFrame){ activityIndicator.stopAnimating() messageFrame.removeFromSuperview() } } }
将此类放在项目中,然后从任何ViewController调用
var indicator:ProgressIndicator? override func viewDidLoad() { super.viewDidLoad() //indicator = ProgressIndicator(inview: self.view,messsage: "Hello from Nepal..") //self.view.addSubview(indicator!) //OR indicator = ProgressIndicator(inview:self.view,loadingViewColor: UIColor.grayColor(), indicatorColor: UIColor.blackColor(), msg: "Landing within minutes,Please hold tight..") self.view.addSubview(indicator!) } @IBAction func startBtn(sender: AnyObject) { indicator!.start() } @IBAction func stopBtn(sender: AnyObject) { indicator!.stop() }
对于Swift 3
用法
class LoginTVC: UITableViewController { var loadingView : LoadingView! override func viewDidLoad() { super.viewDidLoad() // CASE 1: To Show loadingView on load loadingView = LoadingView(uiView: view, message: "Sending you verification code") } // CASE 2: To show loadingView on click of a button @IBAction func showLoadingView(_ sender: UIButton) { if let loaderView = loadingView{ // If loadingView already exists if loaderView.isHidden() { loaderView.show() // To show activity indicator } } else{ loadingView = LoadingView(uiView: view, message: "Sending you verification code") } } } // CASE 3: To hide LoadingView on click of a button @IBAction func hideLoadingView(_ sender: UIButton) { if let loaderView = loadingView{ // If loadingView already exists self.loadingView.hide() } } }
LoadingView类别
class LoadingView { let uiView : UIView let message : String let messageLabel = UILabel() let loadingSV = UIStackView() let loadingView = UIView() let activityIndicator: UIActivityIndicatorView = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.gray) init(uiView: UIView, message: String) { self.uiView = uiView self.message = message self.setup() } func setup(){ let viewWidth = uiView.bounds.width let viewHeight = uiView.bounds.height // Configuring the message label messageLabel.text = message messageLabel.textColor = UIColor.darkGray messageLabel.textAlignment = .center messageLabel.numberOfLines = 3 messageLabel.lineBreakMode = .byWordWrapping // Creating stackView to center and align Label and Activity Indicator loadingSV.axis = .vertical loadingSV.distribution = .equalSpacing loadingSV.alignment = .center loadingSV.addArrangedSubview(activityIndicator) loadingSV.addArrangedSubview(messageLabel) // Creating loadingView, this acts as a background for label and activityIndicator loadingView.frame = uiView.frame loadingView.center = uiView.center loadingView.backgroundColor = UIColor.darkGray.withAlphaComponent(0.3) loadingView.clipsToBounds = true // Disabling auto constraints loadingSV.translatesAutoresizingMaskIntoCOnstraints= false // Adding subviews loadingView.addSubview(loadingSV) uiView.addSubview(loadingView) activityIndicator.startAnimating() // Views dictionary let views = [ "loadingSV": loadingSV ] // Constraints for loadingSV uiView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-[loadingSV(300)]-|", options: [], metrics: nil, views: views)) uiView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-\(viewHeight / 3)-[loadingSV(50)]-|", options: [], metrics: nil, views: views)) } // Call this method to hide loadingView func show() { loadingView.isHidden = false } // Call this method to show loadingView func hide(){ loadingView.isHidden = true } // Call this method to check if loading view already exists func isHidden() -> Bool{ if loadingView.isHidden == false{ return false } else{ return true } } }