Inserting UIView into background and having textfield/button appear on top (SWIFT) - ios

I want to create a login page in which the image I have fills up the entire page. I was able to accomplish this by doing
let imageView = UIImageView(frame: self.view.bounds)
imageView.image = UIImage(named: "background")
self.view.addSubview(imageView)
However, I also have textfields and buttons on my storyboard which I created outlets for on my swift file. When I insert that code into the viewDidLoad() function, the textfields and login button go underneath the image rather than appear over the image. I'm not exactly sure how to get the login page text fields/buttons to appear over the UIImageView rather than be hidden underneath. The code I have for that is written outside the viewDidLoad
(example)
#IBOutlet var usernameTextField: UITextField!
#IBOutlet var passwordTextField: UITextField!
#IBAction func loginPressed() {
let username = usernameTextField.text
let password = passwordTextField.text

Try this:
self.view.addSubview(imageView)
self.view.sendSubviewToBack(imageView)
This method moves the specified view to the beginning of the array of views in the subviews property.

Related

How to hide keyboard while keeping cursor in swift

I am making a calculator and using my own keypad and i want there to be no keyboard that pops up when the textview is activated but i want the user to be able to move the cursor around. Any ideas are greatly appreciated.
you can change the inputView for the textfield to custom UIView. Something like below.
#IBOutlet weak var myTextField: UITextField!
let customView = UIView()
override func viewDidLoad() {
super.viewDidLoad()
myTextField.inputView = customView
}

how to add UILabel and UIText on the background image

This is part of my code.
I want to show two UILabel and two UITextField on the background image: backgroundLogin.jpg .
import Foundation
import UIKit
class LoginViewController:UIViewController
{
override func viewDidLoad() {
super.viewDidLoad()
let BackGroundImage:UIImageView = UIImageView(frame: CGRectMake(0, 0, self.view.frame.width , self.view.frame.height))
let image: UIImage = UIImage(named: "backgroundLogin.jpg")!
BackGroundImage.image = image
self.view.addSubview(BackGroundImage)
//self.view.backgroundColor = UIColor(patternImage: UIImage(named: "backgroundLogin.jpg")!)
username.text = "User name"
password.text = "Password"
}
#IBOutlet weak var username: UILabel!
#IBOutlet weak var password: UILabel!
}
But when this code runs, it looks like:
I hope it can have two label on the image, but how to add that ?
Well like I stated in the comment you should try bring the UILabels to the front.
Since you are doing this programatically it can be done with bringSubviewToFront here is Apple's documentation on this and other UIView functionality you can use. Note: UILabel inherits from UIView so you can use these methods.
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/#//apple_ref/doc/uid/TP40006816-CH3-SW46
The code:
override func viewDidLoad() {
super.viewDidLoad()
let BackGroundImage:UIImageView = UIImageView(frame: CGRectMake(0, 0, self.view.frame.width , self.view.frame.height))
let image: UIImage = UIImage(named: "backgroundLogin.jpg")!
BackGroundImage.image = image
self.view.addSubview(BackGroundImage)
//self.view.backgroundColor = UIColor(patternImage: UIImage(named: "backgroundLogin.jpg")!)
username.text = "User name"
password.text = "Password"
self.view.bringSubviewToFront(username)
self.view.bringSubviewToFront(password)
}
It seems you are adding the UIImageView in code and the UILabels on storyboard, then when you run the app the labels are behind the UIImageView and you can't see then.
Just check it adding BackGroundImage.hidden = true in viewDidLoad.
You can't add UILabels into a UIImageView. One solution would be add all views in code, 1st the image view and then the labels over it. Other option would be add all then in storyboard in the same order.
Like this:
You’re doing a lot here programmatically that you don’t need to do.
In Storyboard, add a UIImageView to a blank ViewController (you
can rename the view controller later if you wish)
With the new UIImageView selected, control-drag to create an outlet in your view controller named backgroundImage
With the UIImageView selected, choose the image you want it to display by going to the Attribute Inspector and from the dropdown
box, select your image. All images in your project should appear in
the dropdown box.
Now add a UILabel to the ViewController and control-drag to create an outlet in the corresponding code
In the viewDidLoad() method, bring the outlet to the front
All this requires code-wise is:
class ViewController: UIViewController {
#IBOutlet weak var backgroundImage: UIImageView!
#IBOutlet weak var username: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
self.view.bringSubviewToFront(username)
}
}

iOS Swift: Hide and unhide Nav and tool bars

