Load a UIView from nib in Swift - swift

Here is my Objective-C code which I'm using to load a nib for my customised UIView:
-(id)init{
NSArray *subviewArray = [[NSBundle mainBundle] loadNibNamed:#"myXib" owner:self options:nil];
return [subviewArray objectAtIndex:0];
}
What is the equivalent code in Swift?

My contribution:
extension UIView {
class func fromNib<T: UIView>() -> T {
return Bundle(for: T.self).loadNibNamed(String(describing: T.self), owner: nil, options: nil)![0] as! T
}
}
Then call it like this:
let myCustomView: CustomView = UIView.fromNib()
..or even:
let myCustomView: CustomView = .fromNib()

Original Solution
I created a XIB and a class named SomeView (used the same name for
convenience and readability). I based both on a UIView.
In the XIB, I changed the "File's Owner" class to SomeView (in the identity inspector).
I created a UIView outlet in SomeView.swift, linking it to the top level view in the XIB file (named it "view" for convenience). I then added other outlets to other controls in the XIB file as needed.
in SomeView.swift, I loaded the XIB inside the "init with code" initializer. There is no need to assign anything to "self". As soon as the XIB is loaded, all outlets are connected, including the top level view. The only thing missing, is to add the top view to the view hierarchy:
.
class SomeView: UIView {
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
NSBundle.mainBundle().loadNibNamed("SomeView", owner: self, options: nil)
self.addSubview(self.view); // adding the top level view to the view hierarchy
}
...
}
Note that this way I get a class that loads itself from nib. I could then use SomeView as a class whenever UIView could be used in the project (in interface builder or programmatically).
Update - using Swift 3 syntax
Loading a xib in the following extension is written as an instance method, which can then be used by an initializer like the one above:
extension UIView {
#discardableResult // 1
func fromNib<T : UIView>() -> T? { // 2
guard let contentView = Bundle(for: type(of: self)).loadNibNamed(String(describing: type(of: self)), owner: self, options: nil)?.first as? T else { // 3
// xib not loaded, or its top view is of the wrong type
return nil
}
self.addSubview(contentView) // 4
contentView.translatesAutoresizingMaskIntoConstraints = false // 5
contentView.layoutAttachAll(to: self) // 6
return contentView // 7
}
}
Using a discardable return value since the returned view is mostly of no interest to caller when all outlets are already connected.
This is a generic method that returns an optional object of type UIView. If it fails to load the view, it returns nil.
Attempting to load a XIB file with the same name as the current class instance. If that fails, nil is returned.
Adding the top level view to the view hierarchy.
This line assumes we're using constraints to layout the view.
This method adds top, bottom, leading & trailing constraints - attaching the view to "self" on all sides (See: https://stackoverflow.com/a/46279424/2274829 for details)
Returning the top level view
And the caller method might look like this:
final class SomeView: UIView { // 1.
required init?(coder aDecoder: NSCoder) { // 2 - storyboard initializer
super.init(coder: aDecoder)
fromNib() // 5.
}
init() { // 3 - programmatic initializer
super.init(frame: CGRect.zero) // 4.
fromNib() // 6.
}
// other methods ...
}
SomeClass is a UIView subclass that loads its content from a SomeClass.xib file. The "final" keyword is optional.
An initializer for when the view is used in a storyboard (remember to use SomeClass as the custom class of your storyboard view).
An initializer for when the view is created programmatically (i.e.: "let myView = SomeView()").
Using an all-zeros frame since this view is laid out using auto-layout.
Note that an "init(frame: CGRect) {..}" method is not created independently, since auto-layout is used exclusively in our project.
& 6. Loading the xib file using the extension.
Credit: Using a generic extension in this solution was inspired by Robert's answer below.
Edit
Changing "view" to "contentView" to avoid confusion. Also changed the array subscript to ".first".

Now being able to return -> Self in swift helps simplify this a bit. Last confirmed on Swift 5.
extension UIView {
class func fromNib(named: String? = nil) -> Self {
let name = named ?? "\(Self.self)"
guard
let nib = Bundle.main.loadNibNamed(name, owner: nil, options: nil)
else { fatalError("missing expected nib named: \(name)") }
guard
/// we're using `first` here because compact map chokes compiler on
/// optimized release, so you can't use two views in one nib if you wanted to
/// and are now looking at this
let view = nib.first as? Self
else { fatalError("view of type \(Self.self) not found in \(nib)") }
return view
}
}
If your .xib file and subclass share the same name, you can use:
let view = CustomView.fromNib()
If you have a custom name, use:
let view = CustomView.fromNib(named: "special-case")
NOTE:
If you're getting the error "view of type YourType not found in.." then you haven't set the view's class in the .xib file
Select your view in the .xib file, and press cmd + opt + 4 and in the class input, enter your class

Swift 4 - 5.1 Protocol Extensions
public protocol NibInstantiatable {
static func nibName() -> String
}
extension NibInstantiatable {
static func nibName() -> String {
return String(describing: self)
}
}
extension NibInstantiatable where Self: UIView {
static func fromNib() -> Self {
let bundle = Bundle(for: self)
let nib = bundle.loadNibNamed(nibName(), owner: self, options: nil)
return nib!.first as! Self
}
}
Adoption
class MyView: UIView, NibInstantiatable {
}
This implementation assumes that the Nib has the same name as the UIView class. Ex. MyView.xib. You can modify this behavior by implementing nibName() in MyView to return a different name than the default protocol extension implementation.
In the xib the files owner is MyView and the root view class is MyView.
Usage
let view = MyView.fromNib()

try following code.
var uiview :UIView?
self.uiview = NSBundle.mainBundle().loadNibNamed("myXib", owner: self, options: nil)[0] as? UIView
Edit:
import UIKit
class TestObject: NSObject {
var uiview:UIView?
init() {
super.init()
self.uiview = NSBundle.mainBundle().loadNibNamed("myXib", owner: self, options: nil)[0] as? UIView
}
}

If you have a lot of custom views in your project you can create class like UIViewFromNib
Swift 2.3
class UIViewFromNib: UIView {
var contentView: UIView!
var nibName: String {
return String(self.dynamicType)
}
//MARK:
override init(frame: CGRect) {
super.init(frame: frame)
loadViewFromNib()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
loadViewFromNib()
}
//MARK:
private func loadViewFromNib() {
contentView = NSBundle.mainBundle().loadNibNamed(nibName, owner: self, options: nil)[0] as! UIView
contentView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
contentView.frame = bounds
addSubview(contentView)
}
}
Swift 5
class UIViewFromNib: UIView {
var contentView: UIView!
var nibName: String {
return String(describing: type(of: self))
}
//MARK:
override init(frame: CGRect) {
super.init(frame: frame)
loadViewFromNib()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
loadViewFromNib()
}
//MARK:
func loadViewFromNib() {
let bundle = Bundle(for: UIViewFromNib.self)
contentView = UINib(nibName: nibName, bundle: bundle).instantiate(withOwner: self).first as? UIView
contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
contentView.frame = bounds
addSubview(contentView)
}
}
And in every class just inherit from UIViewFromNib, also you can override nibName property if .xib file has different name:
class MyCustomClass: UIViewFromNib {
}

I achieved this with Swift by the following code:
class Dialog: UIView {
#IBOutlet var view:UIView!
override init(frame: CGRect) {
super.init(frame: frame)
self.frame = UIScreen.mainScreen().bounds
NSBundle.mainBundle().loadNibNamed("Dialog", owner: self, options: nil)
self.view.frame = UIScreen.mainScreen().bounds
self.addSubview(self.view)
}
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
Don't forget to connect your XIB view outlet to view outlet defined in swift. You can also set First Responder to your custom class name to start connecting any additional outlets.
Hope this helps!

Tested in Xcode 7 beta 4 , Swift 2.0 and iOS9 SDK .
The following code will assign xib to the uiview.
You can able to use this custom xib view in storyboard and access the IBOutlet object also.
import UIKit
#IBDesignable class SimpleCustomView:UIView
{
var view:UIView!;
#IBOutlet weak var lblTitle: UILabel!
#IBInspectable var lblTitleText : String?
{
get{
return lblTitle.text;
}
set(lblTitleText)
{
lblTitle.text = lblTitleText!;
}
}
override init(frame: CGRect) {
super.init(frame: frame)
loadViewFromNib ()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
loadViewFromNib ()
}
func loadViewFromNib() {
let bundle = NSBundle(forClass: self.dynamicType)
let nib = UINib(nibName: "SimpleCustomView", bundle: bundle)
let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
view.frame = bounds
view.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
self.addSubview(view);
}
}
Access customview programatically
self.customView = SimpleCustomView(frame: CGRectMake(100, 100, 200, 200))
self.view.addSubview(self.customView!);
Source code - https://github.com/karthikprabhuA/CustomXIBSwift

Building on the above solutions.
This will work across all project bundles and no need for generics when calling fromNib().
Swift 2
extension UIView {
public class func fromNib() -> Self {
return fromNib(nil)
}
public class func fromNib(nibName: String?) -> Self {
func fromNibHelper<T where T : UIView>(nibName: String?) -> T {
let bundle = NSBundle(forClass: T.self)
let name = nibName ?? String(T.self)
return bundle.loadNibNamed(name, owner: nil, options: nil)?.first as? T ?? T()
}
return fromNibHelper(nibName)
}
}
Swift 3
extension UIView {
public class func fromNib() -> Self {
return fromNib(nibName: nil)
}
public class func fromNib(nibName: String?) -> Self {
func fromNibHelper<T>(nibName: String?) -> T where T : UIView {
let bundle = Bundle(for: T.self)
let name = nibName ?? String(describing: T.self)
return bundle.loadNibNamed(name, owner: nil, options: nil)?.first as? T ?? T()
}
return fromNibHelper(nibName: nibName)
}
}
Can be used like this:
let someView = SomeView.fromNib()
Or like this:
let someView = SomeView.fromNib("SomeOtherNibFileName")

Swift 4
Don't forget to write ".first as? CustomView".
if let customView = Bundle.main.loadNibNamed("myXib", owner: self, options: nil)?.first as? CustomView {
self.view.addSubview(customView)
}
If you want to use anywhere
The Best Solution is Robert Gummesson's answer.
extension UIView {
class func fromNib<T: UIView>() -> T {
return Bundle.main.loadNibNamed(String(describing: T.self), owner: nil, options: nil)![0] as! T
}
}
Then call it like this:
let myCustomView: CustomView = UIView.fromNib()

I prefer this solution (based on the answer if #GK100):
I created a XIB and a class named SomeView (used the same name for convenience and readability). I based both on a UIView.
In the XIB, I changed the "File's Owner" class to SomeView (in the identity inspector).
I created a UIView outlet in SomeView.swift, linking it to the top level view in the XIB file (named it "view" for convenience). I then added other outlets to other controls in the XIB file as needed.
In SomeView.swift, I loaded the XIB inside the init or init:frame: CGRect initializer. There is no need to assign anything to "self". As soon as the XIB is loaded, all outlets are connected, including the top level view. The only thing missing, is to add the top view to the view hierarchy:
class SomeView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
NSBundle.mainBundle().loadNibNamed("SomeObject", owner: self, options: nil)
self.addSubview(self.view); // adding the top level view to the view hierarchy
}
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
NSBundle.mainBundle().loadNibNamed("SomeObject", owner: self, options: nil)
self.addSubview(self.view); // adding the top level view to the view hierarchy
}
...
}

