Loading UIView from Bundle only fills screen partially












0















Screenshot from simulator iphone xr



Hello there.



Using Swift 4, I am attempting to load a Custom UIView with XIB onto a UIViewController.



However, it only seems to fill the screen partially, and I'm not sure why.



I did the following:




  1. The view controller is defined in a UIStoryboard

  2. UIViewController that adds the UIView in the viewDidLoad

  3. The UIView swift file and the XIB are connected via the File Owner property

  4. The XIB file is added into the copy bundle resources

  5. The hot pink background color is set using the Xcode visual editor, its not done in code.

  6. I simulate using the iphone xr, but I get the same issue if I simulate on iPhone 6s


The view controller code is empty, but I've included the relevant part:



// QuestionViewController
class QuestionViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let subview = QuestionView()
self.view.addSubview(subview)
}
}


The UIView is also pretty basic:



class QuestionView: UIView, XibView {

override init(frame: CGRect) {
super.init(frame: frame)
setupXib()
}

required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupXib()
}

func setupXib() {
guard let v = loadFromXib() else {
return
}
addSubview(v)
}
}


I use a protocol that I found on stackoverflow to load the xib file from bundle. Originally I had a lot of issues even loading the bundle, but fortuently I was able to rectify this issue. Anyway, my XIB protocol file is here:



// XIB protocol file
protocol XibView {
func setupXib()
func constrainView(_ view: UIView)
func loadFromXib() -> UIView?
}

extension XibView where Self: UIView {
func setupXib() {
if let xibView = loadFromXib() {
addSubview(xibView)
constrainView(xibView)
}
}

func constrainView(_ view: UIView) {
view.translatesAutoresizingMaskIntoConstraints = false

addConstraints(
NSLayoutConstraint.constraints(
withVisualFormat: "V:|[view]|",
options: [.alignAllCenterX, .alignAllCenterY],
metrics: nil,
views: ["view": view]
)
)

addConstraints(
NSLayoutConstraint.constraints(
withVisualFormat: "H:|[view]|",
options: [.alignAllCenterX, .alignAllCenterY],
metrics: nil,
views: ["view": view]
)
)
}

func loadFromXib() -> UIView? {
let xibView = UINib(nibName: String(describing: Self.self), bundle: Bundle(for: type(of: self))).instantiate(withOwner: self, options: nil).first as? UIView
return xibView
}
}


--



Question:



Why does the UIView not fill the entire screen or only fill the screen partially and how can I resolve this?



With thanks



Edit:



The storyboard looks for the UIViewController only has a single view with no content.



Storyboard










