Custom View by use of xib in swift

Custom View by use of xib in swift

We can create the custom and common view by the use xib in swift 3.1 and xcode 8.3.2 . Custom views are common and its very good technique for create the effective User interface. There are two ways to custom layout views: building it in interface builder or by coding. But interface builder way is more comfortable. If you layout a view in the interface builder, then it is save your time. There we are using the ‘@IBDesignable’ also by which we rander the view directly in storyboard and XIB ViewControllers .

Following these are simple steps for creating the custom view
1: First create the single view application project.
2: Create the .xib file (like CustomUIView.xib)
3: Design your customView user interface in interface xcode (use the Auto Layout constraints).
4: Create a custom file UIView extended file (like CustomUIView.swift).
5: Set .xib File owner to custom class (It must be same as class name ).
6: Implement both CustomView initializers: init(coder:) and init(frame:).
7: Load the UIView from the .xib file using the NSBundle and UINib classes.
8: Now use your custom UIView.

Now we explain the all the above steps for creating the custom UIView : –

1: First create the single view application project.

first open your xcode and create the new single view Application project with name (example: AGCustomViewBy_XIB)



2: Create the .xib file (like CustomUIView.xib)

Now you want to create the new user interface like .xib file. Right click of your project folder and select the “New File…”, Now xcode open the a view for which type of file you want to create. Chose the View under the user interface menu like


3: Design your customView user interface in interface xcode (use the Auto Layout constraints).

Now go to your CustomUIView.xib file for create the user interface for our custom view. First you go right side menu in .xib file and select the Show the attribute inspector and change the size inferred to Freeform.

 

 

Now you start to create the user interface for our custom view , you go to right bottom corner in .xib file and select the “show the object library” menu and search the label and ImageView after that you drag and drop these things on .xib View and set the auto layout constraints. An please change the background color of view for increase the visiblity of view.



 

4: Create a custom file UIView extended file (like CustomUIView.swift)

Create the custom file UIView Same as .xib file but you want to select the option in source “Cocoa Touch Class” and create the new file with name CustomUIView.swift which have UIView subclass.

 

 



 

5: Set .xib File owner to custom class (It must be same as class name )

We are near to our destination, For connect the .swift and .xib file we want to set owner of .xib file to CustomUIView.swift and connect the IBOutlet of our view


 



 

6: Implement both CustomView initializers: init(coder:) and init(frame:)

Please add these methods to your customView class these are overrided methods of UIView init(coder: ) and init(fram:)

 

override func draw(_ rect: CGRect) {

        // Drawing code

    }    

    override init(frame: CGRect) {

        // Call super init

        super.init(frame: frame)

        // 3. Setup view from .xib file

        configureXIB()

    }

    required init?(coder aDecoder: NSCoder) {

        // 1. setup any properties here

        // 2. call super.init(coder:)

        super.init(coder: aDecoder)

        // 3. Setup view from .xib file

        configureXIB()

    }

 

7: Load the UIView from the .xib file using the NSBundle and UINib classes.

Its an last step for this custom view creation. We want to register the .xib nib file name into our customView class, For this we implement this methods in class and for creating the flexible custom view we set the .autoresizingMask property for this view.

 

func configureXIB() {

       customView = configureNib()

        // use bounds not frame or it’ll be offset

       customView.frame = bounds

        // Make the flexible view

       customView.autoresizingMask = [UIViewAutoresizing.flexibleWidth, UIViewAutoresizing.flexibleHeight]

        // Adding custom subview on top of our view (over any custom drawing > see note below)

        addSubview(customView)

    }

    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

    }

 

8: Now use your custom UIView

We’re done! Now we’ve got a custom view made from a xib file that we can use throughout our project. Lets see how it look’s .

 

 

If you want to show the reflection of this custom view in your storyBoard then please use the
@IBDesignable in your class like



For getting the complete project Download here.

Related Post

Control Flow Statements | Swift tutorial Control Flow : Swift tutorial Swift Provides diffrent type of controll flow statements like: Loops Statements : Loops are used for perform the t...
How to use Flutter most usable Widgets | Flutter t... We need some basic widgets for creating our first flutter app. Widgets describe what their view should look like given their current configuration and...
Use of CollectionViewDataSource method moveItemAt ... Use of CollectionViewDataSource method moveItemAt for Reordering CollectionView cell In IOS (Swift 4) In this tutorial we are study about how we can ...
Introduction to JVM Introduction to JVM JVM stands for Java Virtual Machine. It works as an engine that derives the Java Code. The JVM does not understand Java ty...
C Language – Introduction Why C? There are three important aspects of any language so as C has : The way it stores data, The way it operates on this data and How th...
New Tools for 64-bit Support in Xcode 9.3   New Tools for 64-bit Support in Xcode 9.3 The last macOS release to support 32-bit apps without compromise is macOS High Sierra. Make sure fu...

Leave a Reply

Your email address will not be published. Required fields are marked *

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.