A nice way to do this with Swift is to use an enum.
enum Views: String {
case view1 = "View1" // Change View1 to be the name of your nib
case view2 = "View2" // Change View2 to be the name of another nib
func getView() -> UIView? {
return NSBundle.mainBundle().loadNibNamed(self.rawValue, owner: nil, options: nil).first as? UIView
}
}
Then in your code you can simply use:
let view = Views.view1.getView()

Updated for Swift 5
Somewhere define below:
extension UIView {
public class func fromNib<T: UIView>() -> T {
let name = String(describing: Self.self);
guard let nib = Bundle(for: Self.self).loadNibNamed(
name, owner: nil, options: nil)
else {
fatalError("Missing nib-file named: \(name)")
}
return nib.first as! T
}
}
And use above like:
let view: MyCustomView = .fromNib();
Which will search in same bundle as MyCustomView, then load MyCustomView.nib file (if file exists, and is added to project).

let subviewArray = NSBundle.mainBundle().loadNibNamed("myXib", owner: self, options: nil)
return subviewArray[0]

Swift 5 - Clean and easy to use extension
[Copy Paste from production project]
//
// Refactored by Essam Mohamed Fahmi.
//
import UIKit
extension UIView
{
static var nib: UINib
{
return UINib(nibName: "\(self)", bundle: nil)
}
static func instantiateFromNib() -> Self?
{
return nib.instantiate() as? Self
}
}
extension UINib
{
func instantiate() -> Any?
{
return instantiate(withOwner: nil, options: nil).first
}
}
Usage
let myCustomView: CustomView = .instantiateFromNib()

