Essential Books

Using IBInspectable and IBDesignable

suggest change

One (or two) of the coolest new features in recent Xcode releases are the IBInspectable properties and IBDesignable UIViews. These have nothing to do with the functionality of your application but instead impact the developer experience in Xcode. The goal is to be able to visually inspect custom views in your iOS application without running it. So assume that you have a custom view creatively named CustomView that inherits from UIView. In this custom view, it will display a string of text with a designated color. You can also choose not to display any text. We’ll need three properties: 

var textColor: UIColor = UIColor.blackColor()
var text: String?
var showText: Bool = true

We can then override the drawRect function in the class: 

if showText {
    if let text = text {
        let s = NSString(string: text)
        s.drawInRect(rect,
            withAttributes: [
                NSForegroundColorAttributeName: textColor,
                NSFontAttributeName: UIFont(name: "Helvetica Neue", size: 18)!
            ])
    }
}

Assuming that the text property is set, this will draw a string in the upper left hand corner of the view when the application is run. The problem is we won’t know what it looks like without running the application. This is where IBInspectable and IBDesignable come in. IBInspectable allows us to visually set property values of the view in Xcode, just like with the built in controls. IBDesignable will show us a visual preview in the storyboard. Here is how the class should look: 

@IBDesignable
class CustomView: UIView {
    @IBInspectable var textColor: UIColor = UIColor.blackColor()
    @IBInspectable var text: String?
    @IBInspectable var showText: Bool = true

    override func drawRect(rect: CGRect) {
        // ...
    }
}

Or in Objective C: 

IB_DESIGNABLE
@interface CustomView: UIView

@property (nonatomic, strong) IBInspectable UIColor* textColor;
@property (nonatomic, strong) IBInspectable NSString* text;
@property (nonatomic, assign) IBInspectable BOOL showText;

@end

@implementation CustomView

