how can I setting background show full screen?

Question

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

user_5623035 · Answer

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}

how can I setting background show full screen?

1 Answers

But