I just do this way :
if let myView = UINib.init(nibName: "MyView", bundle: nil).instantiate(withOwner: self)[0] as? MyView {
// Do something with myView
}
This sample uses the first view in the nib "MyView.xib" in the main bundle. But you can vary either the index, the nib name, or the bundle ( main by default ).
I used to awake views into the view init method or make generic methods as in the proposed answers above ( which are smart by the way ), but I don't do it anymore because I have noticed use cases are often different, and to cover all cases, generic methods become as complex as using the UINib.instantiate method.
I prefer to use a factory object, usually the ViewController that will use the view, or a dedicated factory object or view extension if the view needs to be used in multiple places.
In this example, a ViewController loads a view from nib.
The nib file can be changed to use different layouts for the same view class. ( This not nice code, it just illustrates the idea )
class MyViewController {
// Use "MyView-Compact" for compact version
var myViewNibFileName = "MyView-Standard"
lazy var myView: MyView = {
// Be sure the Nib is correct, or it will crash
// We don't want to continue with a wrong view anyway, so ! is ok
UINib.init(nibName: myViewNibFileName, bundle: nil).instantiate(withOwner: self)[0] as! MyView
}()
}

Swift 3 version of Logan's answer
extension UIView {
public class func fromNib(nibName: String? = nil) -> Self {
return fromNib(nibName: nibName, type: self)
}
public class func fromNib<T: UIView>(nibName: String? = nil, type: T.Type) -> T {
return fromNib(nibName: nibName, type: T.self)!
}
public class func fromNib<T: UIView>(nibName: String? = nil, type: T.Type) -> T? {
var view: T?
let name: String
if let nibName = nibName {
name = nibName
} else {
name = self.nibName
}
if let nibViews = Bundle.main.loadNibNamed(name, owner: nil, options: nil) {
for nibView in nibViews {
if let tog = nibView as? T {
view = tog
}
}
}
return view
}
public class var nibName: String {
return "\(self)".components(separatedBy: ".").first ?? ""
}
public class var nib: UINib? {
if let _ = Bundle.main.path(forResource: nibName, ofType: "nib") {
return UINib(nibName: nibName, bundle: nil)
} else {
return nil
}
}
}

Here is a clean and declarative way of programmatically loading a view using a protocol and protocol extension (Swift 4.2):
protocol XibLoadable {
associatedtype CustomViewType
static func loadFromXib() -> CustomViewType
}
extension XibLoadable where Self: UIView {
static func loadFromXib() -> Self {
let nib = UINib(nibName: "\(self)", bundle: Bundle(for: self))
guard let customView = nib.instantiate(withOwner: self, options: nil).first as? Self else {
// your app should crash if the xib doesn't exist
preconditionFailure("Couldn't load xib for view: \(self)")
}
return customView
}
}
And you can use this like so:
// don't forget you need a xib file too
final class MyView: UIView, XibLoadable { ... }
// and when you want to use it
let viewInstance = MyView.loadFromXib()
Some additional considerations:
Make sure your custom view's xib file has the view's Custom Class set (and outlets/actions set from there), not the File Owner's.
You can use this protocol/extension external to your custom view or internal. You may want to use it internally if you have some other setup work when initializing your view.
Your custom view class and xib file need to have the same name.

All you have to do is call init method in your UIView class.
Do it that way:
class className: UIView {
#IBOutlet var view: UIView!
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)!
}
func setup() {
UINib(nibName: "nib", bundle: nil).instantiateWithOwner(self, options: nil)
addSubview(view)
view.frame = self.bounds
}
}
Now, if you want to add this view as a sub view in view controller, do it that way in view controller.swift file:
self.view.addSubview(className())

Similar to some of the answers above but a more consistent Swift3 UIView extension:
extension UIView {
class func fromNib<A: UIView> (nibName name: String, bundle: Bundle? = nil) -> A? {
let bundle = bundle ?? Bundle.main
let nibViews = bundle.loadNibNamed(name, owner: self, options: nil)
return nibViews?.first as? A
}
class func fromNib<T: UIView>() -> T? {
return fromNib(nibName: String(describing: T.self), bundle: nil)
}
}
Which gives the convenience of being able to load the class from a self named nib but also from other nibs/bundles.