Experts,
I am using following code to hide the tool and nav bars before capturing the screen view. However the image still shows both bars...what I'am I doing wrong?
func generateMeme() ->UIImage {
// Hide toolbar and navbar
self.navigationController?.navigationBarHidden = true
self.navigationController?.toolbarHidden = true
// Render view to an image
UIGraphicsBeginImageContext(self.view.frame.size)
self.view.drawViewHierarchyInRect(self.view.frame,afterScreenUpdates:true)
let memedImage : UIImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
// Show toolbar and navbar
self.navigationController?.navigationBarHidden = true
self.navigationController?.toolbarHidden = true
return memedImage
}
Thanks
I'm not doing a screenshot, but I had a similar need - I have a viewController with a UIToolbar at the bottom that I wanted to hide sometimes. I created an outlet to it; and used
#IBOutlet weak var toolBar: UIToolbar!
// later in the code where you don't want it visible anymore
toolBar.isHidden = true
but then there was still space allocated for the toolbar at the bottom of the window; and if the item in the scrollView it was next to was large enough it was really obvious that there was still something there blocking space.
I solved this by selecting the toolbar, and using Embed -> Stack View. Make sure and adjust the constraints of the stackview, setting each top, bottom, left and right to 0. now the same line of code will hide the toolbar, and because it's in a UIStackView, it no longer takes up any space.
You should be able to do the same; hide the toolbar, then snap the image.
Swift 5.1
Hiding the toolbar will be
override func viewDidLoad() {
super.viewDidLoad()
self.navigationController?.setToolbarHidden(true, animated: true
}
I was able to solve the issue by using reference outlet and then using the hidden property. Below is the code:
// Reference outlet for Tool Bar
#IBOutlet weak var toolBar: UIToolbar!
//Reference outlet for Navigation Bar
#IBOutlet weak var navBar: UINavigationBar!
//Generate meme
func generateMeme() ->UIImage {
// Hide toolbar and navbar
self.toolBar.hidden = true
self.navBar.hidden = true
// Render view to an image
UIGraphicsBeginImageContext(view.frame.size)
view.layer.renderInContext(UIGraphicsGetCurrentContext())
let memedImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
//Show tool and nav bars
self.toolBar.hidden = false
self.navBar.hidden = false
return memedImage
}
Just use this(below) line at specific place in your code after that
your toolBar will be removed permanently:
self.tabBarController?.tabBar.isHidden = true
func getScreenShot() -> UIImage {
UIGraphicsBeginImageContext(view.frame.size)
view.layer.renderInContext(UIGraphicsGetCurrentContext())
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
return image
}
This should hide the navigationbar and toolbar. You can find the image in the Photos.
I had been exactly in the same problem and I tried your solution but the wrong was that , I suppose you were trying to address the default navigation controller built in toolbar while you need to address your own toolbar that you created in the story board. I solved the problem as follow
create an outlet from my toolbar to the view controller
#IBOutlet weak var toolbarView: UIToolbar!
make it hidden
self.navigationController?.isNavigationBarHidden = true
self.toolbarView.isHidden = true

Why do my UIImageView coordinates change when I update label value?

I want to move my UIImageView when a certain button is clicked. I have this code:
#IBOutlet weak var counter: UILabel!
#IBOutlet weak var indexCrow: UIImageView!
var crow = 0
#IBAction func plusButton(sender: UIButton) { // Plus Button
indexCrow.frame = CGRect(x: indexCrow.frame.origin.x + 20, y: indexCrow.frame.origin.y, width: indexCrow.frame.size.width, height: indexCrow.frame.size.height)
crow++
counter.text = String(crow)
}
If I remove the line counter.text = String(crow), my image view moves correctly, but my label does not update. If I write counter.text = String(crow) my label updates, but my image view does not move.
What I do wrong?
AutoLayout is running when you update the label and placing your image back to where it started. You have several options to deal with this. Choose one:
Turn off AutoLayout. Most don't choose this option because they want their layouts to work on multiple devices.
Create your imageView programmatically instead of in Interface Builder. If you do this, it won't be subject to AutoLayout and you can move it freely.
Place your imageView using AutoLayout constraints. Add IBOutlets to those constraints and update the constant values in code instead of modifying the frame.
When plusButton is called, store the new frame for your imageView in a property in your ViewController, and then put that frame in place in an override of viewDidLayoutSubviews which happens after AutoLayout runs.

UIImageView Recognizer

In my app I have a big UIImageView and other 5 smaller.
My intention is to copy the content of the selected small Image to the biggest one. Also to get the name of the chosen image and show with a UILabel.
Will be maybe easier to replace the small images by UIButtons and display the image as a background?
I would add a gestureRecognizer to each imageView. The function called by the gestureRecognizer would then change the image on the "big picker view". There is no built-in way to get the image name that the user chose. If you really needed this, then you could sublcass UIImageView and add a fileName property.
#IBOutlet var imageView: UIImageView!
#IBOutlet var bigPickerImageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
// create tap gesture recognizer
let tapGesture = UITapGestureRecognizer(target: self, action: "tapGesture:")
// add it to the image view;
imageView.addGestureRecognizer(tapGesture)
// make sure imageView can be interacted with by user
imageView.userInteractionEnabled = true
}
func tapGesture(gesture: UIGestureRecognizer) {
// if the tapped view is a UIImageView then set it to imageview
if let imageView = gesture.view as? UIImageView { // if you subclass UIImageView, then change "UIImageView" to your subclass
// change the image on the bigPickerImageView
bigPickerImageView.image = imageView.image
// if you subclass UIImageView, then you could get the filename here.
}
}

Resources