How to achieve dynamic scrollable buttons menu? - ios

I am already created dynamic buttons in scroll view but i need to acheive like this way.
I don't want to change the view controller when I click the buttons only get the button titles on same view controller.I have tried following way to creating buttons in scrollview.
class ViewController: UIViewController {
#IBOutlet weak var productScrollView: UIScrollView!
var buttonValues = ["Equity","Commodity","Derivatives","Market","Products","Values"]
override func viewDidLoad() {
super.viewDidLoad()
let scrollingView = colorButtonsView(buttonSize: CGSize(width:100.0,height:30.0), buttonCount: buttonValues.count)
productScrollView.contentSize = scrollingView.frame.size
productScrollView.addSubview(scrollingView)
productScrollView.showsHorizontalScrollIndicator = false
productScrollView.indicatorStyle = .default
productScrollView.setContentOffset(.zero, animated: false)
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func colorButtonsView(buttonSize:CGSize, buttonCount:Int) -> UIView {
//creates color buttons in a UIView
let buttonView = UIView()
buttonView.backgroundColor = UIColor.white
buttonView.frame.origin = CGPoint(x:0,y:0)
let padding = CGSize(width:10,height:10)
buttonView.frame.size.width = (buttonSize.width + padding.width) * CGFloat(buttonCount)
buttonView.frame.size.height = (buttonSize.height + 2.0 * padding.height)
var buttonPosition = CGPoint(x:padding.width * 0.5,y: padding.height)
let buttonIncrement = buttonSize.width + padding.width
for i in 0...(buttonCount - 1) {
let button = UIButton(type: .custom) as UIButton
button.frame.size = buttonSize
button.frame.origin = buttonPosition
buttonPosition.x = buttonPosition.x + buttonIncrement
button.setTitle(buttonValues[i], for: .normal)
button.setTitleColor(UIColor.black, for: .normal)
button.layer.borderWidth = 1
button.layer.borderColor = UIColor.black.cgColor
button.addTarget(self, action: #selector(colorButtonPressed(sender:)), for: .touchUpInside)
buttonView.addSubview(button)
}
return buttonView
}
#objc func colorButtonPressed(sender:UIButton!){
print(sender.title(for: .normal)!)
sender.setTitleColor(UIColor.blue, for: .normal)
}}

Finaly I achieve in this way
import UIKit
protocol ButtonProtocol{
func selectedButton(withTag : Int)
}
class ButtonsView: UIView {
private var scrollView: UIScrollView?
var buttonProtocolDelegate : ButtonProtocol?
var movingView : UIView?
var buttonWidths = [CGFloat]()
#IBInspectable
var wordsArray: [String] = [String]() {
didSet {
createButtons()
}
}
var padding: CGFloat = 10
var currentWidth: CGFloat = 0
private func createButtons() {
scrollView?.removeFromSuperview()
scrollView = UIScrollView(frame: CGRect(x: 0, y: 0, width: self.frame.size.width+80, height: self.frame.size.height))
self.addSubview(scrollView!)
scrollView!.backgroundColor = UIColor.white
scrollView?.showsHorizontalScrollIndicator = false
scrollView?.showsVerticalScrollIndicator = false
self.calculateButtonWidths()
let totalWidthOfButtons = buttonWidths.reduce(10.0,+)
let isBigButton = buttonWidths.contains(where: {$0 > (scrollView?.frame.size.width)!/2})
for i in 0..<wordsArray.count {
let text = wordsArray[i]
var button = UIButton()
if totalWidthOfButtons >= self.frame.size.width || isBigButton {
button = UIButton(frame: CGRect(x:currentWidth, y: 0.0, width: buttonWidths[i], height: self.frame.size.height))
}else{
button = UIButton(frame: CGRect(x:currentWidth, y: 0.0, width: self.frame.size.width/CGFloat(self.buttonWidths.count), height: self.frame.size.height))
buttonWidths[i] = self.frame.size.width/CGFloat(self.buttonWidths.count)
}
button.tag = i
button.setTitle(text, for: .normal)
button.setTitleColor(UIColor.black, for: .normal)
let buttonWidth = button.frame.size.width
currentWidth = currentWidth + buttonWidth + (i == wordsArray.count - 1 ? 0 : padding)
scrollView!.addSubview(button)
button.addTarget(self, action: #selector(pressed(sender:)), for: .touchUpInside)
}
scrollView!.contentSize = CGSize(width:currentWidth,height:scrollView!.frame.size.height)
self.addMovingView()
}
func addMovingView(){
movingView = UIView.init(frame: CGRect.init(x: 0, y: (scrollView?.frame.size.height)! - 2, width: buttonWidths[0], height: 2))
movingView?.backgroundColor = UIColor.blue
scrollView?.addSubview(movingView!)
}
#objc func pressed(sender : UIButton){
self.buttonProtocolDelegate!.selectedButton(withTag : sender.tag)
self.moveButtonToCenterIfPossible(sender : sender)
}
func animageMovingView(sender : UIButton){
UIView.animate(withDuration: 0.20, delay: 0, options: [UIViewAnimationOptions.curveEaseInOut], animations: {
//Set x position what ever you want, in our case, it will be the beginning of the button
() -> Void in
self.movingView?.frame = CGRect(x: sender.frame.origin.x, y: (self.movingView?.frame.origin.y)! , width: sender.frame.size.width, height: 2)
self.superview?.layoutIfNeeded()
}, completion: { (finished) -> Void in
// ....
})
}
func moveButtonToCenterIfPossible(sender : UIButton){
self.scrollView?.scrollToView(button: sender, animated: true)
// print(sender.frame)
self.animageMovingView(sender : sender)
}
func calculateButtonWidths(){
for i in 0..<wordsArray.count {
let text = wordsArray[i]
let button = UIButton(frame: CGRect(x:0, y: 0.0, width: 100, height: 50))
button.tag = i
button.setTitle(text, for: .normal)
button.sizeToFit()
button.contentEdgeInsets = UIEdgeInsets.init(top: 5, left: padding, bottom: 5, right: padding)
button.sizeToFit()
let buttonWidth = button.frame.size.width
buttonWidths.append(buttonWidth)
}
}
}
extension UIScrollView {
func scrollToView(button:UIButton, animated: Bool) {
if let origin = button.superview {
// let buttonStart = button.frame.origin
let buttonCenterPoint = button.center
var scrollOffset = (origin as? UIScrollView)?.contentOffset
let offset = scrollOffset
let deviceBounds = (origin.superview?.frame.size.width)!/2
// print(buttonStart, deviceBounds, scrollOffset ?? "0.0")
let differenceLeft = buttonCenterPoint.x - (scrollOffset?.x)!
let differenceRight = ((origin as? UIScrollView)?.contentSize.width)! - (contentOffset.x + deviceBounds*2)
if buttonCenterPoint.x > deviceBounds {
// scroll left & right
if differenceLeft > deviceBounds && differenceRight < deviceBounds && differenceRight < button.frame.size.width {
//handle last button
scrollOffset?.x = (offset?.x)! + differenceRight
}else{
//for all others in the middle
scrollOffset?.x = (offset?.x)! + differenceLeft - deviceBounds
}
self.setContentOffset(CGPoint.init(x: (scrollOffset?.x)! , y: 0), animated: true)
// scroll right
}else {
// left most buttons
self.setContentOffset(CGPoint.init(x: 0 , y: 0), animated: true)
}
}
}
}
and your view controller
#IBOutlet weak var buttonsView: ButtonsView!
override func viewDidLoad() {
super.viewDidLoad()
buttonsView.buttonProtocolDelegate = self
buttonsView.wordsArray = ["Offers", "Burgers", "Shakes", "Biryani","Snacks", "Lucknow Biryani","Elepaha","dfasjjlfajd","dafjljafl","546464464"]
} extension ViewController {
func selectedButton(withTag : Int) {
print(buttonsView.wordsArray[withTag])
}}

Related

The buttons will not show up in the IOS simulator, can anyone assist? (Code Provided Below)

The code below shows a potential login screen and everything works except for the buttons. I am trying to figure out why that is......
I thought maybe it was the version of Xcode i was using(Xcode 13), but the still doesn't seem like the reason or i would have received an error message.
import UIKit
class LoginViewController: UIViewController, UITextFieldDelegate{
struct Constants {
static let cornerRadius: CGFloat = 8.0
}
//Declaration of login fields
override func viewDidLoad() {
super.viewDidLoad()
loginButton.addTarget(self, action: #selector(didTaploginButton), for: .touchUpInside)
createAccountButton.addTarget(self, action: #selector(didTapcreateAccountButton), for: .touchUpInside)
termsButton.addTarget(self, action: #selector(didTaptermsButton), for: .touchUpInside)
privacyButton.addTarget(self, action: #selector(didTapprivacyButton), for: .touchUpInside)
usernameEmailField.delegate = self
passwordField.delegate = self
addSubviews()
view.backgroundColor = .systemBackground
// Do any additional setup after loading the view.
}
private let usernameEmailField: UITextField = {
let field = UITextField()
field.placeholder = "Username or Email"
field.returnKeyType = .next
field.leftViewMode = .always
field.leftView = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: 0))
field.autocapitalizationType = .none
field.autocorrectionType = .no
field.layer.masksToBounds = true
field.layer.cornerRadius = Constants.cornerRadius
field.backgroundColor = .secondarySystemBackground
return field
}()
private let passwordField: UITextField = {
let field = UITextField()
field.placeholder = "Password"
field.returnKeyType = .next
field.leftViewMode = .always
field.leftView = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: 0))
field.autocapitalizationType = .none
field.autocorrectionType = .no
field.layer.masksToBounds = true
field.layer.cornerRadius = Constants.cornerRadius
field.backgroundColor = .secondarySystemBackground
return field
}()
private let loginButton: UIButton = {
let loginbutton = UIButton()
loginbutton.setTitle("Log In", for: .normal)
loginbutton.layer.masksToBounds = true
loginbutton.layer.cornerRadius = Constants.cornerRadius
loginbutton.backgroundColor = .link
loginbutton.setTitleColor(.white, for: .normal)
return UIButton()
}()
private let termsButton: UIButton = {
let button = UIButton()
button.setTitle("Terms of Service", for: .normal)
button.setTitleColor(.secondaryLabel, for: .normal)
return UIButton()
}()
private let privacyButton: UIButton = {
return UIButton()
}()
private let createAccountButton: UIButton = {
let button = UIButton()
button.setTitleColor(.lightGray, for: .normal)
button.setTitle("New User? Create an Account", for: .normal)
button.backgroundColor = .systemBlue
button.layer.cornerRadius = Constants.cornerRadius
button.setTitleColor(.label, for: .normal)
return UIButton()
}()
//Picture behind the Logo
private let headerView: UIView = {
let header = UIView()
header.clipsToBounds = true
let backgroundImageView = UIImageView(image: UIImage(named: "Bluewater"))
header.addSubview(backgroundImageView)
return header
}()
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
//assigning frames
headerView.frame = CGRect(x: 0,
y: 0.0,
width: view.width,
height: view.height/3.0
)
usernameEmailField.frame = CGRect(x: 25,
y: headerView.bottom + 10,
width: view.width-50,
height: 52.0
)
passwordField.frame = CGRect(x: 25,
y: usernameEmailField.bottom + 10,
width: view.width-50,
height: 52.0
)
loginButton.frame = CGRect(x: 25,
y: passwordField.bottom + 10,
width: view.width-50,
height: 52.0
)
createAccountButton.frame = CGRect(x: 25,
y: loginButton.bottom + 10,
width: view.width-50,
height: 52.0
)
termsButton.frame = CGRect(x: 10, y: view.height-view.safeAreaInsets.bottom-100, width: view.width-20, height: 50)
configurationView()
}
private func configurationView() {
guard headerView.subviews.count == 1 else {
return
}
guard let backgroundView = headerView.subviews.first else {
return
}
backgroundView.frame = headerView.bounds
//Pic Pool Logo
let imageView = UIImageView(image: UIImage(named: "ClearLogo"))
headerView.addSubview(imageView)
imageView.contentMode = .scaleAspectFit
imageView.frame = CGRect(x: headerView.width/4.0,
y: view.safeAreaInsets.top,
width: headerView.width/2.0,
height: headerView.height - view.safeAreaInsets.top)
}
private func addSubviews(){
view.addSubview(usernameEmailField)
view.addSubview(passwordField)
view.addSubview(loginButton)
view.addSubview(termsButton)
view.addSubview(privacyButton)
view.addSubview(createAccountButton)
view.addSubview(headerView)
}
#objc private func didTaploginButton() {}
#objc private func didTaptermsButton() {}
#objc private func didTapprivacyButton() {}
#objc private func didTapcreateAccountButton() {}
}
Take a real hard look at...
private let loginButton: UIButton = {
let loginbutton = UIButton()
loginbutton.setTitle("Log In", for: .normal)
loginbutton.layer.masksToBounds = true
loginbutton.layer.cornerRadius = Constants.cornerRadius
loginbutton.backgroundColor = .link
loginbutton.setTitleColor(.white, for: .normal)
return UIButton()
}()
see anything wrong? Maybe focus in on return UIButton()
So, changing it to...
private let loginButton: UIButton = {
let loginbutton = UIButton()
loginbutton.setTitle("Log In", for: [])
loginbutton.layer.masksToBounds = true
loginbutton.layer.cornerRadius = Constants.cornerRadius
loginbutton.backgroundColor = .link
loginbutton.setTitleColor(.white, for: [])
return loginbutton
}()
will produce...
Runnable example
//
// ViewController.swift
// StackOverflow
//
// Created by Shane Whitehead on 4/5/2022.
//
import UIKit
class ViewController: UIViewController, UITextFieldDelegate{
struct Constants {
static let cornerRadius: CGFloat = 8.0
}
//Declaration of login fields
override func viewDidLoad() {
super.viewDidLoad()
loginButton.addTarget(self, action: #selector(didTaploginButton), for: .touchUpInside)
createAccountButton.addTarget(self, action: #selector(didTapcreateAccountButton), for: .touchUpInside)
termsButton.addTarget(self, action: #selector(didTaptermsButton), for: .touchUpInside)
privacyButton.addTarget(self, action: #selector(didTapprivacyButton), for: .touchUpInside)
usernameEmailField.delegate = self
passwordField.delegate = self
addSubviews()
view.backgroundColor = .systemBackground
// Do any additional setup after loading the view.
}
private let usernameEmailField: UITextField = {
let field = UITextField()
field.placeholder = "Username or Email"
field.returnKeyType = .next
field.leftViewMode = .always
field.leftView = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: 0))
field.autocapitalizationType = .none
field.autocorrectionType = .no
field.layer.masksToBounds = true
field.layer.cornerRadius = Constants.cornerRadius
field.backgroundColor = .secondarySystemBackground
return field
}()
private let passwordField: UITextField = {
let field = UITextField()
field.placeholder = "Password"
field.returnKeyType = .next
field.leftViewMode = .always
field.leftView = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: 0))
field.autocapitalizationType = .none
field.autocorrectionType = .no
field.layer.masksToBounds = true
field.layer.cornerRadius = Constants.cornerRadius
field.backgroundColor = .secondarySystemBackground
return field
}()
private let loginButton: UIButton = {
let loginbutton = UIButton()
loginbutton.setTitle("Log In", for: [])
loginbutton.layer.masksToBounds = true
loginbutton.layer.cornerRadius = Constants.cornerRadius
loginbutton.backgroundColor = .link
loginbutton.setTitleColor(.white, for: [])
return loginbutton
}()
private let termsButton: UIButton = {
let button = UIButton()
button.setTitle("Terms of Service", for: [])
button.setTitleColor(.secondaryLabel, for: [])
return button
}()
private let privacyButton: UIButton = {
return UIButton()
}()
private let createAccountButton: UIButton = {
let button = UIButton()
button.setTitleColor(.lightGray, for: [])
button.setTitle("New User? Create an Account", for: [])
button.backgroundColor = .systemBlue
button.layer.cornerRadius = Constants.cornerRadius
button.setTitleColor(.label, for: .normal)
return button
}()
//Picture behind the Logo
private let headerView: UIView = {
let header = UIView()
header.clipsToBounds = true
let backgroundImageView = UIImageView(image: UIImage(named: "Bluewater"))
header.addSubview(backgroundImageView)
return header
}()
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
//assigning frames
headerView.frame = CGRect(x: 0,
y: 0.0,
width: view.width,
height: view.height/3.0
)
usernameEmailField.frame = CGRect(x: 25,
y: headerView.bottom + 10,
width: view.width-50,
height: 52.0
)
passwordField.frame = CGRect(x: 25,
y: usernameEmailField.bottom + 10,
width: view.width-50,
height: 52.0
)
loginButton.frame = CGRect(x: 25,
y: passwordField.bottom + 10,
width: view.width-50,
height: 52.0
)
createAccountButton.frame = CGRect(x: 25,
y: loginButton.bottom + 10,
width: view.width-50,
height: 52.0
)
termsButton.frame = CGRect(x: 10, y: view.height-view.safeAreaInsets.bottom-100, width: view.width-20, height: 50)
configurationView()
}
private func configurationView() {
guard headerView.subviews.count == 1 else {
return
}
guard let backgroundView = headerView.subviews.first else {
return
}
backgroundView.frame = headerView.bounds
//Pic Pool Logo
let imageView = UIImageView(image: UIImage(named: "ClearLogo"))
headerView.addSubview(imageView)
imageView.contentMode = .scaleAspectFit
imageView.frame = CGRect(x: headerView.width/4.0,
y: view.safeAreaInsets.top,
width: headerView.width/2.0,
height: headerView.height - view.safeAreaInsets.top)
}
private func addSubviews(){
view.addSubview(usernameEmailField)
view.addSubview(passwordField)
view.addSubview(loginButton)
view.addSubview(termsButton)
view.addSubview(privacyButton)
view.addSubview(createAccountButton)
view.addSubview(headerView)
}
#objc private func didTaploginButton() {}
#objc private func didTaptermsButton() {}
#objc private func didTapprivacyButton() {}
#objc private func didTapcreateAccountButton() {}
}
extension UIView {
var width: CGFloat {
return bounds.width
}
var height: CGFloat {
return bounds.height
}
var bottom: CGFloat {
return frame.minY + bounds.height
}
}
I'd also, strongly, recommend either making the time to learn how to use auto layout OR SwiftUI instead