You can do this via storyboard, just add proper constraints for view. You can do this easily by subclassing any view from your own let's say BaseView:
Objective-C
BaseView.h
/*!
#class BaseView
#discussion Base View for getting view from xibFile
#availability ios7 and later
*/
#interface BaseView : UIView
#end
BaseView.m
#import "BaseView.h"
#implementation BaseView
#pragma mark - Public
- (instancetype)initWithCoder:(NSCoder *)coder
{
self = [super initWithCoder:coder];
if (self) {
[self prepareView];
}
return self;
}
#pragma mark - LifeCycle
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self prepareView];
}
return self;
}
#pragma mark - Private
- (void)prepareView
{
NSArray *nibsArray = [[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class]) owner:self options:nil];
UIView *view = [nibsArray firstObject];
view.translatesAutoresizingMaskIntoConstraints = NO;
[self addSubview:view];
[self addConstraintsForView:view];
}
#pragma mark - Add constraints
- (void)addConstraintsForView:(UIView *)view
{
[self addConstraints:#[[NSLayoutConstraint constraintWithItem:view
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:0],
[NSLayoutConstraint constraintWithItem:view
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self attribute:NSLayoutAttributeTop
multiplier:1.0
constant:0],
[NSLayoutConstraint constraintWithItem:view
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:0],
[NSLayoutConstraint constraintWithItem:view
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self attribute:NSLayoutAttributeRight
multiplier:1.0
constant:0]
]];
}
#end
Swift 4
import UIKit
class BaseView : UIView {
// MARK: - LifeCycle
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
prepareView()
}
override init(frame: CGRect) {
super.init(frame: frame)
prepareView()
}
internal class func xibName() -> String {
return String(describing: self)
}
// MARK: - Private
fileprivate func prepareView() {
let nameForXib = BaseView.xibName()
let nibs = Bundle.main.loadNibNamed(nameForXib, owner: self, options: nil)
if let view = nibs?.first as? UIView {
view.backgroundColor = UIColor.clear
view.translatesAutoresizingMaskIntoConstraints = false
addSubviewWithConstraints(view, offset: false)
}
}
}
UIView+Subview
public extension UIView {
// MARK: - UIView+Extensions
public func addSubviewWithConstraints(_ subview:UIView, offset:Bool = true) {
subview.translatesAutoresizingMaskIntoConstraints = false
let views = [
"subview" : subview
]
addSubview(subview)
var constraints = NSLayoutConstraint.constraints(withVisualFormat: offset ? "H:|-[subview]-|" : "H:|[subview]|", options: [.alignAllLeading, .alignAllTrailing], metrics: nil, views: views)
constraints.append(contentsOf: NSLayoutConstraint.constraints(withVisualFormat: offset ? "V:|-[subview]-|" : "V:|[subview]|", options: [.alignAllTop, .alignAllBottom], metrics: nil, views: views))
NSLayoutConstraint.activate(constraints)
}
}
I provide 2 variants how to add constraints - common one and within visual format language - select any you want :)
Also, by default assumed that xib name has same name as implementation class name. If no - just change xibName parameter.
If you subclass your view from BaseView - you can easily put any view and specify class in IB.

If you want the Swift UIView subclass to be entirely self contained, and have the ability to be instantiated using init or init(frame:) without exposing the implementation detail of using a Nib, then you can use a protocol extension to achieve this. This solution avoids the nested UIView hierarchy as suggested by many of the other solutions.
public class CustomView: UIView {
#IBOutlet weak var nameLabel: UILabel!
#IBOutlet weak var valueLabel: UILabel!
public convenience init() {
self.init(frame: CGRect.zero)
}
public override convenience init(frame: CGRect) {
self.init(internal: nil)
self.frame = frame
}
public required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
fileprivate func commonInit() {
}
}
fileprivate protocol _CustomView {
}
extension CustomView: _CustomView {
}
fileprivate extension _CustomView {
// Protocol extension initializer - has the ability to assign to self, unlike
// class initializers. Note that the name of this initializer can be anything
// you like, here we've called it init(internal:)
init(internal: Int?) {
self = Bundle.main.loadNibNamed("CustomView", owner:nil, options:nil)![0] as! Self;
}
}

class func loadFromNib<T: UIView>() -> T {
let nibName = String(describing: self)
return Bundle.main.loadNibNamed(nibName, owner: nil, options: nil)![0] as! T
}

let nibs = Bundle.main.loadNibNamed("YourView", owner: nil, options: nil)
let shareView = nibs![0] as! ShareView
self.view.addSubview(shareView)

// Use this class as super 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()
}
}
// Usages:
class HeaderView: ViewWithXib {
}
let header = HeaderView() // No need to load the view from nib, It will work

More powerful version based on Logan's answer
extension UIView {
public class func fromNib(nibName: String? = nil) -> Self {
return fromNib(nibName: nibName, type: self)
}
public class func fromNib<T: UIView>(nibName: String? = nil, type: T.Type) -> T {
return fromNib(nibName: nibName, type: T.self)!
}
public class func fromNib<T: UIView>(nibName: String? = nil, type: T.Type) -> T? {
var view: T?
let name: String
if let nibName = nibName {
name = nibName
} else {
name = self.nibName
}
if let nibViews = nibBundle.loadNibNamed(name, owner: nil, options: nil) {
if nibViews.indices.contains(nibIndex), let tog = nibViews[nibIndex] as? T {
view = tog
}
}
return view
}
public class var nibName: String {
return "\(self)".components(separatedBy: ".").first ?? ""
}
public class var nibIndex: Int {
return 0
}
public class var nibBundle: Bundle {
return Bundle.main
}
}
And you can use like
class BaseView: UIView {
override class var nibName: String { return "BaseView" }
weak var delegate: StandardStateViewDelegate?
}
class ChildView: BaseView {
override class var nibIndex: Int { return 1 }
}

