how can I setting background show full screen? - ios

Question

how can I setting background show full screen?
when I used this code, I can set full screen
private let usernameEmailField: UITextField = {
let field = UITextField()
field.placeholder = "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
field.layer.borderWidth = 1.0
field.layer.borderColor = UIColor.secondaryLabel.cgColor
return field
}()
private let headerView: UIView = {
let header = UIView()
header.clipsToBounds = true
let backgroundImageView = UIImageView(image: UIImage(named: "camping_background"))
header.addSubview(backgroundImageView)
return header
}()
headerView.frame = CGRect(
x: 0,
y: 0.0,
width: view.width,
height: view.height
)
usernameEmailField.frame = CGRect(
x: 25,
y: headerView.botoom + 10,
width: view.width - 50,
height: 52.0
)
But if I set height: view.height I can not show my textfield. so how do I modify?
headerView.frame = CGRect(
x: 0,
y: 0.0,
width: view.width,
height: view.height
)
usernameEmailField.frame = CGRect(
x: 25,
y: headerView.botoom + 10,
width: view.width - 50,
height: 52.0
)
passwordField.frame = CGRect(
x: 25,
y: usernameEmailField.botoom + 10,
width: view.width - 50,
height: 52.0
)
if I used height: view.height/3.0, if can show textfield, but the background is not fullscreen
I hope I can show like this one, this is my android page.
so, if I don't use the storyboard, how can I design in the my LoginViewController

Answer 1

Take a look at the code here:
headerView.addSubview(backgroundImageView)
...
headerView.botoom + 10,
You are stacking your views and the background vertically!
But
You should set the image behind the textfields (instead of above them)
Here is the how your view hierarchy could be looks like:
- Main View
- Main Content
- Logo image view
- User name text field
- Password text field
- Login button
- Create account button
- Background image view
As you can see, the Background image view is below the other contents
Note that it's not necessary to group content to layout your view but its very useful method for separating components