Get titleLabel during drag and drop

An array of UIButton are generated programmatically. Is it possible to get the titleLabel of the UIButton triggering the drag? Or are there any ways to get info of the UIButton in the drag function?
override func viewDidLoad() {
super.viewDidLoad()
for q in question{
addButton(title:q)
}
}
func addButton(title:String){
var tbutton: UIButton = {
let button = UIButton(frame: CGRect(x: 0, y: 0,
width: buttonWidth,
height: buttonHeight))
button.center = self.view.center
button.layer.cornerRadius = 5
button.layer.masksToBounds = true
button.backgroundColor = UIColor.yellow
button.setTitleColor(.black, for: .normal)
button.setTitle(title, for: .normal)
return button
}()
view.addSubview(tbutton)
tbutton.addTarget(self,
action: #selector(drag(control:event:)),
for: UIControl.Event.touchDragInside)
tbutton.addTarget(self,
action: #selector(drag(control:event:)),
for: [UIControl.Event.touchDragExit,
UIControl.Event.touchDragOutside])
self.buttonArray.append(tbutton)
}
#objc func drag(control: UIControl, event: UIEvent) {
//print(event)
if let center = event.allTouches?.first?.location(in: self.view) {
control.center = center
}
/////////////////////////////////////////
// Get titleLabel of the button here???????????
/////////////////////////////////////////
}
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let button = UIButton.init(frame: CGRect.init(x: 0, y: 0, width: 100, height: 100))
button.backgroundColor = .yellow
button.center = CGPoint.init(x: view.bounds.width / 2, y: view.bounds.height / 2)
view.addSubview(button)
let pangesture = UIPanGestureRecognizer.init(target: self, action: #selector(ViewController.panning(_:)))
button.addGestureRecognizer(pangesture)
}
#objc func panning(_ panGesture : UIPanGestureRecognizer){
let button = panGesture.view as! UIButton
switch panGesture.state{
case .changed:
button.center = panGesture.location(in: view)
panGesture.setTranslation(.zero, in: view)
default:
break
}
// here you can get the button's properties too.
}
}