The most convenient implementation. Here you need two methods, in order to return directly to the object of your class, not UIView.
viewId marked as a class, allowing override
Your .xib can contain more than one view of the top level, this situation is also
handled correctly.
extension UIView {
class var viewId: String {
return String(describing: self)
}
static func instance(from bundle: Bundle? = nil, nibName: String? = nil,
owner: Any? = nil, options: [AnyHashable : Any]? = nil) -> Self? {
return instancePrivate(from: bundle ?? Bundle.main,
nibName: nibName ?? viewId,
owner: owner,
options: options)
}
private static func instancePrivate<T: UIView>(from bundle: Bundle, nibName: String,
owner: Any?, options: [AnyHashable : Any]?) -> T? {
guard
let views = bundle.loadNibNamed(nibName, owner: owner, options: options),
let view = views.first(where: { $0 is T }) as? T else { return nil }
return view
}
}
Example:
guard let customView = CustomView.instance() else { return }
//Here customView has CustomView class type, not UIView.
print(customView is CustomView) // true

let bundle = Bundle(for: type(of: self))
let views = bundle.loadNibNamed("template", owner: self, options: nil)
self.view.addSubview(views?[0] as! UIView)

I prefer the below extension
extension UIView {
class var instanceFromNib: Self {
return Bundle(for: Self.self)
.loadNibNamed(String(describing: Self.self), owner: nil, options: nil)?.first as! Self
}
}
The difference between this and the top answered extension is you don't need to store it an constant or variable.
class TitleView: UIView { }
extension UIView {
class var instanceFromNib: Self {
return Bundle(for: Self.self)
.loadNibNamed(String(describing: Self.self), owner: nil, options: nil)?.first as! Self
}
}
self.navigationItem.titleView = TitleView.instanceFromNib

Robert Gummesson's Answer is perfect. But when we try to use it in SPM or framework it is not working.
I've modified like below to make it work.
internal class func fromNib<T: UIView>() -> T {
return Bundle.module.loadNibNamed(String(describing: T.self), owner: self, options: nil)![0] as! T
}

Related

How do I create an NSView from a nib in Swift [duplicate]

How to load NSView from Xib properly?
My code:
var topLevelArray: NSArray? = nil
let outputValue = AutoreleasingUnsafeMutablePointer<NSArray>(&topLevelArray)
if Bundle.main.loadNibNamed("RadioPlayerView", owner: nil, topLevelObjects: outputValue) {
let views = outputValue.pointee
return views.firstObject as! RadioPlayerView
}
topLevelArray = nil
return nil
The problem is "outputValue" is a auto-release pointer, and as soon as I return from the function, the program crash with ACCESS_BAD_ADDRESS
I made an protocol and extension to do this:
import Cocoa
protocol NibLoadable {
static var nibName: String? { get }
static func createFromNib(in bundle: Bundle) -> Self?
}
extension NibLoadable where Self: NSView {
static var nibName: String? {
return String(describing: Self.self)
}
static func createFromNib(in bundle: Bundle = Bundle.main) -> Self? {
guard let nibName = nibName else { return nil }
var topLevelArray: NSArray? = nil
bundle.loadNibNamed(NSNib.Name(nibName), owner: self, topLevelObjects: &topLevelArray)
guard let results = topLevelArray else { return nil }
let views = Array<Any>(results).filter { $0 is Self }
return views.last as? Self
}
}
Usage:
final class MyView: NSView, NibLoadable {
// ...
}
// create your xib called MyView.xib
// ... somewhere else:
let myView: MyView? = MyView.createFromNib()
I solved this problem with a slightly different approach. Code in Swift 5.
If you want to create NSView loaded from .xib to e.g. addSubview and constraints from code, here is example:
public static func instantiateView<View: NSView>(for type: View.Type = View.self) -> View {
let bundle = Bundle(for: type)
let nibName = String(describing: type)
guard bundle.path(forResource: nibName, ofType: "nib") != nil else {
return View(frame: .zero)
}
var topLevelArray: NSArray?
bundle.loadNibNamed(NSNib.Name(nibName), owner: nil, topLevelObjects: &topLevelArray)
guard let results = topLevelArray as? [Any],
let foundedView = results.last(where: {$0 is Self}),
let view = foundedView as? View else {
fatalError("NIB with name \"\(nibName)\" does not exist.")
}
return view
}
public func instantiateView() -> NSView {
guard subviews.isEmpty else {
return self
}
let loadedView = NSView.instantiateView(for: type(of: self))
loadedView.frame = frame
loadedView.autoresizingMask = autoresizingMask
loadedView.translatesAutoresizingMaskIntoConstraints = translatesAutoresizingMaskIntoConstraints
loadedView.addConstraints(constraints.compactMap { ctr -> NSLayoutConstraint? in
guard let srcFirstItem = ctr.firstItem as? NSView else {
return nil
}
let dstFirstItem = srcFirstItem == self ? loadedView : srcFirstItem
let srcSecondItem = ctr.secondItem as? NSView
let dstSecondItem = srcSecondItem == self ? loadedView : srcSecondItem
return NSLayoutConstraint(item: dstFirstItem,
attribute: ctr.firstAttribute,
relatedBy: ctr.relation,
toItem: dstSecondItem,
attribute: ctr.secondAttribute,
multiplier: ctr.multiplier,
constant: ctr.constant)
})
return loadedView
}
If there is no .xib file with the same name as the class name, then code will create class from code only. Very good solution (IMO) if someone wants to create the view from code and xib files in the same way, and keeps your code organized.
.xib file name and class name must have the same name:
In .xib file you should only have one view object, and this object has to have set class:
All you need to add in class code is instantiateView() in awakeAfter e.g.:
import Cocoa
internal class ExampleView: NSView {
internal override func awakeAfter(using coder: NSCoder) -> Any? {
return instantiateView() // You need to add this line to load view
}
internal override func awakeFromNib() {
super.awakeFromNib()
initialization()
}
}
extension ExampleView {
private func initialization() {
// Preapre view after view did load (all IBOutlets are connected)
}
}
To instantiate this view in e.g. ViewController you can create view like that:
let exampleView: ExampleView = .instantiateView() or
let exampleView: ExampleView = ExampleView.instantiateView()
but Swift have problems sometimes with instantiate like that:
let exampleView = ExampleView.instantiateView()
in viewDidLoad() in your controller you can add this view as subview:
internal override func viewDidLoad() {
super.viewDidLoad()
exampleView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(exampleView)
NSLayoutConstraint.activate(
[exampleView.topAnchor.constraint(equalTo: view.topAnchor),
exampleView.leftAnchor.constraint(equalTo: view.leftAnchor),
exampleView.rightAnchor.constraint(equalTo: view.rightAnchor),
exampleView.bottomAnchor.constraint(equalTo: view.bottomAnchor)]
)
}

