Loading a XIB file to a UIView Swift - ios
I am trying to load my XIB file into a UIView but I am having some trouble. I have the required override functions but they seem to be crashing. Saying this error, warning:
could not load any Objective-C class information. This will
significantly reduce the quality of type information available.
I was wondering if someone could show me how to properly load the XIB file into a UIView
import UIKit
class Widget: UIView {
let view = UIView()
override init(frame: CGRect) {
super.init(frame: frame)
//call function
loadNib()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
loadNib()
//fatalError("init(coder:) has not been implemented")
}
func loadNib() {
let bundle = NSBundle(forClass: self.dynamicType)
let nib = UINib(nibName: "nib", bundle: bundle)
let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
view.frame = bounds
view.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
self.addSubview(view);
}
}
I uses this in one of our projects, might be useful to you
import UIKit
class RegisterPageView: UIView {
class func instanceFromNib() -> RegisterPageView {
return UINib(nibName: "RegisterPageView", bundle: nil).instantiateWithOwner(nil, options: nil)[0] as! RegisterPageView
}
}
Using Swift 3.0
let viewFromNib: UIView? = Bundle.main.loadNibNamed("NibName",
owner: nil,
options: nil)?.first
Improved DevAndArtist UIView extension
public extension UIView
{
static func loadFromXib<T>(withOwner: Any? = nil, options: [UINib.OptionsKey : Any]? = nil) -> T where T: UIView
{
let bundle = Bundle(for: self)
let nib = UINib(nibName: "\(self)", bundle: bundle)
guard let view = nib.instantiate(withOwner: withOwner, options: options).first as? T else {
fatalError("Could not load view from nib file.")
}
return view
}
}
Usage
let view = CustomView.loadFromXib()
let view = CustomView.loadFromXib(withOwner: self)
let view = CustomView.loadFromXib(withOwner: self, options: [UINibExternalObjects: objects])
External Objects discussion
Here is my approach (written in Swift 3.1):
protocol XibDesignable : class {}
extension XibDesignable where Self : UIView {
static func instantiateFromXib() -> Self {
let dynamicMetatype = Self.self
let bundle = Bundle(for: dynamicMetatype)
let nib = UINib(nibName: "\(dynamicMetatype)", bundle: bundle)
guard let view = nib.instantiate(withOwner: nil, options: nil).first as? Self else {
fatalError("Could not load view from nib file.")
}
return view
}
}
extension UIView : XibDesignable {}
Now I simply can create any UIView subclass from a Xib (assuming there is one) like so MyCustomView.instantiateFromXib(). Remember to name your Xib file exactly as your UIView subclass and set the type of the main view in that Xib file correctly.
As soon as SE-0068 will be implemented one could drop the protocol and move the function directly into the UIView extension.
Just a note: The original post uses a commonly used pattern with a nested view. IMHO this is a bad pattern which does not utilize the resources and only creates unnecessary view hierarchy.
Swift 4.x
let myView = Bundle.main.loadNibNamed("yourXibView", owner: nil, options: nil)![0] as! UIView
for swift 3
class YourClass: UIView {
class func instanceFromNib() -> YourClass {
return UINib(nibName: "YourClassNibName", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! YourClass
}
}
In my project I implemented the following (very similar to Peter's Solution)
import UIKit
// MARK: - Protocol Declaration
public protocol InterfaceBuilderInstantiable
{
/// The UINib that contains the view
///
/// Defaults to the swift class name if not implemented
static var associatedNib : UINib { get }
}
// MARK: - Default Implementation
extension InterfaceBuilderInstantiable
{
/// Creates a new instance from the associated Xib
///
/// - Returns: A new instance of this object loaded from xib
static func instantiateFromInterfaceBuilder() -> Self
{
return associatedNib.instantiate(withOwner:nil, options: nil)[0] as! Self
}
static var associatedNib : UINib
{
let name = String(describing: self)
return UINib(nibName: name, bundle: Bundle.main)
}
}
To use, you just simply implement the protocol:
class MyView: UIView, InterfaceBuilderInstantiable
{
// The rest
And if your nib is the same name as your class (MyView.xib), you're set: the default implementation of the protocol looks for a nib with the same name as the class in the main bundle.
Of course, if your nib is in another bundle or has a different name you can override the associatedNib and return your own nib.
Usually I use the following way to load a xib file owned by a custom UIView:
NSBundle.mainBundle().loadNibNamed(nibName, owner: self, options: nil)[0];
Swift 4.x
This is finally how I did it
This is not in the customView itself. I put the code where the ViewController is loading the customView.
import UIKit
class StartMenuViewController: UIViewController {
#IBOutlet weak var customView: CustomView!
override func viewDidLoad() {
super.viewDidLoad()
let myView = Bundle.main.loadNibNamed("CustomView", owner: self, options: nil)![0] as! UIView
customView .addSubview(myView)
}
let xibView = NSBundle.mainBundle().loadNibNamed("NameXibView", owner: nil, options: nil)[0] as! UIView
Swift 5.x
let loadMusicView = Bundle.main.loadNibNamed("MusicView", owner: nil, options: nil)![0] as? MusicView
loadMusicView?.frame = controlsMainView.bounds
loadMusicView?.autoresizingMask = [.flexibleWidth, .flexibleHeight]
controlsMainView.addSubview(loadMusicView!)
//if you have variables in your .xib file access those variables like this
loadMusicView.yourVariableName = .....
I would like to share this piece of code that required me some effort to make it resilient.
import Foundation
protocol Nib {
func registerNib()
}
extension Nib where Self : UIView {
func registerNib() {
guard let nibName = type(of: self).description().components(separatedBy: ".").last else { return }
// ** Check if resource is used in Interface Builder first to avoid crash during compile
#if !TARGET_INTERFACE_BUILDER
let bundle = Bundle(for: type(of: self))
guard let _ = bundle.path(forResource: nibName, ofType: "nib")
else { fatalError("can't find \(nibName) xib resource in current bundle") }
#endif
guard let view = Bundle(for: type(of: self)).loadNibNamed(nibName, owner: self, options: nil)?.first as? UIView
else { return }
// ** Another way to write it but do not work if xib is bundled with framework
//guard let view = UINib(nibName: nibName, bundle: nil).instantiate(withOwner: self, options: nil).first as? UIView
// else { return }
view.frame = bounds
addSubview(view)
}
}
You can use this as follow creating a xib resource file named as class name (aka CustomView.xib)
import UIKit
class CustomView: UIView, Nib {
override init(frame: CGRect) {
super.init(frame: frame)
postInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
postInit()
}
func postInit() {
registerNib()
}
}
Do not forget to set xib resource file's owner class to CustomView and leave blank custom class class field.
//**Just use this class as super class for the view **
import UIKit
class ViewWithXib: UIView {
func initUI() {}
private func xibSetup() {
let view = loadViewFromNib()
view.frame = bounds
view.autoresizingMask = [UIViewAutoresizing.flexibleWidth, UIViewAutoresizing.flexibleHeight]
addSubview(view)
initUI()
}
private func loadViewFromNib() -> UIView {
let thisName = String(describing: type(of: self))
let view = Bundle(for: self.classForCoder).loadNibNamed(thisName, owner: self, options: nil)?.first as! UIView
return view
}
override init(frame: CGRect) {
super.init(frame: frame)
xibSetup()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
xibSetup()
}
}
// Usage
class HeaderView: ViewWithXib {
}
let header = HeaderView() // No need to load the view from nib, It will work
func configureNib() -> UIView {
let bundle = Bundle(for: type(of: self))
let nib = UINib(nibName: "CustomUIView", bundle: bundle)
let view = nib.instantiate(withOwner: self, options: nil)[0] as! UIView
return view
}
And use this tutorial for custom view with xib...
https://developerfly.com/custom-view-use-xib-swift/
Related
error while creating custom view using XIB
I've created a custom view and interface using xib. class CardStatus: UIView{ override func awakeFromNib() { super.awakeFromNib() let bundle = Bundle(for: CardStatus.self) let nib = UINib(nibName: "CardStatus", bundle: bundle) guard let view = nib.instantiate(withOwner: self, options: nil).first as? UIView else { fatalError("Error loading \(self) from nib") } addSubview(view) view.translatesAutoresizingMaskIntoConstraints = false } } xib looks like below: in the storyboard, I've set the class as my custom one like below. the error is like below: its going in infinite loop. I tried the below way also class CardStatus: UIView{ required init?(coder aDecoder: NSCoder)() { super.init(coder: aDecoder) let bundle = Bundle(for: CardStatus.self) let nib = UINib(nibName: "CardStatus", bundle: bundle) guard let view = nib.instantiate(withOwner: self, options: nil).first as? UIView else { fatalError("Error loading \(self) from nib") } addSubview(view) view.translatesAutoresizingMaskIntoConstraints = false } }
Could not load NIB in bundle Xcode8
I've followed a tutorial but when I try to run my code it crashed because it couldn't load NIB in bundle. Here's my code: class BuyPremiumView: UIView { override init(frame: CGRect) { super.init(frame: frame) setupView() } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) setupView() } // MARK: - Private Helper Methods // Performs the initial setup. fileprivate func setupView() { let view = viewFromNibForClass() view.frame = bounds view.autoresizingMask = [ UIViewAutoresizing.flexibleWidth, UIViewAutoresizing.flexibleHeight ] addSubview(view) } // Loads a XIB file into a view and returns this view. fileprivate func viewFromNibForClass() -> UIView { let bundle = Bundle(for: type(of: self)) let nib = UINib(nibName: String(describing: type(of: self)), bundle: bundle) let view = nib.instantiate(withOwner: self, options: nil)[0] as! UIView return view } } Does anybody know how to fix this?
if you would load view from nib i think best easy way is : var yourView : YourView = NSBundle.mainBundle().loadNibNamed("myXib", owner: self, options: nil)[0] as! YourView i hope this help
Frame size of UIView when loaded from Nib?
I am loading a UIView from a .xib file like this: static func loadFromNib() -> CardView { let nib = UINib(nibName: "CardView", bundle: nil) return nib.instantiate(withOwner: self, options: nil).first as! CardView } When loaded the view has the exact frame size as set in "Frame Rectangle" of the Size Inspector in the Interface Builder. Is this guaranteed? I need this size to be exact, because subview constraints are specific and will not fit if the view has the wrong size [*], but I didn't find any mention of this in Apple's docs. [*] = Reason: I am rendering the view to an UIImage so I can display it in and UIImageView later on. It shows the image of a membership card and name and membership number need to be in the right place with the correct font size on all devices..
Set any UIView subclass as owner of xib, then load xib as subview of this view and set autoresizing mask. This is how I use it: extension UIView { func loadXibView(with xibFrame: CGRect) -> UIView { let className = String(describing: type(of: self)) let bundle = Bundle(for: type(of: self)) let nib = UINib(nibName: className, bundle: bundle) guard let xibView = nib.instantiate(withOwner: self, options: nil)[0] as? UIView else { return UIView() } xibView.autoresizingMask = [.flexibleWidth, .flexibleHeight] xibView.frame = xibFrame return xibView } } xibView.autoresizingMask = [.flexibleWidth, .flexibleHeight] sets size of view properly. Then just use it any UIView subclass in initialization: override init(frame: CGRect) { super.init(frame: frame) addSubview(loadXibView(with: bounds)) } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) addSubview(loadXibView(with: bounds)) }
Create a custom class for your UIView: class CardView: UIView { override init(frame: CGrect) { super.init(frame: frame) let xibView = UINib(nibName: "CardView", bundle: nil).instantiate(withOwner: nil, options:nil)[0] as! UIView self.addSubview(xibView) } require init?(coder: aDecoder: NSCoder) { super.init(coder: aDecoder) } } and then call if from the class you'll be implementing it in with the frame size you need or otherwise it will default to the size that is set in your interface builder: // MyViewController var cardView: CardView? override func viewDidLoad() { super.viewDidLoad() self.cardView = CardView() self.cardView.frame.size = CGSize(size here) self.cardView.frame.origin = CGPoint(point here) self.view.addSubview(self.cardView!) }
Addsubview custom xib file error
I'm using Swift 3, I have error adding xib file as subview let bundle = Bundle(for: type(of: self)) let nib = UINib(nibName: "CustomView", bundle: bundle) let view = nib.instantiate(withOwner: self, options: nil)[0] as! UIView view.frame = bounds view.autoresizingMask = [.flexibleWidth, .flexibleHeight] self.addSubview(view); Can someone help me please?
In my Custom View Class i implemented as follow: import UIKit #IBDesignable class TestView: UIView { override init(frame: CGRect) { super.init(frame: frame) loadViewFromNib() } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } func loadViewFromNib(){ let view = Bundle.main.loadNibNamed("test", owner: self, options: nil)?.first as! UIView print(view.backgroundColor ?? UIColor.blue) } } then In my ViewController where i want add this custom view i write as below: let view = TestView() and i dont find any crash.
Try this, it is for swift 3. let view = Bundle.main.loadNibNamed("CustomView", owner: self, options: nil)?.first as! UIView self .addSubview(view)
How to initialize/instantiate a custom UIView class with a XIB file in Swift
I have a class called MyClass which is a subclass of UIView, that I want to initialize with a XIB file. I am not sure how to initialize this class with the xib file called View.xib class MyClass: UIView { // what should I do here? //init(coder aDecoder: NSCoder) {} ?? }
I tested this code and it works great: class MyClass: UIView { class func instanceFromNib() -> UIView { return UINib(nibName: "nib file name", bundle: nil).instantiateWithOwner(nil, options: nil)[0] as UIView } } Initialise the view and use it like below: var view = MyClass.instanceFromNib() self.view.addSubview(view) OR var view = MyClass.instanceFromNib self.view.addSubview(view()) UPDATE Swift >=3.x & Swift >=4.x class func instanceFromNib() -> UIView { return UINib(nibName: "nib file name", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! UIView }
Sam's solution is already great, despite it doesn't take different bundles into account (NSBundle:forClass comes to the rescue) and requires manual loading, a.k.a typing code. If you want full support for your Xib Outlets, different Bundles (use in frameworks!) and get a nice preview in Storyboard try this: // NibLoadingView.swift import UIKit /* Usage: - Subclass your UIView from NibLoadView to automatically load an Xib with the same name as your class - Set the class name to File's Owner in the Xib file */ #IBDesignable class NibLoadingView: UIView { #IBOutlet weak var view: UIView! override init(frame: CGRect) { super.init(frame: frame) nibSetup() } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) nibSetup() } private func nibSetup() { backgroundColor = .clearColor() view = loadViewFromNib() view.frame = bounds view.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] view.translatesAutoresizingMaskIntoConstraints = true addSubview(view) } private func loadViewFromNib() -> UIView { let bundle = NSBundle(forClass: self.dynamicType) let nib = UINib(nibName: String(self.dynamicType), bundle: bundle) let nibView = nib.instantiateWithOwner(self, options: nil).first as! UIView return nibView } } Use your xib as usual, i.e. connect Outlets to File Owner and set File Owner class to your own class. Usage: Just subclass your own View class from NibLoadingView & Set the class name to File's Owner in the Xib file No additional code required anymore. Credits where credit's due: Forked this with minor changes from DenHeadless on GH. My Gist: https://gist.github.com/winkelsdorf/16c481f274134718946328b6e2c9a4d8
As of Swift 2.0, you can add a protocol extension. In my opinion, this is a better approach because the return type is Self rather than UIView, so the caller doesn't need to cast to the view class. import UIKit protocol UIViewLoading {} extension UIView : UIViewLoading {} extension UIViewLoading where Self : UIView { // note that this method returns an instance of type `Self`, rather than UIView static func loadFromNib() -> Self { let nibName = "\(self)".characters.split{$0 == "."}.map(String.init).last! let nib = UINib(nibName: nibName, bundle: nil) return nib.instantiateWithOwner(self, options: nil).first as! Self } }
And this is the answer of Frederik on Swift 3.0 /* Usage: - make your CustomeView class and inherit from this one - in your Xib file make the file owner is your CustomeView class - *Important* the root view in your Xib file must be of type UIView - link all outlets to the file owner */ #IBDesignable class NibLoadingView: UIView { #IBOutlet weak var view: UIView! override init(frame: CGRect) { super.init(frame: frame) nibSetup() } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) nibSetup() } private func nibSetup() { backgroundColor = .clear view = loadViewFromNib() view.frame = bounds view.autoresizingMask = [.flexibleWidth, .flexibleHeight] view.translatesAutoresizingMaskIntoConstraints = true addSubview(view) } private func loadViewFromNib() -> UIView { let bundle = Bundle(for: type(of: self)) let nib = UINib(nibName: String(describing: type(of: self)), bundle: bundle) let nibView = nib.instantiate(withOwner: self, options: nil).first as! UIView return nibView } }
Universal way of loading view from xib: Example: let myView = Bundle.loadView(fromNib: "MyView", withType: MyView.self) Implementation: extension Bundle { static func loadView<T>(fromNib name: String, withType type: T.Type) -> T { if let view = Bundle.main.loadNibNamed(name, owner: nil, options: nil)?.first as? T { return view } fatalError("Could not load view with type " + String(describing: type)) } }
Swift 4 Here in my case I have to pass data into that custom view, so I create static function to instantiate the view. Create UIView extension extension UIView { class func initFromNib<T: UIView>() -> T { return Bundle.main.loadNibNamed(String(describing: self), owner: nil, options: nil)?[0] as! T } } Create MyCustomView class MyCustomView: UIView { #IBOutlet weak var messageLabel: UILabel! static func instantiate(message: String) -> MyCustomView { let view: MyCustomView = initFromNib() view.messageLabel.text = message return view } } Set custom class to MyCustomView in .xib file. Connect outlet if necessary as usual. Instantiate view let view = MyCustomView.instantiate(message: "Hello World.")
Swift 3 Answer: In my case, I wanted to have an outlet in my custom class that I could modify: class MyClassView: UIView { #IBOutlet weak var myLabel: UILabel! class func createMyClassView() -> MyClassView { let myClassNib = UINib(nibName: "MyClass", bundle: nil) return myClassNib.instantiate(withOwner: nil, options: nil)[0] as! MyClassView } } When in the .xib file, make sure that the Custom Class field is MyClassView. Don't bother with the File's Owner. Also, make sure that you connect the outlet in MyClassView to the label: To instantiate it: let myClassView = MyClassView.createMyClassView() myClassView.myLabel.text = "Hello World!"
Swift 5.3 Create a class named NibLoadingView with the following contents: import UIKit /* Usage: - Subclass your UIView from NibLoadView to automatically load an Xib with the same name as your class - Set the class name to File's Owner in the Xib file */ #IBDesignable class NibLoadingView: UIView { #IBOutlet public weak var view: UIView! private var didLoad: Bool = false public override init(frame: CGRect) { super.init(frame: frame) self.nibSetup() } required public init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) self.nibSetup() } open override func layoutSubviews() { super.layoutSubviews() if !self.didLoad { self.didLoad = true self.viewDidLoad() } } open func viewDidLoad() { self.setupUI() } private func nibSetup() { self.view = self.loadViewFromNib() self.view.frame = bounds self.view.autoresizingMask = [.flexibleWidth, .flexibleHeight] self.view.translatesAutoresizingMaskIntoConstraints = true addSubview(self.view) } private func loadViewFromNib() -> UIView { guard let nibName = type(of: self).description().components(separatedBy: ".").last else { fatalError("Bad nib name") } if let defaultBundleView = UINib(nibName: nibName, bundle: Bundle(for: type(of: self))).instantiate(withOwner: self, options: nil).first as? UIView { return defaultBundleView } else { fatalError("Cannot load view from bundle") } } } Now create a XIB & UIView class pair, set XIB's owner to UIView class and subclass NibLoadingView. You can now init the class just like ExampleView(), ExampleView(frame: CGRect), etc or directly from storyboards. You can also use viewDidLoad just like in UIViewController. All your outlets and layouts are rendered in that moment. Based on Frederik's answer
Below code will do the job if anyone wants to load a custom View with XIB Programmatically. let customView = UINib(nibName:"CustomView",bundle:.main).instantiate(withOwner: nil, options: nil).first as! UIView customView.frame = self.view.bounds self.view.addSubview(customView)
create view from .xib let nib = UINib(nibName: "View1", bundle: nil) //View1 is a file name(View1.swift) if let view = nib.instantiate(withOwner: self, options: nil).first as? UIView { // logic } //or if let view = Bundle.main.loadNibNamed("View1", owner: self, options: nil)?.first as? UIView { // logic } Since .xib can contains several view, that is why you are working with array here(.first) For example Create View1.xib Create View1.swift where set owner(loadNibNamed()) in code to create the instance of class("View1") Set File's Owner in View1.xib as View1. Allows to connect outlets and actions import UIKit class View1: UIView { #IBOutlet var contentView: UIView! override init(frame: CGRect) { super.init(frame: frame) self.commonInit() } required init?(coder: NSCoder) { super.init(coder: coder) self.commonInit() } private func commonInit() { if let view = Bundle.main.loadNibNamed("View1", owner: self, options: nil)?.first as? UIView { addSubview(view) view.frame = self.bounds } } } Notes if we move Custom Class from File's owner to Container View we get error(loop). It is because of: System init instance from Container View where we init it again in commonInit() .loadNibNamed Thread 1: EXC_BAD_ACCESS (code=2, address=0x7ff7bf6fbfc8)
override func draw(_ rect: CGRect) { AlertView.layer.cornerRadius = 4 AlertView.clipsToBounds = true btnOk.layer.cornerRadius = 4 btnOk.clipsToBounds = true } class func instanceFromNib() -> LAAlertView { return UINib(nibName: "LAAlertView", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! LAAlertView } #IBAction func okBtnDidClicked(_ sender: Any) { removeAlertViewFromWindow() UIView.animate(withDuration: 0.4, delay: 0.0, options: .allowAnimatedContent, animations: {() -> Void in self.AlertView.transform = CGAffineTransform(scaleX: 0.1, y: 0.1) }, completion: {(finished: Bool) -> Void in self.AlertView.transform = CGAffineTransform.identity self.AlertView.transform = CGAffineTransform(scaleX: 0.0, y: 0.0) self.AlertView.isHidden = true self.AlertView.alpha = 0.0 self.alpha = 0.5 }) } func removeAlertViewFromWindow() { for subview in (appDel.window?.subviews)! { if subview.tag == 500500{ subview.removeFromSuperview() } } } public func openAlertView(title:String , string : String ){ lblTital.text = title txtView.text = string self.frame = CGRect(x: 0, y: 0, width: screenWidth, height: screenHeight) appDel.window!.addSubview(self) AlertView.alpha = 1.0 AlertView.isHidden = false UIView.animate(withDuration: 0.2, animations: {() -> Void in self.alpha = 1.0 }) AlertView.transform = CGAffineTransform(scaleX: 0.0, y: 0.0) UIView.animate(withDuration: 0.3, delay: 0.2, options: .allowAnimatedContent, animations: {() -> Void in self.AlertView.transform = CGAffineTransform(scaleX: 1.1, y: 1.1) }, completion: {(finished: Bool) -> Void in UIView.animate(withDuration: 0.2, animations: {() -> Void in self.AlertView.transform = CGAffineTransform(scaleX: 1.0, y: 1.0) }) }) }