how to put badge on UIBarButtonItem in swift 4?

I want put badge on UIBarButtonItem. for that I use the following reference
Add badge alert in right bar button item in swift
in this I create the 'UIBarButtonItem+Badge.swift' file and put that code in it. In my viewcontroller I take the outlet of the UIBarButtonItem. And call the function but it didn't work for me. my viewcontroller file is this
My UIBarButtonItem+Badge.swift file is
extension CAShapeLayer {
func drawRoundedRect(rect: CGRect, andColor color: UIColor, filled: Bool) {
fillColor = filled ? color.cgColor : UIColor.white.cgColor
strokeColor = color.cgColor
path = UIBezierPath(roundedRect: rect, cornerRadius: 7).cgPath
}
}
private var handle: UInt8 = 0;
extension UIBarButtonItem {
private var badgeLayer: CAShapeLayer? {
if let b: AnyObject = objc_getAssociatedObject(self, &handle) as AnyObject? {
return b as? CAShapeLayer
} else {
return nil
}
}
func setBadge(text: String?, withOffsetFromTopRight offset: CGPoint = CGPoint.zero, andColor color:UIColor = UIColor.red, andFilled filled: Bool = true, andFontSize fontSize: CGFloat = 11)
{
badgeLayer?.removeFromSuperlayer()
if (text == nil || text == "") {
return
}
addBadge(text: text!, withOffset: offset, andColor: color, andFilled: filled)
}
func addBadge(text: String, withOffset offset: CGPoint = CGPoint.zero, andColor color: UIColor = UIColor.red, andFilled filled: Bool = true, andFontSize fontSize: CGFloat = 11)
{
guard let view = self.value(forKey: "view") as? UIView else { return }
var font = UIFont.systemFont(ofSize: fontSize)
if #available(iOS 9.0, *) { font = UIFont.monospacedDigitSystemFont(ofSize: fontSize, weight: UIFont.Weight.regular) }
let badgeSize = text.size(withAttributes: [NSAttributedString.Key.font: font])
// Initialize Badge
let badge = CAShapeLayer()
let height = badgeSize.height;
var width = badgeSize.width + 2 /* padding */
//make sure we have at least a circle
if (width < height) {
width = height
}
//x position is offset from right-hand side
let x = view.frame.width - width + offset.x
let badgeFrame = CGRect(origin: CGPoint(x: x, y: offset.y), size: CGSize(width: width, height: height))
badge.drawRoundedRect(rect: badgeFrame, andColor: color, filled: filled)
view.layer.addSublayer(badge)
// Initialiaze Badge's label
let label = CATextLayer()
label.string = text
label.alignmentMode = CATextLayerAlignmentMode.center
label.font = font
label.fontSize = font.pointSize
label.frame = badgeFrame
label.foregroundColor = filled ? UIColor.white.cgColor : color.cgColor
label.backgroundColor = UIColor.clear.cgColor
label.contentsScale = UIScreen.main.scale
badge.addSublayer(label)
// Save Badge as UIBarButtonItem property
objc_setAssociatedObject(self, &handle, badge, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
}
private func removeBadge() {
badgeLayer?.removeFromSuperlayer()
}
}
my viewcontroller file is this
import UIKit
#IBOutlet weak var notificationLabel: UIBarButtonItem!
in view didload function
notificationLabel.addBadge(text: "4")
Here is a swift 4 solution of #VishalPethani with small convenient changes.
Add this UIBarButtonItem to you code:
class BadgedButtonItem: UIBarButtonItem {
public func setBadge(with value: Int) {
self.badgeValue = value
}
private var badgeValue: Int? {
didSet {
if let value = badgeValue,
value > 0 {
lblBadge.isHidden = false
lblBadge.text = "\(value)"
} else {
lblBadge.isHidden = true
}
}
}
var tapAction: (() -> Void)?
private let filterBtn = UIButton()
private let lblBadge = UILabel()
override init() {
super.init()
setup()
}
init(with image: UIImage?) {
super.init()
setup(image: image)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setup()
}
private func setup(image: UIImage? = nil) {
self.filterBtn.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
self.filterBtn.adjustsImageWhenHighlighted = false
self.filterBtn.setImage(image, for: .normal)
self.filterBtn.addTarget(self, action: #selector(buttonPressed), for: .touchUpInside)
self.lblBadge.frame = CGRect(x: 20, y: 0, width: 15, height: 15)
self.lblBadge.backgroundColor = .red
self.lblBadge.clipsToBounds = true
self.lblBadge.layer.cornerRadius = 7
self.lblBadge.textColor = UIColor.white
self.lblBadge.font = UIFont.systemFont(ofSize: 10)
self.lblBadge.textAlignment = .center
self.lblBadge.isHidden = true
self.lblBadge.minimumScaleFactor = 0.1
self.lblBadge.adjustsFontSizeToFitWidth = true
self.filterBtn.addSubview(lblBadge)
self.customView = filterBtn
}
#objc func buttonPressed() {
if let action = tapAction {
action()
}
}
}
And then you can use it like that:
class ViewController: UIViewController {
let btn = BadgedButtonItem(with: UIImage(named: "your_image"))
override func viewDidLoad() {
super.viewDidLoad()
self.navigationItem.rightBarButtonItem = btn
btn.tapAction = {
self.btn.setBadge(with: 1)
}
}
}
Here is a repository for that with some customisation
https://github.com/Syngmaster/BadgedBarButtonItem
Here it is a simple solution for putting the badge on a navigation bar
let filterBtn = UIButton.init(frame: CGRect.init(x: 0, y: 0, width: 30, height: 30))
filterBtn.setImage(UIImage.fontAwesomeIcon(name: .filter, style: .solid,
textColor: UIColor.white,
size: CGSize(width: 25, height: 25)), for: .normal)
filterBtn.addTarget(self, action: #selector(filterTapped), for: .touchUpInside)
let lblBadge = UILabel.init(frame: CGRect.init(x: 20, y: 0, width: 15, height: 15))
self.lblBadge.backgroundColor = COLOR_GREEN
self.lblBadge.clipsToBounds = true
self.lblBadge.layer.cornerRadius = 7
self.lblBadge.textColor = UIColor.white
self.lblBadge.font = FontLatoRegular(s: 10)
self.lblBadge.textAlignment = .center
filterBtn.addSubview(self.lblBadge)
self.navigationItem.rightBarButtonItems = [UIBarButtonItem.init(customView: filterBtn)]
In your case
self.navigationItem.rightBarButtonItems = [notificationLabel.init(customView: filterBtn)]
import Foundation
import UIKit
extension UIBarButtonItem {
convenience init(icon: UIImage, badge: String, _ badgeBackgroundColor: UIColor = #colorLiteral(red: 0.9156965613, green: 0.380413115, blue: 0.2803866267, alpha: 1), target: Any? = self, action: Selector? = nil) {
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 24, height: 24))
imageView.image = icon
let label = UILabel(frame: CGRect(x: -8, y: -5, width: 18, height: 18))
label.text = badge
label.backgroundColor = badgeBackgroundColor
label.adjustsFontSizeToFitWidth = true
label.textAlignment = .center
label.font = UIFont.boldSystemFont(ofSize: 10)
label.clipsToBounds = true
label.layer.cornerRadius = 18 / 2
label.textColor = .white
let buttonView = UIView(frame: CGRect(x: 0, y: 0, width: 24, height: 24))
buttonView.addSubview(imageView)
buttonView.addSubview(label)
buttonView.addGestureRecognizer(UITapGestureRecognizer.init(target: target, action: action))
self.init(customView: buttonView)
}
}
Use:
item = UIBarButtonItem(icon: UIImage(), badge: "\(Test)", target: self, action: nil)
self.navigationItem.rightBarButtonItems = [item]
extension UIBarButtonItem {
func setBadge(with value: Int) {
guard let lblBadge = customView?.viewWithTag(100) as? UILabel else { return }
if value > 0 {
lblBadge.isHidden = false
lblBadge.text = "\(value)"
} else {
lblBadge.isHidden = true
}
}
func setup(image: UIImage? = nil) {
customView?.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
let lblBadge = UILabel()
lblBadge.frame = CGRect(x: 20, y: 0, width: 15, height: 15)
lblBadge.backgroundColor = .red
lblBadge.tag = 100
lblBadge.clipsToBounds = true
lblBadge.layer.cornerRadius = 7
lblBadge.textColor = UIColor.white
lblBadge.font = UIFont.systemFont(ofSize: 10)
lblBadge.textAlignment = .center
lblBadge.isHidden = true
lblBadge.minimumScaleFactor = 0.1
lblBadge.adjustsFontSizeToFitWidth = true
customView?.addSubview(lblBadge)
}
}
Steps:
Drag an drop an UIButton in navigation/toolbar or add it programmatically using customView initializer.
Call setup method in view didload:
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
itemsButton.setup(image: UIImage(named: "image_name"))
}
Connect an #IBOutlet/or programmatically and call setBadge method everywhere you need:
badgeButton.setBadge(with: 10)