- (instancetype)init {
    if(self = [super init]) {
        self.textColor = [UIColor blackColor];
        self.showText = YES;
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    //...
}

@end

The next screenshots show what happens in Xcode. The first one is what happens after adding the revised class. Notice that there are three new UI elements for the three properties. The Text Color will display a color picker, Text is just an input box and Show Text will give us the options for Off and On which are false and true respectively.

The next is after changing the Text Color to red using the color picker. Also, some text has been provided to make the drawRect function display it. Notice that the view in Interface Builder has been updated as well.

Finally, setting Show Text to Off in the property inspector makes the text display in Interface Builder disappear.

However, We all come up situation when we need to create rounded UIView at multiple views in your Storyboard.Instead of declaring IBDesignable to every views of Storyboard, its better to create an Extension of UIView and get a user interface built just for your every UIView through out the project to create rounded view by setting corner radius.A configurable border radius on any UIView you create in storyboard. 

extension UIView {
    
    @IBInspectable var cornerRadius:CGFloat {
        set {
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            return layer.cornerRadius
        }
    }
    
}
Found a mistake? Have a question or improvement idea? Let me know.

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:

UIView:
* UIView
* Make the view rounded
* Using IBInspectable and IBDesignable
* Taking a snapshot
* Create a UIView
* Shake a View
* Utilizing Intrinsic Content Size
* Programmatically manage UIView insertion and deletion into and from another UIView
* Animating a UIView
* UIView extension for size and frame attributes
* Create UIView using Autolayout
Table Of Contents
0 Getting started with iOS
1 UILabel
2 Change Status Bar Color
3 Passing Data between View Controllers
4 Managing the Keyboard
5 UIButton
6 UILocalNotification
7 UIImageView
8 Checking for Network Connectivity
9 Accessibility
10 UITableView
11 Auto Layout
12 UIView
13 UIAlertController
14 MKMapView
15 UIColor
16 NSAttributedString
17 CAAnimation
18 UITextView
19 UINavigationController
20 Concurrency
21 CAGradientLayer
22 UIGestureRecognizer
23 Custom UIViews from XIB files
24 Safari Services
25 UIStackView
26 UIImage
27 UIWebView
28 CALayer
29 Swift and Objective-C interoperability
30 NSDate
31 Custom Fonts
32 AVSpeechSynthesizer
33 UIBarButtonItem
34 UIScrollView
35 Localization
36 NSNotificationCenter
37 UITextField
38 Networking with Alamofire
39 UIViewController
40 iBeacon
41 CLLocation
42 NSURLSession
43 UISwitch
44 Checking iOS version
45 Universal Links
46 UICollectionView
47 PDF Creation
48 In-App Purchase
49 NSTimer
50 CGContext
51 UITabBarController
52 UISearchController
53 UIActivityViewController
54 Core Location
55 FacebookSDK
56 AFNetworking
57 CTCallCenter
58 UIImagePickerController
59 NSUserDefaults
60 UIControl - Event Handling with Blocks
61 UIBezierPath
62 UIPageViewController
63 UIAppearance
64 Push Notifications
65 Key Value Coding
66 Initialization idioms
67 Storyboard
68 Background Modes and Events
69 Fastlane
70 CAShapeLayer
71 WKWebView
72 UUID Universally Unique Identifier
73 Categories
74 Handling URL Schemes
75 Realm database
76 ARC Automatic Reference Counting
77 UIPickerView
78 Dynamic Type
79 NSURL
80 SWRevealViewController
81 Snapshot of UIView
82 DispatchGroup
83 GCD Grand Central Dispatch
84 Size Classes and Adaptivity
85 UIScrollView, AutoLayout
86 IBOutlets
87 AWS SDK
88 Debugging Crashes
89 UISplitViewController
90 UISplitViewController
91 UIDevice
92 CloudKit
93 GameplayKit
94 XCode Build Archive From Command Line
95 Unit Testing with XCTest
96 NSData
97 AVPlayer and AVPlayerViewController
98 Deep Linking
99 App Transport Security (ATS)
100 Core Graphics
101 Segues
102 UIDatePicker
103 NSPredicate
104 EventKit
105 NSBundle
106 SiriKit
107 Contacts Framework
108 Dynamically updating a UIStackView
109 Speech Recognition
110 NSURLConnection
111 StoreKit
112 Code signing
113 .ipa file to upload on appstore with ApplicationLoader
114 Resizing UIImage
115 Size Classes and Adaptivity
116 MKDistanceFormatter
117 3D Touch
118 GameCenter Leaderboards
119 Keychain
120 Handle Multiple Environment using Macro
121 Set View Background
122 Block
123 Content Hugging
124 Google Places API
125 Navigation Bar
126 UITextField Delegate
127 App-wide operations
128 UILabel text underlining
129 Cut a UIImage into a circle
130 Make selective UIView corners rounded
131 Convert HTML to NSAttributed string and vice versa
132 Convert NSAttributedString to UIImage
133 CoreImage Filters
134 Face Detection Using CoreImageOpenCV
135 MPMediaPickerDelegate
136 Graph Coreplot
137 NSHTTPCookieStorage
138 FCM Messaging
139 Create Custom Framework
140 Custom Keyboard
141 AirDrop
142 SLComposeViewController
143 AirPrint tutorial
144 UISlider
145 Carthage
146 HealthKit
147 Core SpotLight
148 UI Testing
149 Core Motion
150 QR Code Scanner
151 plist
152 NSInvocation
153 UIRefreshControl TableView
154 WCSessionDelegate
155 AppDelegate
156 App Submission Process
157 MVVM
158 UIStoryboard
159 Basic text file I/O
160 Text To Speech (TTS)
161 MPVolumeView
162 Objective-C Associated Objects
163 Passing Data between View Controllers
164 UIPhoenix
165 Blocks in Queue with MKBlockQueue
166 Simulator
167 BackgroundModes
168 NSArray
169 OpenGL
170 UIScrollView with StackView child
171 Cache online images
172 MVP Architecture
173 UIKit Dynamics
174 Configure Beacons with CoreBluetooth
175 Core Data
176 Extension for rich Push Notification
177 Profiling with Instruments
178 Application rating review request
179 MyLayout
180 UIFont
181 Simulator Builds
182 Simulating Location Using GPX files
183 Custom methods of selection of UITableViewCells
184 Custom methods of selection of UITableViewCells
185 UISegmentedControl
186 SqlCipher integration
187 Custom UITextField
188 Custom UITextField
189 Security
190 Guideline to architecture patterns
191 UIFeedbackGenerator
192 UIKit Dynamics with UICollectionView
193 Multicast Delegates
194 Using image assets
195 UITableViewCell
196 Runtime in Objective-C
197 ModelPresentationStyles
198 CydiaSubstrate tweak
199 Create a video from images
200 Codable
201 FileHandle
202 NSUserActivity
203 Rich Notifications
204 Load images async
205 Adding Swift bridging header
206 Creating an App ID
207 Changing the rootview controller
208 Attributed text in UILabel
209 UITableViewController
210 Contributors