@IBDesignable<\/code><\/div>class<\/code> TrailerCollectionViewCell<\/code>: <\/code>MediaCollectionViewCell<\/code> {<\/code><\/div> <\/code>@IBOutlet<\/code> weak<\/code> var<\/code> lengthLabel: <\/code>UILabel<\/code>!<\/code><\/div> <\/code>@IBInspectable<\/code> weak<\/code> var<\/code> bgImage: <\/code>UIImage<\/code>! {<\/code><\/div> <\/code>didSet<\/code> {<\/code><\/div> <\/code>imgView.frame = <\/code>self<\/code>.bounds<\/code><\/div> <\/code>self<\/code>.addSubview(imgView)<\/code><\/div> <\/code>imgView.image = bgImage<\/code><\/div> <\/code>imgView.contentMode = <\/code>UIViewContentMode<\/code>.<\/code>Center<\/code><\/div> <\/code>self<\/code>.sendSubviewToBack(imgView)<\/code><\/div> <\/code>}<\/code><\/div> <\/code>}<\/code><\/div>}<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/code><\/pre>\nwhat’s great about this is it gives me a very easy way to set a background image on my TrailerCollectionViewCell. It shows right up in my storyboards so I can easily set it to my “play” icon graphic.<\/p>\n
![\"IBInspectable](\"http:\/\/jamesonquave.com\/images\/ibinspectable.png\")
<\/p>\n
Notice on the top-right of the attributes inspector it adds a “Bg Image” dropdown. When this is changed the didSet method above is triggered and it updates the view inside of Xcode, and when the iOS app runs. This is happening because the decoding from interface builder will also trigger didSet in the same fashion that interface builder does.<\/p>\n
What’s not so handy about this approach is that I have two other types of CollectionViewCell subclasses that need similar functionality. So, I have these three classes inherit from one superclass that implements the functionality.<\/p>\n
import<\/code> Foundation<\/code><\/div>import<\/code> UIKit<\/code><\/div> <\/div>class<\/code> MediaCollectionViewCell<\/code>: <\/code>UICollectionViewCell<\/code> {<\/code><\/div> <\/code>@IBOutlet<\/code> weak<\/code> var<\/code> titleLabel: <\/code>UILabel<\/code>!<\/code><\/div> <\/code>var<\/code> imgView = <\/code>UIImageView<\/code>()<\/code><\/div> <\/code>@IBInspectable<\/code> weak<\/code> var<\/code> bgImage: <\/code>UIImage<\/code>! {<\/code><\/div> <\/code>didSet<\/code> {<\/code><\/div> <\/code>imgView.frame = <\/code>self<\/code>.bounds<\/code><\/div> <\/code>self<\/code>.addSubview(imgView)<\/code><\/div> <\/code>imgView.image = bgImage<\/code><\/div> <\/code>imgView.contentMode = <\/code>UIViewContentMode<\/code>.<\/code>Center<\/code><\/div> <\/code>self<\/code>.sendSubviewToBack(imgView)<\/code><\/div> <\/code>}<\/code><\/div> <\/code>}<\/code><\/div>}<\/code><\/div> <\/div>class<\/code> TrailerCollectionViewCell<\/code>: <\/code>MediaCollectionViewCell<\/code> {<\/code><\/div> <\/code>@IBOutlet<\/code> weak<\/code> var<\/code> lengthLabel: <\/code>UILabel<\/code>!<\/code><\/div>}<\/code><\/div> <\/div>class<\/code> ReviewCollectionViewCell<\/code>: <\/code>MediaCollectionViewCell<\/code> {<\/code><\/div> <\/code>@IBOutlet<\/code> weak<\/code> var<\/code> ratingLabel: <\/code>UILabel<\/code>!<\/code><\/div>}<\/code><\/div> <\/div>class<\/code> PlaythroughCollectionViewCell<\/code>: <\/code>MediaCollectionViewCell<\/code> {<\/code><\/div> <\/code>@IBOutlet<\/code> weak<\/code> var<\/code> lengthLabel: <\/code>UILabel<\/code>!<\/code><\/div> <\/code>@IBOutlet<\/code> weak<\/code> var<\/code> ratingLabel: <\/code>UILabel<\/code>!<\/code><\/div>}<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/code><\/pre>\nIt doesn’t work!<\/h3>\n
Here’s the problem though: The field disappears in my storyboard!<\/p>\n
I spent some time debugging this issue, and found that I could work around it by overriding the bgImage variable in my subclasses, but it was not<\/strong> neccessary to re-implement anything. Success!<\/p>\nThe fix<\/h3>\n
Just adding this line did the trick:<\/p>\n
@IBInspectable<\/code> override<\/code> var<\/code> bgImage: <\/code>UIImage<\/code>! { <\/code>didSet<\/code> {} }<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/code><\/pre>\nSo now my complete file looks like this:<\/p>\n
import<\/code> Foundation<\/code><\/div>import<\/code> UIKit<\/code><\/div> <\/div>class<\/code> MediaCollectionViewCell<\/code>: <\/code>UICollectionViewCell<\/code> {<\/code><\/div> <\/code>@IBOutlet<\/code> weak<\/code> var<\/code> titleLabel: <\/code>UILabel<\/code>!<\/code><\/div> <\/code>var<\/code> imgView = <\/code>