UIPageViewController + firebase

I'm using UIPageViewController to make book pages and the pages are images that will be fetched from the firebase. the problem is I got this error
(Cannot convert value of type 'books' to expected element type 'Array.ArrayLiteralElement' (aka 'UIViewController')
'books' is a struct I made for firebase
import Foundation
import Firebase
struct books {
let bookId: String
let imageURL: String
}
extension booksC {
init(_ dictionary: [String: Any]) {
self.bookId = dictionary["bookId"] as? String ?? "no book id"
self.imageURL = dictionary["imageURL"] as? String ?? "no image url"
}
}
I'm using this code, what I understand is I can't use an array of images what I should use is an array of controllers and I don't know how to do that in this case. help is appreciated
import UIKit
import FirebaseFirestore
class PageViewController: UIPageViewController, UIPageViewControllerDataSource, UIPageViewControllerDelegate {
let pageViewController = UIPageViewController(transitionStyle: .pageCurl, navigationOrientation: .horizontal, options: nil)
private var pages = [books]()
private var listener: ListenerRegistration?
override func viewDidLoad() {
super.viewDidLoad()
dataSource = self
delegate = self
// index
guard let pagesFirst = pages.last else { return }
setViewControllers([pagesFirst], direction: .reverse, animated: true)
//TODO: add listener
}
func pageViewController(_ pageViewController: UIPageViewController, spineLocationFor orientation: UIInterfaceOrientation) -> UIPageViewController.SpineLocation {
var location = SpineLocation.max
if orientation == .landscapeLeft || orientation == .landscapeRight {
self.pageViewController.isDoubleSided = true
location = .mid
}
return location
}
func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
let index = self.pages.firstIndex(where: {$0 == viewController}) ?? 0
if index == 0 { return nil }
return pages[index - 1]
}
func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
let index = self.pages.firstIndex(where: {$0 == viewController}) ?? 0
if index == pages.count - 1 { return nil }
return pages[index + 1]
}
}
class ImageViewController: UIViewController {
let imageView = UIImageView()
init(image: UIImage) {
imageView.image = image
super.init(nibName: nil, bundle: nil)
}
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(imageView)
imageView.fillSuperview()
imageView.contentMode = .scaleAspectFit
imageView.clipsToBounds = true
imageView.backgroundColor = .white
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
public func setupImage(for book: books){
imageView.kf.setImage(with: URL(string: book.imageURL))
}
}
enter code hereyou are using your array private var pages = [books]() in setViewControllers which expect a UIViewController
This is how setViewControllers is declared:
func setViewControllers(_ viewControllers: [UIViewController]?,
direction: UIPageViewController.NavigationDirection,
animated: Bool,
completion: ((Bool) -> Void)? = nil)
Parameters
viewControllers
The view controller or view controllers to be displayed.
direction
The navigation direction.
animated
A Boolean value that indicates whether the transition is to be animated.
I think you should create an instance of ImageViewController then set the image using setupImage(for book: books) (which you can access since is a public method and finally assign that view controller your the page controller:
guard let pagesFirst = pages.last else { return }
let imageViewController = ImageViewController()
imageViewController.setupImage(for book: pagesFirst)
setViewControllers([imageViewController], direction: .reverse, animated: true)
EDITED:
Sorry, as far as the second error you get, it should be
imageViewController.setupImage(for:pagesFirst)
as for is the name available outside the class.
For the first error, what init options does it give you. It should be correct.
Try also to change your code declaring imageView this way :
var imageView : UIImageView = {
let imageView = UIImageView()
imageView.translatesAutoresizingMaskIntoConstraints = false // required if you need to work with autolayout
return imageView
}()
removing:
required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") }
lastly, you should name your struct book with a capital B.

How to declare a variable type depending on a ternary expression?

I have this enum :
enum WeatherMapDisplayType {
case temperature
case wind
}
Can I declare a variable like this ?
let markerView: mode == .temperature ? WeatherMapItemTemp : WeatherMapItemWind = UIView.fromNib()
Knowing that mode is of type WeatherMapDisplayType
How can I handle this scenario in an elegant way ?
EDIT:
I want to be able to do something like this :
let markerView: WeatherMapItem = UIView.fromNib()
markerView.frame = CGRect(x: 0, y: 0, width: 80, height: 30)
markerView.setupWeatherInformations(mode: self.currentDisplayMode, forecast: forecasts)
marker.iconView = markerView
Previously I only had WeatherMapItem type.
Then I have been asked to add an other weather map item, that is why I have the WeatherMapItemTemp and WeatherMapItemWind now (also corresponding to my enum display type).
func setupWeatherInformations(forecast: Forecast.HourlyForecast)
This is a method in my custom classes in order to configure the outlets.
But I don't have access to this method if I init my custom view from frame, because it's of UIView type.
Add a common protocol to these views:
protocol WeatherMapItem where Self: UIView {
func setupWeatherInformations()
}
class WeatherMapItemTemp: UIView, WeatherMapItem {
func setupWeatherInformations() {
// setup
}
}
class WeatherMapItemWind: UIView, WeatherMapItem {
func setupWeatherInformations() {
// setup
}
}
Add a computed variable to the enum:
enum WeatherMapDisplayType {
case temperature
case wind
var view: (UIView & WeatherMapItem)? {
var nibName: String? = nil
switch self {
case .temperature:
nibName = "WeatherMapItemTemp"
case .wind:
nibName = "WeatherMapItemWind"
}
if let nibName = nibName, let views = Bundle.main.loadNibNamed(nibName, owner: nil), views.count > 0 {
return views[0] as? UIView & WeatherMapItem
}
return nil
}
}
Now you can generate a view like so:
// assuming mode is the variable of type WeatherMapDisplayType
let view = mode.view
view?.setupWeatherInformations()
return view
Updated Answer
If you want to set data in that single ternary statement then declare one function in your custom view class.
Something like following
class WeatherMapItemTemp: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
public func setForecast(forecastData: Forecast) -> WeatherMapItemTemp {
let view = WeatherMapItemTemp.init(frame: CGRect.init(x: 0, y: 0, width: 100, height: 100))
//Set your appropriate value to your view objects
return view
}
}
Use this as following
let markerView = mode == .temperature ? (WeatherMapItemTemp().setForecast(forecastData: YOUR_FORECAST_OBJ)) : (WeatherMapItemWind().setForecast(forecastData: YOUR_FORECAST_OBJ))
Update 2
Yes you will need to load that from a nib
Update setForecast as following.
class func setForecast(forecastData: Forecast) -> WeatherMapItemTemp {
let view = UINib(nibName: "WeatherMapItemTemp", bundle: nil).instantiate(withOwner: nil, options: nil)[0] as! WeatherMapItemTemp
//Do your further stuff here
return view
}

