Cell Designs with XIBs and Interface Builder

Many smaller companies will use different approaches to designing their UI. Some strategies involve using full Storyboards, some use XIBs, some go full code. The most common approach you'll find is a mix of all three. Now I'm personally not a big fan of Storyboards because it hides a lot of functionality that iOS developers need to learn. However, I'm not against creating XIBs for views using Interface Builder. In fact, for simple views such as a couple of labels and an image, it's probably easier to use XIBs to get your project going. In today's lesson, I will go through how to hook up a Podcast Cell using Interface Builder. Then we'll need to register this nib with our UITableView so that dequeuing works correctly.

Comments (7)

Huo En Ci

5 years ago

Hi Brian, won't it be better to align the imageview's centerY to its superview (similar to the stackView) instead of defining a vertical spacing?

Brian Voong

5 years ago

Kilian Hiestermann

5 years ago

I don't really understand why you are using the ! at 12:00. Could you explain it a little bit more? thx

Brian Voong

5 years ago

Huo En Ci

5 years ago

Using both ? or ! in my view will be fine for the following reasons: 1. APIService.shared.fetchPodcasts(searchText: searchText) { (podcasts) in self.podcasts = podcasts } the podcasts that is returned by the completion can potentially be nil and can be problematic if you do use a if let or guard statement to check for nil before reloading the tableView. 2. I used a property observer instead: var podcasts: [Podcast]? { didSet { tableView.reloadData() } } And therefore if the completion returns nil, tableView.reloadData() will not be called.

Tokyojogo

5 years ago

Hi brian, I'm having problems with the xib. I have the stackview centered vertically, leading space to: podcastImageView set to 12 and trailing is 0. But the text is displaying from the top left corner of the xib (overlapping the image). I've deleted the constraints and tried it again and again but I keep getting the same problem. Any suggestion/fix?

Tokyojogo

5 years ago

nvm. Weird, I deleted the xib file and created it again with the exact same constraints and its working now. SIgh...

RichyCode

5 years ago

make sure your PodcastCell Custom class is selected on the NIB and not the content view

Aivars

4 years ago

Thank you RichyCode, I had the same issue. Your solution fixed issue for me. I had it set to the both: Podcast cell and Content view.

edward

5 years ago

Hi Brian Again great episode. Recently I've been trying to use UIStackViews for all my layouts. For the podcast cell I use a vertical stack view for the labels and then a horizontal root stack view for the image view and labels vertical stack view. I then pin the horizontal stack view to be 16 points away from all sides. This works but I get constraint warnings in the console, which makes no sense to me. Any idea why?

Brian Voong

5 years ago

Yu Hao Chen

5 years ago

Hey, Brian, I'm from Taiwan. I often listen to your class. There is a doubt that you will choose to use code layout ui for your previous experience. How to choose xib this time?

Yu Hao Chen

5 years ago

haha, 我看到一半, 後面看到了

Yu Hao Chen

5 years ago

angle is not use?

Brian Voong

5 years ago

Yu Hao Chen

5 years ago

我也是喜歡100%純code的，感謝你的回答，你中文真好哈哈。

Brian Voong

5 years ago

gottaminute

5 years ago

Hi Brian, At 6:19 it has tableView.register, but I'm using a collectionView and when I use this code it doesn't seem to recognize it. What's the different from tableView to collectionView? fileprivate func setupCollectionView() { let nib = UINib(nibName: "FeedCell", bundle: nil) collectionView.register(UICollectionViewCell.self, forCellReuseIdentifier: cellId) } it gives this error: Ambiguous reference to member 'collectionView(_:numberOfItemsInSection:)' Any help would be appreciated :)

Brian Voong

5 years ago

Muhammad Hamza Sani

4 years ago

I really can't purchase this course, very expensive for me. Can I please get a discount??

Han Htoo Naung001

4 years ago

Hi Brian , Big Companies also use Xib ? why you used Xib instead of pure code ?

Han Htoo Naung001

4 years ago

sry sir , i did see about this lesson 7 explanation

Introduction - Podcasts List