Start activity indicator view in iOS and Swift [duplicate]

I wanna show, programmatically, an activity indicator with text, like the one in the Photos app (after editing and saving a picture). How can I do this?
Xcode 9.0 • Swift 4.0
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: .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)
}
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()
}
}
While Esq's answer works, I've added my own implementation which is more in line with good component architecture by separating the view into it's own class. It also uses dynamic blurring introduced in iOS 8.
Here is how mine looks with an image background:
The code for this is encapsulated in it's own UIView class which means you can reuse it whenever you desire.
Updated for Swift 3
Usage
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 Code
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
}
}
Swift 2
An example on how to use it is like this:
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()
}
Here is the UIView code:
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
}
}
Heres how this code looks:
Heres my drag and drop code:
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()
}
Here is an open source version of this: https://github.com/goktugyil/CozyLoadingActivity
Based o my previous answer, here is a more elegant solution with a custom class:
First define this custom class:
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
}
Now on your UIViewController class:
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()
}
For activity indicator, its better you create one custom class.
Instead of creating UIActivityIndicator in each UIViewController.Subclass UIView and use from any UIViewController.
Updated for Swift 5.0:
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: CGRect(x: inview.frame.midX - 90, y: inview.frame.midY - 250 , width: 180, height: 50))
initalizeCustomIndicator()
}
convenience init(inview:UIView) {
self.init(inview: inview,loadingViewColor: UIColor.brown,indicatorColor:UIColor.black, msg: "Loading..")
}
convenience init(inview:UIView,messsage:String) {
self.init(inview: inview,loadingViewColor: UIColor.brown,indicatorColor:UIColor.black, msg: messsage)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func initalizeCustomIndicator(){
messageFrame.frame = self.bounds
activityIndicator = UIActivityIndicatorView(style: UIActivityIndicatorView.Style.medium)
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.white
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()
}
}
}
Put this class in your project and then call from any ViewController as
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()
}
For Swift 3
Usage
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
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
}
}
}
You can create your own. For example:
Create a view with white background and rounded corners:
var view = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 50))
view.backgroundColor = UIColor.whiteColor()
view.layer.cornerRadius = 10
Add two subviews, a UIActivityIndicatorView and a UILabel:
var wait = UIActivityIndicatorView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
wait.color = UIColor.blackColor()
wait.hidesWhenStopped = false
var text = UILabel(frame: CGRect(x: 60, y: 0, width: 200, height: 50))
text.text = "Processing..."
view.addSubview(wait)
view.addSubview(text)
Based on "MirekE" answer here is a code that i tested now and its working:
var activityIndicator: UIActivityIndicatorView!
var viewActivityIndicator: UIView!
override func viewDidLoad()
{
super.viewDidLoad()
let width: CGFloat = 200.0
let height: CGFloat = 50.0
let x = self.view.frame.width/2.0 - width/2.0
let y = self.view.frame.height/2.0 - height/2.0
self.viewActivityIndicator = UIView(frame: CGRect(x: x, y: y, width: width, height: height))
self.viewActivityIndicator.backgroundColor = UIColor(red: 255.0/255.0, green: 204.0/255.0, blue: 51.0/255.0, alpha: 0.5)
self.viewActivityIndicator.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 = "Processing..."
self.viewActivityIndicator.addSubview(self.activityIndicator)
self.viewActivityIndicator.addSubview(titleLabel)
self.view.addSubview(self.viewActivityIndicator)
}
func doSometing()
{
self.activityIndicator.startAnimating()
UIApplication.sharedApplication().beginIgnoringInteractionEvents()
//do something here that will taking time
self.activityIndicator.stopAnimating()
UIApplication.sharedApplication().endIgnoringInteractionEvents()
self.viewActivityIndicator.removeFromSuperview()
}
simple activity controller class !!!
class ActivityIndicator: UIVisualEffectView {
let activityIndictor: UIActivityIndicatorView = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.WhiteLarge)
let label: UILabel = UILabel()
let blurEffect = UIBlurEffect(style: .Dark)
let vibrancyView: UIVisualEffectView
init() {
self.vibrancyView = UIVisualEffectView(effect: UIVibrancyEffect(forBlurEffect: blurEffect))
super.init(effect: blurEffect)
self.setup()
}
required init?(coder aDecoder: NSCoder) {
self.vibrancyView = UIVisualEffectView(effect: UIVibrancyEffect(forBlurEffect: blurEffect))
super.init(coder: aDecoder)
self.setup()
}
func setup() {
contentView.addSubview(vibrancyView)
vibrancyView.contentView.addSubview(activityIndictor)
activityIndictor.startAnimating()
}
override func didMoveToSuperview() {
super.didMoveToSuperview()
if let superview = self.superview {
let width: CGFloat = 75.0
let height: CGFloat = 75.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(18, height / 2 - activityIndicatorSize / 2,
activityIndicatorSize,
activityIndicatorSize)
layer.cornerRadius = 8.0
layer.masksToBounds = true
}
}
func show() {
self.hidden = false
}
func hide() {
self.hidden = true
}}
usage :-
let activityIndicator = ActivityIndicator()
self.view.addSubview(activityIndicator)
to hide :-
activityIndicator.hide()
Xcode 10.1 • Swift 4.2
import UIKit
class ProgressHUD: UIVisualEffectView {
var title: String?
var theme: UIBlurEffect.Style = .light
let strLabel = UILabel(frame: CGRect(x: 50, y: 0, width: 160, height: 46))
let activityIndicator = UIActivityIndicatorView()
init(title: String, theme: UIBlurEffect.Style = .light) {
super.init(effect: UIBlurEffect(style: theme))
self.title = title
self.theme = theme
[activityIndicator, strLabel].forEach(contentView.addSubview(_:))
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func didMoveToSuperview() {
super.didMoveToSuperview()
if let superview = self.superview {
frame = CGRect(x: superview.frame.midX - strLabel.frame.width / 2,
y: superview.frame.midY - strLabel.frame.height / 2, width: 160, height: 46)
layer.cornerRadius = 15.0
layer.masksToBounds = true
activityIndicator.frame = CGRect(x: 0, y: 0, width: 46, height: 46)
activityIndicator.startAnimating()
strLabel.text = title
strLabel.font = .systemFont(ofSize: 14, weight: UIFont.Weight.medium)
switch theme {
case .dark:
strLabel.textColor = .white
activityIndicator.style = .white
default:
strLabel.textColor = .gray
activityIndicator.style = .gray
}
}
}
func show() {
self.isHidden = false
}
func hide() {
self.isHidden = true
}
}
Use:
let progress = ProgressHUD(title: "Authorization", theme: .dark)
[progress].forEach(view.addSubview(_:))
With auto width and theme support also detects rotate while busy (Swift 3 version)
Use it like below:
var progressView: ProgressView?
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
self.progressView = ProgressView(message: "Work in progress!",
theme: .dark,
isModal: true)
}
#IBAction func onPause(_ sender: AnyObject) {
self.progressView.show()
}
#IBAction func onResume(_ sender: AnyObject) {
self.progressView.hide()
}
ProgressView.swift
import UIKit
class ProgressView: UIView {
enum Theme {
case light
case dark
}
var theme: Theme
var container: UIStackView
var activityIndicator: UIActivityIndicatorView
var label: UILabel
var glass: UIView
private var message: String
private var isModal: Bool
init(message: String, theme: theme, isModal: Bool) {
// Init
self.message = message
self.theme = theme
self.isModal = isModal
self.container = UIStackView()
self.activityIndicator = UIActivityIndicatorView()
self.label = UILabel()
self.glass = UIView()
// Get proper width by text message
let fontName = self.label.font.fontName
let fontSize = self.label.font.pointSize
if let font = UIFont(name: fontName, size: fontSize) {
let fontAttributes = [NSFontAttributeName: font]
let size = (message as NSString).size(attributes: fontAttributes)
super.init(frame: CGRect(x: 0, y: 0, width: size.width + 50, height: 50))
} else {
super.init(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
}
// Detect rotation
NotificationCenter.default.addObserver(self, selector: #selector(onRotate), name: NSNotification.Name.UIDeviceOrientationDidChange, object: nil)
// Style
self.layer.cornerRadius = 3
if (self.theme == .dark) {
self.backgroundColor = .darkGray
} else {
self.backgroundColor = .lightGray
}
// Label
if self.theme == .dark {
self.label.textColor = .white
}else{
self.label.textColor = .black
}
self.label.text = self.message
// Container
self.container.frame = self.frame
self.container.spacing = 5
self.container.layoutMargins = UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
self.container.isLayoutMarginsRelativeArrangement = true
// Activity indicator
if (self.theme == .dark) {
self.activityIndicator = UIActivityIndicatorView(activityIndicatorStyle: .whiteLarge)
self.activityIndicator.color = .white
} else {
self.activityIndicator = UIActivityIndicatorView(activityIndicatorStyle:.whiteLarge)
self.activityIndicator.color = .black
}
self.activityIndicator.startAnimating()
// Add them to container
// First glass
if let superview = UIApplication.shared.keyWindow {
if (self.isModal) {
// glass
self.glass.frame = superview.frame;
if (self.theme == .dark) {
self.glass.backgroundColor = UIColor.black.withAlphaComponent(0.5)
} else {
self.glass.backgroundColor = UIColor.white.withAlphaComponent(0.5)
}
superview.addSubview(glass)
}
}
// Then activity indicator and label
container.addArrangedSubview(self.activityIndicator)
container.addArrangedSubview(self.label)
// Last attach it to container (StackView)
self.addSubview(container)
if let superview = UIApplication.shared.keyWindow {
self.center = superview.center
superview.addSubview(self)
}
//Do not show until show() is called
self.hide()
}
required init(coder: NSCoder) {
self.theme = .dark
self.Message = "Not set!"
self.isModal = true
self.container = UIStackView()
self.activityIndicator = UIActivityIndicatorView()
self.label = UILabel()
self.glass = UIView()
super.init(coder: coder)!
}
func onRotate() {
if let superview = self.superview {
self.glass.frame = superview.frame
self.center = superview.center
// superview.addSubview(self)
}
}
public func show() {
self.glass.isHidden = false
self.isHidden = false
}
public func hide() {
self.glass.isHidden = true
self.isHidden = true
}
}
This code work in SWIFT 2.0.
Must Declare a variable for initialize UIActivityIndicatorView
let actInd: UIActivityIndicatorView = UIActivityIndicatorView()
After initialize put this code in your controller.
actInd.center = ImageView.center
actInd.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.WhiteLarge
view.addSubview(actInd)
actInd.startAnimating()
after your download process complete then hide a animation.
self.actInd.stopAnimating()
In Swift 3
Declare variables which we will use
var activityIndicator = UIActivityIndicatorView()
let loadingView = UIView()
let loadingLabel = UILabel()
Set label , view and activityIndicator
func setLoadingScreen(myMsg : String) {
let width: CGFloat = 120
let height: CGFloat = 30
let x = (self.view.frame.width / 2) - (width / 2)
let y = (169 / 2) - (height / 2) + 60
loadingView.frame = CGRect(x: x, y: y, width: width, height: height)
self.loadingLabel.textColor = UIColor.white
self.loadingLabel.textAlignment = NSTextAlignment.center
self.loadingLabel.text = myMsg
self.loadingLabel.frame = CGRect(x: 0, y: 0, width: 160, height: 30)
self.loadingLabel.isHidden = false
self.activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.white
self.activityIndicator.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
self.activityIndicator.startAnimating()
loadingView.addSubview(self.spinner)
loadingView.addSubview(self.loadingLabel)
self.view.addSubview(loadingView)
}
Start Animation
#IBAction func start_animation(_ sender: Any) {
setLoadingScreen(myMsg: "Loading...")
}
Stop Animation
#IBAction func stop_animation(_ sender: Any) {
self.spinner.stopAnimating()
UIApplication.shared.endIgnoringInteractionEvents()
self.loadingLabel.isHidden = true
}
import UIKit
class ViewControllerUtils {
let containerView: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.backgroundColor = UIColor(white: 0, alpha: 0.3)
return view
}()
let loadingView: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.backgroundColor = UIColor(white: 0, alpha: 0.7)
view.clipsToBounds = true
view.layer.cornerRadius = 10
return view
}()
let activityIndicatorView: UIActivityIndicatorView = {
let aiv = UIActivityIndicatorView()
aiv.translatesAutoresizingMaskIntoConstraints = false
aiv.style = UIActivityIndicatorView.Style.whiteLarge
return aiv
}()
let loadingLabel: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.text = "Loading..."
label.textAlignment = .center
label.textColor = .white
label.font = .systemFont(ofSize: 15, weight: UIFont.Weight.medium)
return label
}()
func showLoader() {
guard let window = UIApplication.shared.keyWindow else { return }
window.addSubview(containerView)
containerView.addSubview(loadingView)
loadingView.addSubview(activityIndicatorView)
loadingView.addSubview(loadingLabel)
containerView.leftAnchor.constraint(equalTo: window.leftAnchor).isActive = true
containerView.rightAnchor.constraint(equalTo: window.rightAnchor).isActive = true
containerView.topAnchor.constraint(equalTo: window.topAnchor).isActive = true
containerView.bottomAnchor.constraint(equalTo: window.bottomAnchor).isActive = true
loadingView.centerXAnchor.constraint(equalTo: window.centerXAnchor).isActive = true
loadingView.centerYAnchor.constraint(equalTo: window.centerYAnchor).isActive = true
loadingView.widthAnchor.constraint(equalToConstant: 120).isActive = true
loadingView.heightAnchor.constraint(equalToConstant: 120).isActive = true
activityIndicatorView.centerXAnchor.constraint(equalTo: window.centerXAnchor).isActive = true
activityIndicatorView.centerYAnchor.constraint(equalTo: window.centerYAnchor).isActive = true
activityIndicatorView.widthAnchor.constraint(equalToConstant: 60).isActive = true
activityIndicatorView.heightAnchor.constraint(equalToConstant: 60).isActive = true
loadingLabel.leftAnchor.constraint(equalTo: loadingView.leftAnchor).isActive = true
loadingLabel.rightAnchor.constraint(equalTo: loadingView.rightAnchor).isActive = true
loadingLabel.bottomAnchor.constraint(equalTo: loadingView.bottomAnchor).isActive = true
loadingLabel.heightAnchor.constraint(equalToConstant: 40).isActive = true
DispatchQueue.main.async {
self.activityIndicatorView.startAnimating()
}
}
func hideLoader() {
DispatchQueue.main.async {
self.activityIndicatorView.stopAnimating()
self.activityIndicatorView.removeFromSuperview()
self.loadingLabel.removeFromSuperview()
self.loadingView.removeFromSuperview()
self.containerView.removeFromSuperview()
}
}
}
//// In order to show the activity indicator, call the function from your view controller
// let viewControllerUtils = ViewControllerUtils()
// viewControllerUtils.showLoader()
//// In order to hide the activity indicator, call the function from your view controller
// viewControllerUtils.hideLoader()
class ViewControllerUtils2 {
var container: UIView = UIView()
var loadingView: UIView = UIView()
var activityIndicator: UIActivityIndicatorView = UIActivityIndicatorView()
let loadingLabel = UILabel()
func showLoader(_ uiView: UIView) {
container.frame = uiView.frame
container.center = uiView.center
container.backgroundColor = UIColor(white: 0, alpha: 0.3)
loadingView.frame = CGRect(x: 0, y: 0, width: 120, height: 120)
loadingView.center = uiView.center
loadingView.backgroundColor = UIColor(white: 0, alpha: 0.7)
loadingView.clipsToBounds = true
loadingView.layer.cornerRadius = 10
activityIndicator.frame = CGRect(x: 0, y: 0, width: 60, height: 60)
activityIndicator.style = UIActivityIndicatorView.Style.whiteLarge
activityIndicator.center = CGPoint(x: loadingView.frame.size.width / 2, y: loadingView.frame.size.height / 2)
loadingLabel.frame = CGRect(x: 0, y: 80, width: 120, height: 40)
loadingLabel.text = "Loading..."
loadingLabel.textAlignment = .center
loadingLabel.textColor = .white
loadingLabel.font = .systemFont(ofSize: 15, weight: UIFont.Weight.medium)
uiView.addSubview(container)
container.addSubview(loadingView)
loadingView.addSubview(activityIndicator)
loadingView.addSubview(loadingLabel)
DispatchQueue.main.async {
self.activityIndicator.startAnimating()
}
}
func hideLoader() {
DispatchQueue.main.async {
self.activityIndicator.stopAnimating()
self.activityIndicator.removeFromSuperview()
self.loadingLabel.removeFromSuperview()
self.loadingView.removeFromSuperview()
self.container.removeFromSuperview()
}
}
}
For Swift 5
Indicator with label inside WKWebview
var strLabel = UILabel()
let effectView = UIVisualEffectView(effect: UIBlurEffect(style: .dark))
let loadingTextLabel = UILabel()
#IBOutlet var indicator: UIActivityIndicatorView!
#IBOutlet var webView: WKWebView!
var refController:UIRefreshControl = UIRefreshControl()
override func viewDidLoad() {
webView = WKWebView(frame: CGRect.zero)
webView.navigationDelegate = self
webView.uiDelegate = self as? WKUIDelegate
let preferences = WKPreferences()
preferences.javaScriptEnabled = true
let configuration = WKWebViewConfiguration()
configuration.preferences = preferences
webView.allowsBackForwardNavigationGestures = true
webView.load(URLRequest(url: URL(string: "https://www.google.com")!))
setBackground()
}
func setBackground() {
view.addSubview(webView)
webView.translatesAutoresizingMaskIntoConstraints = false
webView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
webView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
webView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
webView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
}
func showActivityIndicator(show: Bool) {
if show {
strLabel = UILabel(frame: CGRect(x: 55, y: 0, width: 400, height: 66))
strLabel.text = "Please Wait. Checking Internet Connection..."
strLabel.font = UIFont(name: "Avenir Light", size: 12)
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: 300, height: 66)
effectView.layer.cornerRadius = 15
effectView.layer.masksToBounds = true
indicator = UIActivityIndicatorView(style: .white)
indicator.frame = CGRect(x: 0, y: 0, width: 66, height: 66)
indicator.startAnimating()
effectView.contentView.addSubview(indicator)
effectView.contentView.addSubview(strLabel)
indicator.transform = CGAffineTransform(scaleX: 1.4, y: 1.4);
effectView.center = webView.center
view.addSubview(effectView)
} else {
strLabel.removeFromSuperview()
effectView.removeFromSuperview()
indicator.removeFromSuperview()
indicator.stopAnimating()
}
}