Add (addsubview) custom/reusable view from XIB OS X App

Here is the code for my custom view. I also have a custom XIB file with the view mainView in it. I need to use this 3 times in a stackView in a view controller. How do I do that?
class PlatformView: NSView {
#IBOutlet weak var mainView: NSView!
#IBOutlet weak var currentPriceLabel: NSTextField!
//Here is the button
#IBAction func testButtonPressed(_ sender: Any) {
}
override func draw(_ dirtyRect: NSRect) {
super.draw(dirtyRect)
// Drawing code here.
}
required init?(coder decoder: NSCoder) {
super.init(coder: decoder)
NSNib(nibNamed: NSNib.Name(rawValue: "PlatformView"), bundle: nil)?.instantiate(withOwner: self, topLevelObjects: nil)
addSubview(mainView)
self.mainView.frame = self.bounds
}
}
Here is the code for my mainViewController
class ViewController: NSViewController {
#IBOutlet weak var platformStackView: NSStackView!
var platformView1:PlatformView!
var platformView2:PlatformView!
var platformView3:PlatformView!
override func viewDidLoad() {
super.viewDidLoad()
//This part is not working in a macOS app
if let tempView = Bundle.main.loadNibNamed(NSNib.Name(rawValue: "PlatformView"), owner: self, topLevelObjects: nil)?.first as? PlatformView {
self.platformView1 = tempView
self.platformView1.currentPriceLabel = "$1.35"
self.platformStackView.addArrangedSubview(self.platformView1)
self.platformStackView.addSubview()
self.platformStackView.addView(tempView, in: self)
//Which one of these three methods should I use?
}
}
}
I have buttons in the Platform View which I would like to connect via IBAction outlets. How would I handle those?
I also added three ways to add a view to stack view. Which one is best to use?
It also says that .loadNibNamed will return a Bool not a instance of a view. How do I load the view multiple times in this View controller? I obviously also need to make changes through the life of the VC so I need to keep the instance of that view.
First you should use:
self.platformStackView.addArrangedSubview(self.platformView1)
because this will add self.platformView1 as both a sub view (as per addSubView) and add it to the list of views the stack view arranges.
Second the XIB file can contain multiple top level objects so can't expect it to return a single object. The Bool return indicates if the XIB file as a whole was successfully loaded and the contents of the top level objects will be put in the topLevelObjects parameter which is an array.
So you do something like this:
var topLevelObjects: NSArray?
if Bundle.main.loadNibNamed(NSNib.Name(rawValue: "TestView"), owner: self, topLevelObjects: &topLevelObjects) {
// Use the objects as you need including searching for a specific one you may require.
}
As an alternative you can also do this:
if let nib = NSNib(nibNamed: NSNib.Name(rawValue: "TestView"), bundle: nil) {
if nib.instantiate(withOwner: self, topLevelObjects: &temp) {
// Use the objects as you need including searching for a specific one you may require.
}
}
When used this is the result:
Here is a worked example of loading a custom class from a XIB file and adding it to the current view controllers view three times. The button action will load the XIB file instantiate three copies of it and add the TestView class it finds to the view controllers main view (at 0, 110 & 220):
#IBAction func buttonAction(_ sender: Any) {
var objectArray: NSArray?
if let nib = NSNib(nibNamed: NSNib.Name(rawValue: "TestView"), bundle: nil) {
if nib.instantiate(withOwner: self, topLevelObjects: &objectArray),
let topLevelObjects = objectArray {
for object in topLevelObjects {
if let testView = object as? TestView {
self.view.addSubview(testView)
testView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
testView.testLabel.stringValue = "Test Label 1"
}
}
}
if nib.instantiate(withOwner: self, topLevelObjects: &objectArray),
let topLevelObjects = objectArray {
for object in topLevelObjects {
if let testView = object as? TestView {
self.view.addSubview(testView)
testView.frame = CGRect(x: 110, y: 0, width: 100, height: 100)
testView.testLabel.stringValue = "Test Label 2"
}
}
}
if nib.instantiate(withOwner: self, topLevelObjects: &objectArray),
let topLevelObjects = objectArray {
for object in topLevelObjects {
if let testView = object as? TestView {
self.view.addSubview(testView)
testView.frame = CGRect(x: 220, y: 0, width: 100, height: 100)
testView.testLabel.stringValue = "Test Label 3"
}
}
}
}
}
The TestView code looks like this:
class TestView: NSView {
#IBOutlet var testLabel: NSTextField!
required init?(coder decoder: NSCoder) {
super.init(coder: decoder)
}
override func awakeFromNib() {
super.awakeFromNib()
self.testLabel.stringValue = "Init"
}
override func draw(_ dirtyRect: NSRect) {
super.draw(dirtyRect)
// Drawing code here.
}
}
Nothing too complex with that custom view. It has a single NSTextField which is all setup correctly and so can just have it's string value set.
That all works for me so should be the way to go (this is the first MacOS app I have actually done as I am normally an iOS guy).

