I used this code in WebKit ios 11.2 where my google map frame not showing to fit to screen it showing like this I attached the screenshot.
let topBarHeight = UIApplication.shared.statusBarFrame.size.height +
(self.navigationController?.navigationBar.frame.height ?? 0.0)
webView.frame = CGRect.init(x: 0, y: topBarHeight + 20, width: self.view.frame.width, height: self.view.frame.height - topBarHeight)
self.view.addSubview(webView)
self.navigationController?.isNavigationBarHidden = true
webView.backgroundColor = UIColor.clear
webView.scrollView.isScrollEnabled = false
webView.scrollView.bounces = false
webView.loadHTMLString("<html><body><iframe width=\"\(self.webView.frame.size.width)\" height=\"\(self.webView.frame.size.height-70)\" frameborder=\"0\" style=\"border:0\" src=\"https://www.google.com/maps/embed/v1/place?key=\(GoogleApikey)&q=\(Company.Instance.shopAddress),\(Company.Instance.shopName)\"allowfullscreen></iframe></body></html>", baseURL: nil)
Constraints aren't fully set in viewDidLoad(). you should move your code in other life cycle methods like viewDidAppear() and use the following HTML String for loading it
webView.loadHTMLString("<html><body><iframe frameborder=\"0\" style=\"border:0;width: 100%;height:100%\" src=\"https://www.google.com/maps/embed/v1/place?key=\(GoogleApikey)&q=\(Company.Instance.shopAddress),\(Company.Instance.shopName)\"allowfullscreen></iframe></body></html>", baseURL: nil)
Where do you add your map?
You could try to add it inside function viewDidLoad. For example:
override func viewDidLoad() {
super.viewDidLoad()
webView.frame = CGRect.init(x: 0, y: topBarHeight + 20, width: self.view.frame.width, height: self.view.frame.height - topBarHeight)
self.view.addSubview(webView)
self.navigationController?.isNavigationBarHidden = true
webView.backgroundColor = UIColor.clear
webView.scrollView.isScrollEnabled = false
webView.scrollView.bounces = false
}
And you use it self.navigationController?.isNavigationBarHidden = true, but navigation bar is not hidden. Did you implement custom navigation bar and hide native bar? Or it does not have to be visible?
Related
With this code I get indicator but to top left corner of webView and behind borders
(I have DetailView storyboard but want to write code programmatically)
var webView = WKWebView()
var detailItem : CountriesFinal?
var spinner = UIActivityIndicatorView()
override func viewDidLoad() {
super.viewDidLoad()
spinner.frame = CGRect(x: webView.frame.width / 2, y: webView.frame.height / 2, width: 10, height: 10)
webView.addSubview(spinner)
spinner.startAnimating()
spinner.hidesWhenStopped = true
webView.backgroundColor = .blue
webView.translatesAutoresizingMaskIntoConstraints = false
webView.navigationDelegate = self
webView.frame = CGRect(x: 125, y: 150, width: 250, height: 150)
webView.layer.borderWidth = 5
webView.layer.borderColor = UIColor.red.cgColor
webView.contentMode = .scaleAspectFit
webView.backgroundColor = .blue
self.view.addSubview(webView)
I notice that this line doesn't change anything and I thought it may be the solution:
spinner.frame = CGRect(x: webView.frame.width / 2, y: webView.frame.height / 2, width: 10, height: 10)
I've tried to set translatesAutoresizingMaskIntoConstraints of spinner to false but then whole webView disappear with purple warning " Layout Issues: Position and size are ambiguous for WKWebView."
UPDATED CODE(webVIew not showing):
webView.frame = CGRect(x: 125, y: 150, width: 250, height: 150)
webView.backgroundColor = .blue
webView.translatesAutoresizingMaskIntoConstraints = false
webView.navigationDelegate = self
webView.layer.borderWidth = 5
webView.layer.borderColor = UIColor.red.cgColor
webView.contentMode = .scaleAspectFit
webView.backgroundColor = .blue
self.view.addSubview(webView)
self.view.insertSubview(spinner, aboveSubview: webView)
spinner.centerXAnchor.constraint(equalTo: webView.centerXAnchor).isActive = true
spinner.centerYAnchor.constraint(equalTo: webView.centerYAnchor).isActive = true
spinner.startAnimating()
spinner.hidesWhenStopped = true
In my opinion WKWebView is one of the system views that should probably be a "leaf" in your view hiercarchy. It is very complex in the content it manages and may not like it if you add subviews.
Instead of putting the spinner inside the WKWebView, I would probably put it into a view that is a sibling and stack it in front of the WebView in the z-order. It will float above the web view, but look like it is inside of it.
Here's a Playground I threw together that demonstrates the idea:
import UIKit
import WebKit
import PlaygroundSupport
NSSetUncaughtExceptionHandler { error in
debugPrint(error)
}
let controller = UIViewController()
let webView = WKWebView()
webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
webView.load(URLRequest(url: URL(string: "https://www.apple.com")!))
let spinner = UIActivityIndicatorView()
spinner.translatesAutoresizingMaskIntoConstraints = false
controller.view.addSubview(webView)
webView.frame = controller.view.bounds
controller.view.insertSubview(spinner, aboveSubview: webView)
spinner.centerXAnchor.constraint(equalTo: webView.centerXAnchor).isActive = true
spinner.centerYAnchor.constraint(equalTo: webView.centerYAnchor).isActive = true
PlaygroundSupport.PlaygroundPage.current.liveView = controller
spinner.startAnimating()
Working code. Changed place of addSubview
webView.frame = CGRect(x: 125, y: 150, width: 250, height: 150)
webView.backgroundColor = .blue
webView.translatesAutoresizingMaskIntoConstraints = false
webView.layer.borderWidth = 5
webView.layer.borderColor = UIColor.red.cgColor
webView.contentMode = .scaleAspectFit
webView.backgroundColor = .blue
self.view.addSubview(webView)
self.webView.addSubview(self.spinner)//first we need to add subview then make center or something
spinner.center = CGPoint(x: webView.bounds.width / 2, y: webView.bounds.height / 2)
webView.navigationDelegate = self
spinner.startAnimating()
spinner.hidesWhenStopped = true
I have the following function I use to customize the navigation bar across almost all the apps view controllers and table view controllers - instead of replicating the code numerous times I am looking for way to easily call the function on those view controllers needing it.
I have tried wrapping in extension UIViewController { } but run into a selector issue saying the following:
Argument of '#selector' cannot refer to local function
'Tapped(tapGestureRecognizer:)'
Code:
func navBar(){
// Profile Image
let containView = UIView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
imageView.image = UIImage(url: URL(string: "test.com"))
imageView.contentMode = UIView.ContentMode.scaleAspectFit
imageView.layer.cornerRadius = 20
imageView.layer.masksToBounds = true
containView.addSubview(imageView)
let rightBarButton = UIBarButtonItem(customView: containView)
self.navigationItem.rightBarButtonItem = rightBarButton
let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(imageTapped(tapGestureRecognizer:)))
imageView.isUserInteractionEnabled = true
imageView.addGestureRecognizer(tapGestureRecognizer)
}
#objc func imageTapped(tapGestureRecognizer: UITapGestureRecognizer) {
print("Profile Tapped")
}
How can this UIImage be seen in the navigation bar across various view controller without needing to rewrite the same code across all.
Lot a way to do it. I'll usually istance and personalize an UIViewController and use it around the whole app.
class baseController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//call your navBar here
navbar()
}
func navBar(){
// Profile Image
let containView = UIView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
imageView.image = UIImage(url: URL(string: "test.com"))
imageView.contentMode = UIView.ContentMode.scaleAspectFit
imageView.layer.cornerRadius = 20
imageView.layer.masksToBounds = true
containView.addSubview(imageView)
let rightBarButton = UIBarButtonItem(customView: containView)
self.navigationItem.rightBarButtonItem = rightBarButton
let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(imageTapped(tapGestureRecognizer:)))
imageView.isUserInteractionEnabled = true
imageView.addGestureRecognizer(tapGestureRecognizer)
}
}
Now instance this class whenever you want and your controller will get your navBar() every time with this
class mineController:baseController {
//your code here...
}
I have added a card view from a Xib file which when tapped it slides from bottom-up to display the view.
I have am trying to customised the view and a drop shadow to the view which is not working.
The cornerRadius works fine otherwise.
func setupCard() {
menuCardVC = MenuCardVC(nibName:"MenuCardVC", bundle:nil)
menuCardVC.view.layer.shadowOpacity = 0.50
menuCardVC.view.layer.shadowRadius = 12
menuCardVC.view.layer.shadowColor = UIColor.black.cgColor
menuCardVC.view.layer.shadowOffset = CGSize.zero
menuCardVC.view.layer.cornerRadius = 25
self.addChild(menuCardVC)
self.view.addSubview(menuCardVC.view)
menuCardVC.view.frame = CGRect(x: 0, y: self.view.frame.height - cardHandleAreaHeight, width: self.view.bounds.width, height: cardHeight)
menuCardVC.view.clipsToBounds = true
let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(VenueDetailsVC.handleCardTap(recognzier:)))
let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(VenueDetailsVC.handleCardPan(recognizer:)))
menuCardVC.handleArea.addGestureRecognizer(tapGestureRecognizer)
menuCardVC.handleArea.addGestureRecognizer(panGestureRecognizer)
}//end setupCard
Remove the below line of code,
menuCardVC.view.clipsToBounds = true
Since your view hierarchy is simple you could use the following technique. Also, you don't need to use clipsToBounds.
let superview = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
superview.backgroundColor = .white
let subview = UIView(frame: CGRect(x: 10, y: 10, width: 100, height: 100))
subview.backgroundColor = .red
// First provide the corner radius.
subview.layer.cornerRadius = 8
// Then provide the shadow parameters.
subview.layer.shadowOpacity = 1
// ...
// Do not clip to bounds since it will clip the shadow.
// ...
superview.addSubview(subview)
I want to place my activityIndicator where I want it programmatically, but I don´t know how.
I know how to put it in the center of the screen:
activityIndicator.center = self.view.center
But I want something like this:
activityIndicator.activityIndicator(frame: CGRect(x: 100, y: 100, width: 100, height: 50))
But I can´t seem to make it work.
Basically, you can do this in just a few lines of code:
func showActivityIndicatory() {
let activityView = UIActivityIndicatorView(style: .whiteLarge)
activityView.center = self.view.center
self.view.addSubview(activityView)
activityView.startAnimating()
}
If you need more controll on activityView please set Origin of container view to place activityindicator anywhere on the screen.
func showActivityIndicatory() {
let container: UIView = UIView()
container.frame = CGRect(x: 0, y: 0, width: 80, height: 80) // Set X and Y whatever you want
container.backgroundColor = .clear
let activityView = UIActivityIndicatorView(style: .whiteLarge)
activityView.center = self.view.center
container.addSubview(activityView)
self.view.addSubview(container)
activityView.startAnimating()
}
You can declare:
var activityView: UIActivityIndicatorView?
And, in your class, create the next methods for showing or hiding the indicator:
func showActivityIndicator() {
activityView = UIActivityIndicatorView(style: .large)
activityView?.center = self.view.center
self.view.addSubview(activityView!)
activityView?.startAnimating()
}
func hideActivityIndicator(){
if (activityView != nil){
activityView?.stopAnimating()
}
}
This code works for me. Good luck!
Swift 5:
let activityIndicator = UIActivityIndicatorView(style: UIActivityIndicatorView.Style.gray)
// Place the activity indicator on the center of your current screen
myActivityIndicator.center = view.center
// In most cases this will be set to true, so the indicator hides when it stops spinning
myActivityIndicator.hidesWhenStopped = true
// Start the activity indicator and place it onto your view
myActivityIndicator.startAnimating()
view.addSubview(myActivityIndicator)
// Do something here, for example fetch the data from API
// Finally after the job above is done, stop the activity indicator
myActivityIndicator.stopAnimating()
Swift 4, Swift 5
Here if you prefer my daily/favorite programmatic pattern
// MARK: - Component
lazy var indicatorView: UIActivityIndicatorView = {
let view = UIActivityIndicatorView(style: .medium)
view.color = .white
view.startAnimating()
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
// MARK: - Life Cycle
override func viewDidLoad() {
super.viewDidLoad()
setupViews()
setupLayouts()
}
func setupViews() {
addSubview(indicatorView)
}
func setupLayouts() {
NSLayoutConstraint.activate([
indicatorView.centerXAnchor.constraint(equalTo: centerXAnchor),
indicatorView.centerYAnchor.constraint(equalTo: centerYAnchor)
])
}
I would like to create a nav bar similar to what's in the image that's attached.
The title of the nav bar will be a combination of an image and text.
Should this be done per any best practice?
How can it be done?
As this answer shows, the easiest solution is to add the text to your image and add that image to the navigation bar like so:
var image = UIImage(named: "logo.png")
self.navigationItem.titleView = UIImageView(image: image)
But if you have to add text and an image separately (for example, in the case of localization), you can set your navigation bar's title view to contain both image and text by adding them to a UIView and setting the navigationItem's title view to that UIView, for example (assuming the navigation bar is part of a navigation controller):
// Only execute the code if there's a navigation controller
if self.navigationController == nil {
return
}
// Create a navView to add to the navigation bar
let navView = UIView()
// Create the label
let label = UILabel()
label.text = "Text"
label.sizeToFit()
label.center = navView.center
label.textAlignment = NSTextAlignment.Center
// Create the image view
let image = UIImageView()
image.image = UIImage(named: "Image.png")
// To maintain the image's aspect ratio:
let imageAspect = image.image!.size.width/image.image!.size.height
// Setting the image frame so that it's immediately before the text:
image.frame = CGRect(x: label.frame.origin.x-label.frame.size.height*imageAspect, y: label.frame.origin.y, width: label.frame.size.height*imageAspect, height: label.frame.size.height)
image.contentMode = UIViewContentMode.ScaleAspectFit
// Add both the label and image view to the navView
navView.addSubview(label)
navView.addSubview(image)
// Set the navigation bar's navigation item's titleView to the navView
self.navigationItem.titleView = navView
// Set the navView's frame to fit within the titleView
navView.sizeToFit()
Use horizontal UIStackView should be much cleaner and easier
Please add the next extension to UIViewController
extension UIViewController {
func setTitle(_ title: String, andImage image: UIImage) {
let titleLbl = UILabel()
titleLbl.text = title
titleLbl.textColor = UIColor.white
titleLbl.font = UIFont.systemFont(ofSize: 20.0, weight: .bold)
let imageView = UIImageView(image: image)
let titleView = UIStackView(arrangedSubviews: [imageView, titleLbl])
titleView.axis = .horizontal
titleView.spacing = 10.0
navigationItem.titleView = titleView
}
}
then use it inside your viewController:
setTitle("yourTitle", andImage: UIImage(named: "yourImage"))
(this will align the text and the icon together to the center, if you want the text to be centered and the icon in the left, just add an empty UIView with width constraint equal to the icon width)
here is my 2 cents for Swift 4, since accepted answer didn't work for me (was mostly off the screen):
// .. in ViewController
var navBar = CustomTitleView()
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
// =================== navBar =====================
navBar.loadWith(title: "Budget Overview", leftImage: Images.pie_chart)
self.navigationItem.titleView = navBar
}
class CustomTitleView: UIView
{
var title_label = CustomLabel()
var left_imageView = UIImageView()
override init(frame: CGRect){
super.init(frame: frame)
setup()
}
required init?(coder aDecoder: NSCoder){
super.init(coder: aDecoder)
setup()
}
func setup(){
self.addSubview(title_label)
self.addSubview(left_imageView)
}
func loadWith(title: String, leftImage: UIImage?)
{
//self.backgroundColor = .yellow
// =================== title_label ==================
//title_label.backgroundColor = .blue
title_label.text = title
title_label.font = UIFont.systemFont(ofSize: FontManager.fontSize + 5)
// =================== imageView ===================
left_imageView.image = leftImage
setupFrames()
}
func setupFrames()
{
let height: CGFloat = Navigation.topViewController()?.navigationController?.navigationBar.frame.height ?? 44
let image_size: CGFloat = height * 0.8
left_imageView.frame = CGRect(x: 0,
y: (height - image_size) / 2,
width: (left_imageView.image == nil) ? 0 : image_size,
height: image_size)
let titleWidth: CGFloat = title_label.intrinsicContentSize.width + 10
title_label.frame = CGRect(x: left_imageView.frame.maxX + 5,
y: 0,
width: titleWidth,
height: height)
contentWidth = Int(left_imageView.frame.width)
self.frame = CGRect(x: 0, y: 0, width: CGFloat(contentWidth), height: height)
}
var contentWidth: Int = 0 //if its CGFloat, it infinitely calls layoutSubviews(), changing franction of a width
override func layoutSubviews() {
super.layoutSubviews()
self.frame.size.width = CGFloat(contentWidth)
}
}
Swift 4.2 + Interface Builder Solution
As a follow-on to Lyndsey Scott's answer, you can also create a UIView .xib in Interface Builder, use that to lay out your title and image, and then update it on-the-fly via an #IBOutlet. This is useful for dynamic content, internationalization, maintainability etc.
Create a UIView subclass with a UILabel outlet and assign your new .xib to this class:
import UIKit
class FolderTitleView: UIView {
#IBOutlet weak var title : UILabel!
/// Create an instance of the class from its .xib
class func instanceFromNib() -> FolderTitleView {
return UINib(nibName: "FolderTitleView", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! FolderTitleView
}
}
Connect the label to your outlet (title in my example) in your .xib, then in your UIViewController:
/// Reference to the title view
var folderTitleView : FolderTitleView?
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
// Set the screen title to match the active folder
updateTitle()
}
/// Updates the title of the navigation controller.
func updateTitle() {
self.title = ""
if folderTitleView == nil {
folderTitleView = FolderTitleView.instanceFromNib()
self.navigationItem.titleView = folderTitleView
}
folderTitleView!.title.text = "Listening"
folderTitleView!.layoutIfNeeded()
}
This results in a nice self-centering title bar with an embedded image that you can easily update from code.
// worked for me
create a view and set the frame
now add the image in the view and set the frame
after adding the image, add the label in same view and set the frame
after adding the image and label to view, add same view to navigationItem
let navigationView = UIView(frame: CGRect(x: 0, y: 0, width: 50 , height: 55))
let labell : UILabel = UILabel(frame: CGRect(x: -38, y: 25, width: 150, height: 25))
labell.text = "Your text"
labell.textColor = UIColor.black
labell.font = UIFont.boldSystemFont(ofSize: 10)
navigationView.addSubview(labell)
let image : UIImage = UIImage(named: ValidationMessage.headerLogoName)!
let imageView = UIImageView(frame: CGRect(x: -20, y: 0, width: 100, height: 30))
imageView.contentMode = .scaleAspectFit
imageView.image = image
//navigationItem.titleView = imageView
navigationView.addSubview(imageView)
navigationItem.titleView = navigationView