{"id":5528,"date":"2017-09-29T23:37:49","date_gmt":"2017-09-29T23:37:49","guid":{"rendered":"https:\/\/blog-stg.cheesecakelabs.com\/?p=5528\/"},"modified":"2022-07-01T18:26:23","modified_gmt":"2022-07-01T18:26:23","slug":"building-custom-ui-controls-xcodes-interface-builder","status":"publish","type":"post","link":"https:\/\/blog-stg.cheesecakelabs.com\/br\/building-custom-ui-controls-xcodes-interface-builder\/","title":{"rendered":"How custom UI controls in Xcode\u2019s Interface Builder boosted my UI development"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">To use or not to use Xcode&#8217;s Interface Builder (let&#8217;s call it IB) is a very common discussion between iOS developers. There are many arguments against using it like version control issues and difficulties in debugging. This <\/span><a href=\"https:\/\/blog-stg.cheesecakelabs.com\/br\/blog\/interface-builder-pros-cons-thoughts\/\"><span style=\"font-weight: 400;\">post<\/span><\/a><span style=\"font-weight: 400;\"> in our blog have some considerations about it for example. But I believe that if the project is well structured and the team knows how to use it, these issues can be avoided and IB can become a very powerful tool.<\/span><\/p>\n<p><!--more--><\/p>\n<p><span style=\"font-weight: 400;\">Also, IB is being improved each new Xcode version and some of these problems are (slowly) being solved. For example, in the last release (Xcode 9) you can refactor your IBOutlets without &nbsp;having to change things in IB.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">IB is full of tools that help us to improve UI development. For example, since Xcode 4.1 it is easy to set auto layout constraints with a few clicks and draggings, with immediate visual feedback, without the need to run the app to see the results. You can even change this preview to test how UI could be in different screen sizes and orientations.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For me, this resource by itself would already be a good reason to use IB, but of course it can do much more. In this article I&#8217;m going to focus on building custom controls with immediate visual feedback using a resource introduced in Xcode 6 called Live Rendering.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Reviewing some basic IB concepts<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">First of all let&#8217;s get in the same page with a small review of some IB concepts.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\">\n<h3><span style=\"font-weight: 400;\">.xib files:<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">A .xib file is an XML file that is compiled into a .nib file which is copied to the app&#8217;s bundle and loaded in runtime to provide UI components (UIView\/UIViewController subclasses).<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\">\n<h3><span style=\"font-weight: 400;\">.storyboard files:<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">A .storyboard file is similar to .xib files but it holds a set of UIViewControllers with the possibility of creating relationships between them with segues.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\">\n<h3><span style=\"font-weight: 400;\">@IBOutlet<\/span><\/h3>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">An IBOutlet is a keyword used to create a reference to an IB object inside your code. These references can be used just like other objects created programmatically.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">@IBOutlet weak var loginButton: UIButton!<\/span><\/pre>\n<h2><span style=\"font-weight: 400;\">Creating custom controls<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Let&#8217;s imagine that your app will contain some repeating components like a rounded button with different corner radius and different borders. Something like the image below:<\/span><\/p>\n<p><img decoding=\"async\" class=\" wp-image-5559 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-09-29-at-19.39.34.png\" alt=\"\" width=\"218\" height=\"262\"><\/p>\n<p><span style=\"font-weight: 400;\">It&#8217;s a good practice to create a custom control and use it everywhere to avoid code repetition. To achieve that using the IB is not trivial as doing by code, but it&#8217;s also not a monster. Let&#8217;s check it!<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> The first step is to create a UIButton subview and reference the new control in IB. The class would look something like the following.<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import UIKit<\/span>\n<span style=\"font-weight: 400;\">class AmazingButton: UIButton {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;var cornerRadius: CGFloat = 2.0 {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;didSet {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;layer.cornerRadius = cornerRadius<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;layer.masksToBounds = cornerRadius &gt; 0<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;}<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">You can use it programmatically of course. But let&#8217;s use it with IB. To do that make sure the selected class in IB object is correct:<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-5560 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-09-29-at-19.39.49.png\" alt=\"\" width=\"369\" height=\"229\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-09-29-at-19.39.49.png 912w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-09-29-at-19.39.49-768x477.png 768w\" sizes=\"(max-width: 369px) 100vw, 369px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">To customize the button it would be necessary a reference to the button with an IBOutlet in the UIViewController and then you set the properties in viewDidLoad(). To see the results you just need to run the app.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But running the app may be a slow operation and can become a pain if you only want to see the results of a simple view radius change. And while developing an app we do it a lot.<\/span><\/p>\n<p><em>Here the Live Rendering makes its magic!<\/em><\/p>\n<p><span style=\"font-weight: 400;\">To make this property available in IB is very easy. Add @IBDesignable before the class keyword and the @IBInspectable before the properties that you want to make available in IB. The result in the IB is the following:<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-5561 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-09-29-at-19.40.01.png\" alt=\"\" width=\"381\" height=\"206\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-09-29-at-19.40.01.png 890w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-09-29-at-19.40.01-768x416.png 768w\" sizes=\"(max-width: 381px) 100vw, 381px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The properties are now available in the Attributes Inspector of the object and if you change them the results can be seen instantly in the IB. This way you can make adjustments and see the results without having to run the app.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This <\/span><a href=\"https:\/\/stackoverflow.com\/a\/30614633\/2895235\"><span style=\"font-weight: 400;\">discussion<\/span><\/a><span style=\"font-weight: 400;\"> in StackOverflow lists the types you can expose to IB. <\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Creating more complex controls using .xib files<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Ok, that was easy. But what if you need a more complex kind of custom control? To achieve that you can use a .xib file to create a component made of other components. Let&#8217;s create a new one called AwesomeView. This new view contains two AmazingButtons objects arranged in the parent view using Auto Layout with some basic constraints.<\/span><\/p>\n<p><img decoding=\"async\" class=\" wp-image-5562 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-09-29-at-19.40.14.png\" alt=\"\" width=\"411\" height=\"226\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-09-29-at-19.40.14.png 866w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-09-29-at-19.40.14-768x422.png 768w\" sizes=\"(max-width: 411px) 100vw, 411px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Now, let&#8217;s create the class that owns this .xib. Let&#8217;s call it AwesomeView. This class will have a view that will be a container which will hold the loaded view from the nib file. We can also create IBOutlets for the buttons and other IBInspectable to allow customization directly in IB.<\/span><\/p>\n<p>&nbsp;<\/p>\n<pre><span style=\"font-weight: 400;\">import UIKit<\/span>\n<span style=\"font-weight: 400;\">@IBDesignable class AwesomeView: UIView {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;@IBOutlet var containerView: UIView!<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;@IBOutlet weak var button1: UIButton!<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;@IBOutlet weak var button2: UIButton!<\/span>\n<span style=\"font-weight: 400;\">\n &nbsp;&nbsp;&nbsp;override init(frame: CGRect) {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;super.init(frame: frame)<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initNib()<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;}<\/span>\n\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;required init?(coder aDecoder: NSCoder) {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;super.init(coder: aDecoder)<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initNib()<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;}<\/span>\n\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;func initNib() {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let bundle = Bundle(for: AwesomeView.self)<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bundle.loadNibNamed(\"AwesomeView\", owner: self, options: nil)<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;addSubview(containerView)<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;containerView.frame = bounds<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;containerView.autoresizingMask = [.flexibleHeight, .flexibleWidth]<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;}<\/span>\n\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;@IBInspectable var button1Title: String = \"\" {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;didSet {<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button1.setTitle(button1Title, for: .normal)<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<\/span>\n<span style=\"font-weight: 400;\"> &nbsp;&nbsp;&nbsp;}<\/span>\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Now let&#8217;s link the .xib with the class. The trick is to select the File&#8217;s owner object in the IB and set the created class for it. So when the class AwesomeView loads this xib it also makes the class the owner of the objects inside the .xib.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-5563 alignleft\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-09-29-at-19.40.32.png\" alt=\"\" width=\"342\" height=\"153\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-09-29-at-19.40.32.png 1004w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-09-29-at-19.40.32-768x344.png 768w\" sizes=\"(max-width: 342px) 100vw, 342px\" \/><img decoding=\"async\" class=\"wp-image-5564 alignleft\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-09-29-at-19.40.41.png\" alt=\"\" width=\"274\" height=\"154\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-09-29-at-19.40.41.png 844w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/Screen-Shot-2017-09-29-at-19.40.41-768x431.png 768w\" sizes=\"(max-width: 274px) 100vw, 274px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Now you can use the custom control directly in your storyboards or even create it programmatically. To load it in IB you just need to add a view and set the class in the Identity Inspector.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This looks a little confusing, I know. But once you get things working it will be easy to use the custom controls anywhere. To see things working you can check an example project in this <\/span><a href=\"https:\/\/github.com\/ricardo0100\/IBComponents\"><span style=\"font-weight: 400;\">link<\/span><\/a><span style=\"font-weight: 400;\">. The project requires Xcode 9.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Conclusion<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Interface Builder can be a little tricky sometimes, I agree. It has a complexity that looks like a pain to understand. But on the other hand, if you know it&#8217;s superpowers and adopt some rules to keep things organized it can help a lot to increase the team productivity. It is also part of Xcode stack since version 4 so it is being constantly improved with new tools and has Apple support, so it will never get deprecated or discontinued.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Of course there is a learning curve to make the best use of it. But as developers I believe we need to learn our tools just the way we know our code.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To use or not to use Xcode&#8217;s Interface Builder (let&#8217;s call it IB) is a very common discussion between iOS developers. There are many arguments against using it like version control issues and difficulties in debugging. This post in our blog have some considerations about it for example. But I believe that if the project [&hellip;]<\/p>\n","protected":false},"author":65,"featured_media":5571,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[471],"tags":[],"class_list":["post-5528","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engenharia"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How custom UI controls in Xcode\u2019s Interface Builder boosted my UI development | Cheesecake Labs<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How custom UI controls in Xcode\u2019s Interface Builder boosted my UI development | Cheesecake Labs\" \/>\n<meta property=\"og:description\" content=\"To use or not to use Xcode&#8217;s Interface Builder (let&#8217;s call it IB) is a very common discussion between iOS developers. There are many arguments against using it like version control issues and difficulties in debugging. This post in our blog have some considerations about it for example. But I believe that if the project [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog-stg.cheesecakelabs.com\/br\/building-custom-ui-controls-xcodes-interface-builder\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-29T23:37:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-01T18:26:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/interfacebuilder_banner2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/building-custom-ui-controls-xcodes-interface-builder\/\",\"url\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/building-custom-ui-controls-xcodes-interface-builder\/\",\"name\":\"How custom UI controls in Xcode\u2019s Interface Builder boosted my UI development | Cheesecake Labs\",\"isPartOf\":{\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/#website\"},\"datePublished\":\"2017-09-29T23:37:49+00:00\",\"dateModified\":\"2022-07-01T18:26:23+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Ricardo Gehrke Filho\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/building-custom-ui-controls-xcodes-interface-builder\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog-stg.cheesecakelabs.com\/br\/building-custom-ui-controls-xcodes-interface-builder\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/building-custom-ui-controls-xcodes-interface-builder\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How custom UI controls in Xcode\u2019s Interface Builder boosted my UI development\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/#website\",\"url\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Empresa de desenvolvimento e design de aplicativos mobile &amp; web que est\u00e1 reinventando o desenvolvimento de produtos com times remotos. N\u00f3s desenvolvemos aplicativos iOS, Android e aplica\u00e7\u00f5es Web com as melhores empresas dos EUA, do Brasil e do mundo.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"name\":\"Ricardo Gehrke Filho\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/ricardo-300x300.jpg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/ricardo-300x300.jpg\",\"caption\":\"Ricardo Gehrke Filho\"},\"description\":\"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.\",\"url\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/\/autor\/ricardo-gehrke-filho\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How custom UI controls in Xcode\u2019s Interface Builder boosted my UI development | Cheesecake Labs","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"pt_BR","og_type":"article","og_title":"How custom UI controls in Xcode\u2019s Interface Builder boosted my UI development | Cheesecake Labs","og_description":"To use or not to use Xcode&#8217;s Interface Builder (let&#8217;s call it IB) is a very common discussion between iOS developers. There are many arguments against using it like version control issues and difficulties in debugging. This post in our blog have some considerations about it for example. But I believe that if the project [&hellip;]","og_url":"https:\/\/blog-stg.cheesecakelabs.com\/br\/building-custom-ui-controls-xcodes-interface-builder\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2017-09-29T23:37:49+00:00","article_modified_time":"2022-07-01T18:26:23+00:00","og_image":[{"width":2000,"height":720,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/interfacebuilder_banner2.png","type":"image\/png"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Escrito por":null,"Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/building-custom-ui-controls-xcodes-interface-builder\/","url":"https:\/\/blog-stg.cheesecakelabs.com\/br\/building-custom-ui-controls-xcodes-interface-builder\/","name":"How custom UI controls in Xcode\u2019s Interface Builder boosted my UI development | Cheesecake Labs","isPartOf":{"@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/#website"},"datePublished":"2017-09-29T23:37:49+00:00","dateModified":"2022-07-01T18:26:23+00:00","author":{"@type":"person","name":"Ricardo Gehrke Filho"},"breadcrumb":{"@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/building-custom-ui-controls-xcodes-interface-builder\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog-stg.cheesecakelabs.com\/br\/building-custom-ui-controls-xcodes-interface-builder\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/building-custom-ui-controls-xcodes-interface-builder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog-stg.cheesecakelabs.com\/br\/"},{"@type":"ListItem","position":2,"name":"How custom UI controls in Xcode\u2019s Interface Builder boosted my UI development"}]},{"@type":"WebSite","@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/#website","url":"https:\/\/blog-stg.cheesecakelabs.com\/br\/","name":"Cheesecake Labs","description":"Empresa de desenvolvimento e design de aplicativos mobile &amp; web que est\u00e1 reinventando o desenvolvimento de produtos com times remotos. N\u00f3s desenvolvemos aplicativos iOS, Android e aplica\u00e7\u00f5es Web com as melhores empresas dos EUA, do Brasil e do mundo.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog-stg.cheesecakelabs.com\/br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Person","name":"Ricardo Gehrke Filho","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/#\/schema\/person\/image\/","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/ricardo-300x300.jpg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/09\/ricardo-300x300.jpg","caption":"Ricardo Gehrke Filho"},"description":"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.","url":"https:\/\/blog-stg.cheesecakelabs.com\/br\/\/autor\/ricardo-gehrke-filho\/"}]}},"_links":{"self":[{"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/posts\/5528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/comments?post=5528"}],"version-history":[{"count":1,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/posts\/5528\/revisions"}],"predecessor-version":[{"id":10468,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/posts\/5528\/revisions\/10468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/media\/5571"}],"wp:attachment":[{"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/media?parent=5528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/categories?post=5528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/tags?post=5528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}