Add a subview(ShareView) but nothing happens when touching a button on it

Add a subview(ShareView) but nothing happens when touching a button(coverBtn) on it if I shareVC.addsubView(self) in func showShareView ()
But If superView.addSubview(coverBtn) and superView.addSubview(sharePanel) separately, everything will be fine.
import UIKit
class ShareView: UIView {
weak var shareVC: UINavigationController?
// UI
private lazy var coverView: UIView! = {
let coverView = UIView(frame: UIScreen.mainScreen().bounds)
return coverView
}()
// transluscent cover
private lazy var coverBtn: UIButton! = {
let bounds = UIScreen.mainScreen().bounds
let frame = CGRectMake(0, 0, bounds.width, bounds.height)
let coverBtn = UIButton(frame: frame)
print ("UIScreen.mainScreen().bounds = \(UIScreen.mainScreen().bounds)")
coverBtn.alpha = 0.2
coverBtn.backgroundColor = UIColor.blackColor()
coverBtn.addTarget(self, action: #selector(ShareView.pressCoverBtn), forControlEvents: .TouchUpInside)
return coverBtn
}()
let panelHeight: CGFloat = 215
// share panel
private lazy var sharePanel: UIView! = {
// panel size
let bounds = UIScreen.mainScreen().bounds
let h = 215
let frame = CGRectMake(0, bounds.height, bounds.width, self.panelHeight)
let sharePanel: UIView = UIView(frame: frame)
sharePanel.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1.0)
// label
let labelHeight: CGFloat = 30
let labelWidth: CGFloat = 100
let labelY: CGFloat = 20
let labelFrame = CGRectMake(sharePanel.frame.width/2-labelWidth/2, labelY, labelWidth, labelHeight)
let label = UILabel(frame: labelFrame)
label.text = "分享到"
label.textAlignment = .Center
label.backgroundColor = UIColor.whiteColor()
sharePanel.addSubview(label)
// share buttons
let marginW: CGFloat = 80
let btnInv: CGFloat = 20
let btnCnt: CGFloat = 3
let btnsY = label.frame.maxY + 15
let btnA = (sharePanel.frame.width - 2*marginW - (btnCnt-1)*btnInv)/btnCnt
let wcFrame = CGRectMake(marginW, btnsY, btnA, btnA)
let pyqFrame = CGRectMake(wcFrame.maxX+btnInv, btnsY, btnA, btnA)
let wbFrame = CGRectMake(pyqFrame.maxX+btnInv, btnsY, btnA, btnA)
let wcBtn = UIButton(frame: wcFrame)
let pyqBtn = UIButton(frame: pyqFrame)
let wbBtn = UIButton(frame: wbFrame)
wcBtn.setImage(UIImage(named: "share_wx"), forState: .Normal)
pyqBtn.setImage(UIImage(named: "share_pyq"), forState: .Normal)
wbBtn.setImage(UIImage(named: "share_wb"), forState: .Normal)
sharePanel.addSubview(wcBtn)
sharePanel.addSubview(pyqBtn)
sharePanel.addSubview(wbBtn)
// cancel button
let ccW = sharePanel.frame.width/2
let ccH: CGFloat = 50
let ccFrame = CGRectMake(sharePanel.frame.width/2-ccW/2, wcBtn.frame.maxY+10, ccW, ccH)
let cancelBtn: UIButton = UIButton(frame: ccFrame)
cancelBtn.setBackgroundImage(UIImage(named: "kkk"), forState: .Normal)
cancelBtn.setTitle("取消", forState: .Normal)
cancelBtn.setTitleColor(UIColor.blackColor(), forState: .Normal)
cancelBtn.addTarget(self, action: #selector(ShareView.pressCoverBtn), forControlEvents: UIControlEvents.TouchUpInside)
sharePanel.addSubview(cancelBtn)
return sharePanel
}()
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func drawRect(rect: CGRect) {
// Drawing code
}
*/
// override init(){
// super.init()
// }
override init(frame: CGRect) {
super.init(frame: frame)
self.addCustomView(self)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func addCustomView (superView: UIView) {
superView.addSubview(coverBtn)
superView.addSubview(sharePanel)
}
#objc func pressCoverBtn() {
print("press cover btn\n")
hideShareView()
}
func showShareView () {
self.addCustomView((shareVC?.view)!)
UIView.animateWithDuration(0.4, animations: {
() -> Void in
self.sharePanel.frame = CGRectMake(0, UIScreen.mainScreen().bounds.height - self.panelHeight, self.sharePanel.frame.width, self.panelHeight)
})
}
func hideShareView() {
coverBtn.removeFromSuperview()
UIView.animateWithDuration(0.4, animations: {
() -> Void in
self.sharePanel.frame = CGRectMake(0, UIScreen.mainScreen().bounds.height, self.sharePanel.frame.width, self.panelHeight)
}) { (finish)-> Void in
self.removeFromSuperview()
}
}
}
you can check the 'Debug View Hierarchy' to focus on layers so that you can see if there is a view over the button blocking it
'Debug view Hierarchy' will give you 3d view of every layer
it is situated in bottom bar
Also, you are adding both the views to the superview, try to add 'coverBtn' button to the 'sharePanel' view and then add the view to the super view, this will create button layer above the 'sharePanel' view

Resources