How to load NSView from Xib with Swift 3

How to load NSView from Xib properly?
My code:
var topLevelArray: NSArray? = nil
let outputValue = AutoreleasingUnsafeMutablePointer<NSArray>(&topLevelArray)
if Bundle.main.loadNibNamed("RadioPlayerView", owner: nil, topLevelObjects: outputValue) {
let views = outputValue.pointee
return views.firstObject as! RadioPlayerView
}
topLevelArray = nil
return nil
The problem is "outputValue" is a auto-release pointer, and as soon as I return from the function, the program crash with ACCESS_BAD_ADDRESS
I made an protocol and extension to do this:
import Cocoa
protocol NibLoadable {
static var nibName: String? { get }
static func createFromNib(in bundle: Bundle) -> Self?
}
extension NibLoadable where Self: NSView {
static var nibName: String? {
return String(describing: Self.self)
}
static func createFromNib(in bundle: Bundle = Bundle.main) -> Self? {
guard let nibName = nibName else { return nil }
var topLevelArray: NSArray? = nil
bundle.loadNibNamed(NSNib.Name(nibName), owner: self, topLevelObjects: &topLevelArray)
guard let results = topLevelArray else { return nil }
let views = Array<Any>(results).filter { $0 is Self }
return views.last as? Self
}
}
Usage:
final class MyView: NSView, NibLoadable {
// ...
}
// create your xib called MyView.xib
// ... somewhere else:
let myView: MyView? = MyView.createFromNib()
I solved this problem with a slightly different approach. Code in Swift 5.
If you want to create NSView loaded from .xib to e.g. addSubview and constraints from code, here is example:
public static func instantiateView<View: NSView>(for type: View.Type = View.self) -> View {
let bundle = Bundle(for: type)
let nibName = String(describing: type)
guard bundle.path(forResource: nibName, ofType: "nib") != nil else {
return View(frame: .zero)
}
var topLevelArray: NSArray?
bundle.loadNibNamed(NSNib.Name(nibName), owner: nil, topLevelObjects: &topLevelArray)
guard let results = topLevelArray as? [Any],
let foundedView = results.last(where: {$0 is Self}),
let view = foundedView as? View else {
fatalError("NIB with name \"\(nibName)\" does not exist.")
}
return view
}
public func instantiateView() -> NSView {
guard subviews.isEmpty else {
return self
}
let loadedView = NSView.instantiateView(for: type(of: self))
loadedView.frame = frame
loadedView.autoresizingMask = autoresizingMask
loadedView.translatesAutoresizingMaskIntoConstraints = translatesAutoresizingMaskIntoConstraints
loadedView.addConstraints(constraints.compactMap { ctr -> NSLayoutConstraint? in
guard let srcFirstItem = ctr.firstItem as? NSView else {
return nil
}
let dstFirstItem = srcFirstItem == self ? loadedView : srcFirstItem
let srcSecondItem = ctr.secondItem as? NSView
let dstSecondItem = srcSecondItem == self ? loadedView : srcSecondItem
return NSLayoutConstraint(item: dstFirstItem,
attribute: ctr.firstAttribute,
relatedBy: ctr.relation,
toItem: dstSecondItem,
attribute: ctr.secondAttribute,
multiplier: ctr.multiplier,
constant: ctr.constant)
})
return loadedView
}
If there is no .xib file with the same name as the class name, then code will create class from code only. Very good solution (IMO) if someone wants to create the view from code and xib files in the same way, and keeps your code organized.
.xib file name and class name must have the same name:
In .xib file you should only have one view object, and this object has to have set class:
All you need to add in class code is instantiateView() in awakeAfter e.g.:
import Cocoa
internal class ExampleView: NSView {
internal override func awakeAfter(using coder: NSCoder) -> Any? {
return instantiateView() // You need to add this line to load view
}
internal override func awakeFromNib() {
super.awakeFromNib()
initialization()
}
}
extension ExampleView {
private func initialization() {
// Preapre view after view did load (all IBOutlets are connected)
}
}
To instantiate this view in e.g. ViewController you can create view like that:
let exampleView: ExampleView = .instantiateView() or
let exampleView: ExampleView = ExampleView.instantiateView()
but Swift have problems sometimes with instantiate like that:
let exampleView = ExampleView.instantiateView()
in viewDidLoad() in your controller you can add this view as subview:
internal override func viewDidLoad() {
super.viewDidLoad()
exampleView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(exampleView)
NSLayoutConstraint.activate(
[exampleView.topAnchor.constraint(equalTo: view.topAnchor),
exampleView.leftAnchor.constraint(equalTo: view.leftAnchor),
exampleView.rightAnchor.constraint(equalTo: view.rightAnchor),
exampleView.bottomAnchor.constraint(equalTo: view.bottomAnchor)]
)
}