# Video Tutorial: Introducing Custom Controls Part 1: Your First Custom Control

**URL:** <https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154>\
**Category:** 🎓 Courses & Articles\
**Created:** [March 4, 2016, 2:50pm UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154 "2016-03-04T14:50:34Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [March 4, 2016, 2:50pm UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154/1 "2016-03-04T14:50:34Z")

</div>

Build your first custom control by learning how to compose UIKit components to create a powerful icon.

 
* * *
 This is a companion discussion topic for the original entry at [https://www.raywenderlich.com/4276-introducing-custom-controls/lessons/2](https://www.raywenderlich.com/4276-introducing-custom-controls/lessons/2)

---

<div class="post-metadata">

**Author:** ![ethos](https://s3.amazonaws.com/cdn.raywenderlich.com/community/forum-assets/noun-game-ghost-878668.png) [@ethos](https://forums.kodeco.com/u/ethos)\
**Post date:** [March 23, 2016, 5:50am UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154/2 "2016-03-23T05:50:43Z")

</div>

Hi,  
I’m using your tutorial to crate my own custom view.  
but i having problems with autolayout and interface builder.  
you can see the full problem in [stack overflow](http://stackoverflow.com/questions/36166975/autolayout-constraints-set-in-code-not-appearing-in-interface-builder)

Thanks,  
Ilan

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [March 23, 2016, 9:03am UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154/3 "2016-03-23T09:03:40Z")

</div>

Hi Ilan,

There are a couple of reasons that might explain the behaviour you’re seeing. The first is that the constraints inside that custom view don’t define the size. Therefore it’ll depend on external constraints to define the size. What constraints do you have set up in IB? If they don’t determine the size of that view, then AL won’t know how to size it.

You can provide the intrinsic content size to avoid this - which would allow you to choose a “favourite” size, but then also override it from outside the custom view.

The other reason you could be seeing this is the result of a confusing issue with interface builder. When a view is instantiated in code, you need to set `translatesAutoresizingMaskIntoConstraints` to `false` as you have done. However, for some reason, the live rendering in IB expects this to be `true`.

This is very confusing, but it’s likely that this is causing the issues you’re seeing - the difference between running the code and IB.

To get around this, try removing the `translatesAutoresizingMaskIntoConstraints = false` line from `setupView()` and update `init(frame:)` to match the following:

```swift
override init(frame: CGRect) {
  super.init(frame: frame)
#if !TARGET_INTERFACE_BUILDER
  translatesAutoresizingMaskIntoConstraints = false
#endif
  setupView()
}

```

Check that your constraints are set up correctly in IB and then give the code snippet above a try to see whether that fixes the issue.

sam

---

<div class="post-metadata">

**Author:** ![ethos](https://s3.amazonaws.com/cdn.raywenderlich.com/community/forum-assets/noun-game-ghost-878668.png) [@ethos](https://forums.kodeco.com/u/ethos)\
**Post date:** [March 23, 2016, 8:27pm UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154/4 "2016-03-23T20:27:42Z")

</div>

Thanks for the response.

I removed

```nohighlight
translatesAutoresizingMaskIntoConstraints = false

```

from setup view, and everything is working great.

But the macro TARGET\_INTERFACE\_BUILDER doesn’t exist for me.  
(I’m using Swift 2.2)

Ilan

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [March 24, 2016, 12:07am UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154/5 "2016-03-24T00:07:16Z")

</div>

Great! And thanks for the pointer on the deprecation of `TARGET_INTERFACE_BUILDER`. Will investigate what it’s been replaced with.

sam

---

<div class="post-metadata">

**Author:** ![yaronkipi](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/yaronkipi/32/43070_2.png) [@yaronkipi](https://forums.kodeco.com/u/yaronkipi)\
**Post date:** [May 4, 2016, 11:26pm UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154/6 "2016-05-04T23:26:13Z")

</div>

Hi Sam,  
I have watched some of your videos tutorials, you are a great tutor!!!

In this video, you calling setContentHuggingPriority for the IconControl it-self (7:30), in addition to the label and imageView.

I do not understand the purpose of it. You have not overridden the method intrinsicContentSize() for IconControl, as far as I know, calling setContentHuggingPriority, in this situation, should have no effect.

Is that correct?

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [May 7, 2016, 2:14pm UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154/7 "2016-05-07T14:14:00Z")

</div>

Hey,

From what I remember, I believe you’re correct - it’ll have no effect. Content hugging is not used internally for a UIView, but is used to determine how the control will interact with its siblings.

This is especially important when views appear inside stack views. If you haven’t already, I urge you to check out the stack views series:

[https://www.raywenderlich.com/video-tutorials#stackviews](https://www.raywenderlich.com/video-tutorials#stackviews)

sam

---

<div class="post-metadata">

**Author:** ![fabiogiolito](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/fabiogiolito/32/37487_2.png) [@fabiogiolito](https://forums.kodeco.com/u/fabiogiolito)\
**Post date:** [July 23, 2016, 3:48am UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154/8 "2016-07-23T03:48:49Z")

</div>

Any chance you could cover building custom controls with xib files? I’d love to build visually the multiple elements of my app, separately and independently, to only then start piecing them together in my views. I can’t find a good tutorial on that online or anywhere, I managed to hack together something that works, but I’m certain it’s not the correct way to do it.

---

<div class="post-metadata">

**Author:** ![destroplayer](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/destroplayer/32/81494_2.png) [@destroplayer](https://forums.kodeco.com/u/destroplayer)\
**Post date:** [July 25, 2016, 7:53am UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154/9 "2016-07-25T07:53:35Z")

</div>

true, this should be build in interface builder

---

<div class="post-metadata">

**Author:** ![musa](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/musa/32/81494_2.png) [@musa](https://forums.kodeco.com/u/musa)\
**Post date:** [August 8, 2016, 1:34am UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154/10 "2016-08-08T01:34:17Z")

</div>

Hi Sam,

I was wondering is there a way to make only one side of the view have a corner radius? As I wanted to build a view that acts like a button sitting on the edge of the screen and when pressed a list of controls slide out.

Thanks

/ Musa

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [August 9, 2016, 6:23am UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154/11 "2016-08-09T06:23:36Z")

</div>

Hi @fabiogiolito

This is possibly something that could have been covered in this series, but there’s a limit to what can be fitted in 10 videos. The problem with XIB-based or storyboard-based custom controls is that they are a bit hacky to get working correctly.

I believe that this series is due to be updated in the next cycle, so I’ll suggest it as an addition to the existing content.

cheers!

sam

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [August 9, 2016, 6:30am UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154/12 "2016-08-09T06:30:43Z")

</div>

Hi @musa,

The `cornerRadius` property on `CALayer` affects all corners equally - there is no way to select which corner you want.

There are several options to achieve the effect that you’re after:

- you could create a shape layer `CAShapeLayer` that has the appropriate shape and use that the background to your view.
- Since you want just 2 corners on the same side rounded, you could use 2 layers - one with rounded corners, one without. Make the non-rounded one smaller, and overlay it on the rounded one to “cover-up” the 2 rounded corners you want to be right-angled.
- Or you could create a background image that has the correct shape, and use it as the layer content. If you make the image stretchable it would be able to cope with different device sizes, and wouldn’t be an expensive memory hog.

Give one of these a try and see how it goes.

sam

---

<div class="post-metadata">

**Author:** ![horiz0n](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/horiz0n/32/43621_2.png) [@horiz0n](https://forums.kodeco.com/u/horiz0n)\
**Post date:** [October 7, 2016, 1:31pm UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154/13 "2016-10-07T13:31:36Z")

</div>

Hi really cool videos 🙂 I’m on swift 3 and i don’t understand why you add sharedInitialization() into an extension because when i do that, i’ve got an error : “use of unresolved identifier sharedInitialization”, so i have change my code to add this function into my class and no problem. So why use an extension ? Thanks you

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [October 9, 2016, 4:36pm UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154/14 "2016-10-09T16:36:26Z")

</div>

@horiz0n

I like to use extensions to separate functionality, but it’s entirely a personal preference. The difference in Swift 3 are the access specifiers. In Swift 3 `private` restricts access to the local scope only - and the new `fileprivate` specifier is equivalent to `private` in Swift 2; i.e. access is restricted to just that file.

Switch `private` for `fileprivate` and you should be fine.

sam

---

<div class="post-metadata">

**Author:** ![horiz0n](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/horiz0n/32/43621_2.png) [@horiz0n](https://forums.kodeco.com/u/horiz0n)\
**Post date:** [October 17, 2016, 10:51am UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154/15 "2016-10-17T10:51:10Z")

</div>

Thanks is now run perfectly. I have test coding with extension, really good 😊

---

<div class="post-metadata">

**Author:** ![samdavies](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/samdavies/32/108448_2.png) [@samdavies](https://forums.kodeco.com/u/samdavies)\
**Post date:** [October 17, 2016, 11:47am UTC](https://forums.kodeco.com/t/video-tutorial-introducing-custom-controls-part-1-your-first-custom-control/7154/16 "2016-10-17T11:47:59Z")

</div>

Glad you were able to get it going!