share|improve this question





























    0















    Screenshot from simulator iphone xr



    Hello there.



    Using Swift 4, I am attempting to load a Custom UIView with XIB onto a UIViewController.



    However, it only seems to fill the screen partially, and I'm not sure why.



    I did the following:




    1. The view controller is defined in a UIStoryboard

    2. UIViewController that adds the UIView in the viewDidLoad

    3. The UIView swift file and the XIB are connected via the File Owner property

    4. The XIB file is added into the copy bundle resources

    5. The hot pink background color is set using the Xcode visual editor, its not done in code.

    6. I simulate using the iphone xr, but I get the same issue if I simulate on iPhone 6s


    The view controller code is empty, but I've included the relevant part:



    // QuestionViewController
    class QuestionViewController: UIViewController {
    override func viewDidLoad() {
    super.viewDidLoad()
    let subview = QuestionView()
    self.view.addSubview(subview)
    }
    }


    The UIView is also pretty basic:



    class QuestionView: UIView, XibView {

    override init(frame: CGRect) {
    super.init(frame: frame)
    setupXib()
    }

    required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    setupXib()
    }

    func setupXib() {
    guard let v = loadFromXib() else {
    return
    }
    addSubview(v)
    }
    }


    I use a protocol that I found on stackoverflow to load the xib file from bundle. Originally I had a lot of issues even loading the bundle, but fortuently I was able to rectify this issue. Anyway, my XIB protocol file is here:



    // XIB protocol file
    protocol XibView {
    func setupXib()
    func constrainView(_ view: UIView)
    func loadFromXib() -> UIView?
    }

    extension XibView where Self: UIView {
    func setupXib() {
    if let xibView = loadFromXib() {
    addSubview(xibView)
    constrainView(xibView)
    }
    }

    func constrainView(_ view: UIView) {
    view.translatesAutoresizingMaskIntoConstraints = false

    addConstraints(
    NSLayoutConstraint.constraints(
    withVisualFormat: "V:|[view]|",
    options: [.alignAllCenterX, .alignAllCenterY],
    metrics: nil,
    views: ["view": view]
    )
    )

    addConstraints(
    NSLayoutConstraint.constraints(
    withVisualFormat: "H:|[view]|",
    options: [.alignAllCenterX, .alignAllCenterY],
    metrics: nil,
    views: ["view": view]
    )
    )
    }

    func loadFromXib() -> UIView? {
    let xibView = UINib(nibName: String(describing: Self.self), bundle: Bundle(for: type(of: self))).instantiate(withOwner: self, options: nil).first as? UIView
    return xibView
    }
    }


    --



    Question:



    Why does the UIView not fill the entire screen or only fill the screen partially and how can I resolve this?



    With thanks



    Edit:



    The storyboard looks for the UIViewController only has a single view with no content.



    Storyboard










    share|improve this question



























      0












      0








      0








      Screenshot from simulator iphone xr



      Hello there.



      Using Swift 4, I am attempting to load a Custom UIView with XIB onto a UIViewController.



      However, it only seems to fill the screen partially, and I'm not sure why.



      I did the following:




      1. The view controller is defined in a UIStoryboard

      2. UIViewController that adds the UIView in the viewDidLoad

      3. The UIView swift file and the XIB are connected via the File Owner property

      4. The XIB file is added into the copy bundle resources

      5. The hot pink background color is set using the Xcode visual editor, its not done in code.

      6. I simulate using the iphone xr, but I get the same issue if I simulate on iPhone 6s


      The view controller code is empty, but I've included the relevant part:



      // QuestionViewController
      class QuestionViewController: UIViewController {
      override func viewDidLoad() {
      super.viewDidLoad()
      let subview = QuestionView()
      self.view.addSubview(subview)
      }
      }


      The UIView is also pretty basic:



      class QuestionView: UIView, XibView {

      override init(frame: CGRect) {
      super.init(frame: frame)
      setupXib()
      }

      required init?(coder aDecoder: NSCoder) {
      super.init(coder: aDecoder)
      setupXib()
      }

      func setupXib() {
      guard let v = loadFromXib() else {
      return
      }
      addSubview(v)
      }
      }


      I use a protocol that I found on stackoverflow to load the xib file from bundle. Originally I had a lot of issues even loading the bundle, but fortuently I was able to rectify this issue. Anyway, my XIB protocol file is here:



      // XIB protocol file
      protocol XibView {
      func setupXib()
      func constrainView(_ view: UIView)
      func loadFromXib() -> UIView?
      }

      extension XibView where Self: UIView {
      func setupXib() {
      if let xibView = loadFromXib() {
      addSubview(xibView)
      constrainView(xibView)
      }
      }

      func constrainView(_ view: UIView) {
      view.translatesAutoresizingMaskIntoConstraints = false

      addConstraints(
      NSLayoutConstraint.constraints(
      withVisualFormat: "V:|[view]|",
      options: [.alignAllCenterX, .alignAllCenterY],
      metrics: nil,
      views: ["view": view]
      )
      )

      addConstraints(
      NSLayoutConstraint.constraints(
      withVisualFormat: "H:|[view]|",
      options: [.alignAllCenterX, .alignAllCenterY],
      metrics: nil,
      views: ["view": view]
      )
      )
      }

      func loadFromXib() -> UIView? {
      let xibView = UINib(nibName: String(describing: Self.self), bundle: Bundle(for: type(of: self))).instantiate(withOwner: self, options: nil).first as? UIView
      return xibView
      }
      }


      --



      Question:



      Why does the UIView not fill the entire screen or only fill the screen partially and how can I resolve this?



      With thanks



      Edit:



      The storyboard looks for the UIViewController only has a single view with no content.



      Storyboard










      share|improve this question
















      Screenshot from simulator iphone xr



      Hello there.



      Using Swift 4, I am attempting to load a Custom UIView with XIB onto a UIViewController.



      However, it only seems to fill the screen partially, and I'm not sure why.



      I did the following:




      1. The view controller is defined in a UIStoryboard

      2. UIViewController that adds the UIView in the viewDidLoad

      3. The UIView swift file and the XIB are connected via the File Owner property

      4. The XIB file is added into the copy bundle resources

      5. The hot pink background color is set using the Xcode visual editor, its not done in code.

      6. I simulate using the iphone xr, but I get the same issue if I simulate on iPhone 6s


      The view controller code is empty, but I've included the relevant part:



      // QuestionViewController
      class QuestionViewController: UIViewController {
      override func viewDidLoad() {
      super.viewDidLoad()
      let subview = QuestionView()
      self.view.addSubview(subview)
      }
      }


      The UIView is also pretty basic:



      class QuestionView: UIView, XibView {

      override init(frame: CGRect) {
      super.init(frame: frame)
      setupXib()
      }

      required init?(coder aDecoder: NSCoder) {
      super.init(coder: aDecoder)
      setupXib()
      }

      func setupXib() {
      guard let v = loadFromXib() else {
      return
      }
      addSubview(v)
      }
      }


      I use a protocol that I found on stackoverflow to load the xib file from bundle. Originally I had a lot of issues even loading the bundle, but fortuently I was able to rectify this issue. Anyway, my XIB protocol file is here:



      // XIB protocol file
      protocol XibView {
      func setupXib()
      func constrainView(_ view: UIView)
      func loadFromXib() -> UIView?
      }

      extension XibView where Self: UIView {
      func setupXib() {
      if let xibView = loadFromXib() {
      addSubview(xibView)
      constrainView(xibView)
      }
      }

      func constrainView(_ view: UIView) {
      view.translatesAutoresizingMaskIntoConstraints = false

      addConstraints(
      NSLayoutConstraint.constraints(
      withVisualFormat: "V:|[view]|",
      options: [.alignAllCenterX, .alignAllCenterY],
      metrics: nil,
      views: ["view": view]
      )
      )

      addConstraints(
      NSLayoutConstraint.constraints(
      withVisualFormat: "H:|[view]|",
      options: [.alignAllCenterX, .alignAllCenterY],
      metrics: nil,
      views: ["view": view]
      )
      )
      }

      func loadFromXib() -> UIView? {
      let xibView = UINib(nibName: String(describing: Self.self), bundle: Bundle(for: type(of: self))).instantiate(withOwner: self, options: nil).first as? UIView
      return xibView
      }
      }


      --



      Question:



      Why does the UIView not fill the entire screen or only fill the screen partially and how can I resolve this?



      With thanks



      Edit:



      The storyboard looks for the UIViewController only has a single view with no content.



      Storyboard







      swift uiview nsbundle






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jan 19 at 6:52







      zardon

















      asked Jan 19 at 0:07









      zardonzardon

      612925




      612925
























          1 Answer
          1






          active

          oldest

          votes


















          1














          I think you should take a UIview(0,0,0,0 four constraints) in Your Viewcontroller and then assign it a custom class which is a subclass of UIView and then load the Xib file and it will surely occupy the whole screen



          Try this man::----



           class QuestionViewController: UIViewController {
          override func viewDidLoad() {
          super.viewDidLoad()
          let subview = QuestionView()
          subview.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.width)
          self.view.addSubview(subview)
          }
          }





          share|improve this answer


























          • I tried to create a UIView as a variable var subview = QuestionView() but this has the same effect. I am wanting to keep the UIView seperate from the UIViewController because I am needing to do a lot of UIView animations and other associated code which do not belong in the UIViewController.

            – zardon
            Jan 19 at 6:57











          • I am not sure where I'd put a UIView of (0,0,0,0) or why this would work, can you post some code to show where you'd put it?

            – zardon
            Jan 19 at 6:59











          • If I add a UIView physically into the storyboard UIViewController and pin all corners to edges using constraints and also rename the class to match my custom UIView and add an outlet to the UIViewController that also matches the UIViewController then it will work -- but I don't see why I should have to do this, other examples I've seen do not add UIViews to the storyboard

            – zardon
            Jan 19 at 7:07











          • try the edited answer

            – Mayank Wadhwa
            Jan 19 at 7:48











          • Ok, I will give it a go

            – zardon
            Jan 19 at 17:10











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54262941%2floading-uiview-from-bundle-only-fills-screen-partially%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          1














          I think you should take a UIview(0,0,0,0 four constraints) in Your Viewcontroller and then assign it a custom class which is a subclass of UIView and then load the Xib file and it will surely occupy the whole screen



          Try this man::----



           class QuestionViewController: UIViewController {
          override func viewDidLoad() {
          super.viewDidLoad()
          let subview = QuestionView()
          subview.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.width)
          self.view.addSubview(subview)
          }
          }





          share|improve this answer


























          • I tried to create a UIView as a variable var subview = QuestionView() but this has the same effect. I am wanting to keep the UIView seperate from the UIViewController because I am needing to do a lot of UIView animations and other associated code which do not belong in the UIViewController.

            – zardon
            Jan 19 at 6:57











          • I am not sure where I'd put a UIView of (0,0,0,0) or why this would work, can you post some code to show where you'd put it?

            – zardon
            Jan 19 at 6:59











          • If I add a UIView physically into the storyboard UIViewController and pin all corners to edges using constraints and also rename the class to match my custom UIView and add an outlet to the UIViewController that also matches the UIViewController then it will work -- but I don't see why I should have to do this, other examples I've seen do not add UIViews to the storyboard

            – zardon
            Jan 19 at 7:07











          • try the edited answer

            – Mayank Wadhwa
            Jan 19 at 7:48











          • Ok, I will give it a go

            – zardon
            Jan 19 at 17:10
















          1














          I think you should take a UIview(0,0,0,0 four constraints) in Your Viewcontroller and then assign it a custom class which is a subclass of UIView and then load the Xib file and it will surely occupy the whole screen



          Try this man::----



           class QuestionViewController: UIViewController {
          override func viewDidLoad() {
          super.viewDidLoad()
          let subview = QuestionView()
          subview.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.width)
          self.view.addSubview(subview)
          }
          }





          share|improve this answer


























          • I tried to create a UIView as a variable var subview = QuestionView() but this has the same effect. I am wanting to keep the UIView seperate from the UIViewController because I am needing to do a lot of UIView animations and other associated code which do not belong in the UIViewController.

            – zardon
            Jan 19 at 6:57











          • I am not sure where I'd put a UIView of (0,0,0,0) or why this would work, can you post some code to show where you'd put it?

            – zardon
            Jan 19 at 6:59











          • If I add a UIView physically into the storyboard UIViewController and pin all corners to edges using constraints and also rename the class to match my custom UIView and add an outlet to the UIViewController that also matches the UIViewController then it will work -- but I don't see why I should have to do this, other examples I've seen do not add UIViews to the storyboard

            – zardon
            Jan 19 at 7:07











          • try the edited answer

            – Mayank Wadhwa
            Jan 19 at 7:48











          • Ok, I will give it a go

            – zardon
            Jan 19 at 17:10














          1












          1








          1







          I think you should take a UIview(0,0,0,0 four constraints) in Your Viewcontroller and then assign it a custom class which is a subclass of UIView and then load the Xib file and it will surely occupy the whole screen



          Try this man::----



           class QuestionViewController: UIViewController {
          override func viewDidLoad() {
          super.viewDidLoad()
          let subview = QuestionView()
          subview.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.width)
          self.view.addSubview(subview)
          }
          }





          share|improve this answer















          I think you should take a UIview(0,0,0,0 four constraints) in Your Viewcontroller and then assign it a custom class which is a subclass of UIView and then load the Xib file and it will surely occupy the whole screen



          Try this man::----



           class QuestionViewController: UIViewController {
          override func viewDidLoad() {
          super.viewDidLoad()
          let subview = QuestionView()
          subview.frame = CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.width)
          self.view.addSubview(subview)
          }
          }






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Jan 19 at 7:48

























          answered Jan 19 at 5:28









          Mayank WadhwaMayank Wadhwa

          1597




          1597













          • I tried to create a UIView as a variable var subview = QuestionView() but this has the same effect. I am wanting to keep the UIView seperate from the UIViewController because I am needing to do a lot of UIView animations and other associated code which do not belong in the UIViewController.

            – zardon
            Jan 19 at 6:57











          • I am not sure where I'd put a UIView of (0,0,0,0) or why this would work, can you post some code to show where you'd put it?

            – zardon
            Jan 19 at 6:59











          • If I add a UIView physically into the storyboard UIViewController and pin all corners to edges using constraints and also rename the class to match my custom UIView and add an outlet to the UIViewController that also matches the UIViewController then it will work -- but I don't see why I should have to do this, other examples I've seen do not add UIViews to the storyboard

            – zardon
            Jan 19 at 7:07











          • try the edited answer

            – Mayank Wadhwa
            Jan 19 at 7:48











          • Ok, I will give it a go

            – zardon
            Jan 19 at 17:10



















          • I tried to create a UIView as a variable var subview = QuestionView() but this has the same effect. I am wanting to keep the UIView seperate from the UIViewController because I am needing to do a lot of UIView animations and other associated code which do not belong in the UIViewController.

            – zardon
            Jan 19 at 6:57











          • I am not sure where I'd put a UIView of (0,0,0,0) or why this would work, can you post some code to show where you'd put it?

            – zardon
            Jan 19 at 6:59











          • If I add a UIView physically into the storyboard UIViewController and pin all corners to edges using constraints and also rename the class to match my custom UIView and add an outlet to the UIViewController that also matches the UIViewController then it will work -- but I don't see why I should have to do this, other examples I've seen do not add UIViews to the storyboard

            – zardon
            Jan 19 at 7:07











          • try the edited answer

            – Mayank Wadhwa
            Jan 19 at 7:48











          • Ok, I will give it a go

            – zardon
            Jan 19 at 17:10

















          I tried to create a UIView as a variable var subview = QuestionView() but this has the same effect. I am wanting to keep the UIView seperate from the UIViewController because I am needing to do a lot of UIView animations and other associated code which do not belong in the UIViewController.

          – zardon
          Jan 19 at 6:57





          I tried to create a UIView as a variable var subview = QuestionView() but this has the same effect. I am wanting to keep the UIView seperate from the UIViewController because I am needing to do a lot of UIView animations and other associated code which do not belong in the UIViewController.

          – zardon
          Jan 19 at 6:57













          I am not sure where I'd put a UIView of (0,0,0,0) or why this would work, can you post some code to show where you'd put it?

          – zardon
          Jan 19 at 6:59





          I am not sure where I'd put a UIView of (0,0,0,0) or why this would work, can you post some code to show where you'd put it?

          – zardon
          Jan 19 at 6:59













          If I add a UIView physically into the storyboard UIViewController and pin all corners to edges using constraints and also rename the class to match my custom UIView and add an outlet to the UIViewController that also matches the UIViewController then it will work -- but I don't see why I should have to do this, other examples I've seen do not add UIViews to the storyboard

          – zardon
          Jan 19 at 7:07





          If I add a UIView physically into the storyboard UIViewController and pin all corners to edges using constraints and also rename the class to match my custom UIView and add an outlet to the UIViewController that also matches the UIViewController then it will work -- but I don't see why I should have to do this, other examples I've seen do not add UIViews to the storyboard

          – zardon
          Jan 19 at 7:07













          try the edited answer

          – Mayank Wadhwa
          Jan 19 at 7:48





          try the edited answer

          – Mayank Wadhwa
          Jan 19 at 7:48













          Ok, I will give it a go

          – zardon
          Jan 19 at 17:10





          Ok, I will give it a go

          – zardon
          Jan 19 at 17:10


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54262941%2floading-uiview-from-bundle-only-fills-screen-partially%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Liquibase includeAll doesn't find base path

          How to use setInterval in EJS file?

          Petrus Granier-Deferre