Kodeco Forums

UIAppearance Tutorial: Getting Started

🎓 Courses & Articles
1

In this UIAppearance tutorial, you'll learn how to make your app stand out by using Swift to customize the look and feel of standard UIKit controls.

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/652-uiappearance-tutorial-getting-started
2

Hi
How to customise UITableViewHeaderFooterView and UICollectionReusableView (header and footer for collection view) using UIAppearance protocol.

3

it’s easy

  • in storyboard select the collection view and put the check on header.
  • drag and drop what you want to display (image view, label ecc.
  • subclass UICollectionReusableView class and connect the component with your custom class
  • in yourCollectionViewFile.swift (or .m for Objective-c) override this method

Swift
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView

Objective-C
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;

inside you have

var reusableView:HeaderCollectionReusableView!
        if kind == UICollectionElementKindSectionHeader {
            reusableView = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "HeaderView", for: indexPath) as! HeaderCollectionReusableView
           //Here configure your header
        }
        return reusableView

For Table view it’s a bit different
you have override this method

Swift
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?

Objective-C
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;

Inside this method you have create the view and the component you want to display (uiimageView, label etc.)

after that you have implement this method. otherwise the section not be shown.

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 23.0
    }

p.s. be careful to constraints. here you have to implement them programmatically
I hope to have helped you

4

Hi @ron.kliffer

than you for your tutorial but I have a problem.

I’m coloring my app with image using the function appearance(). but my app can send mail and when click on button to make show the view controller of mail, the app goes in crash. this is error:

*** Terminating app due to uncaught exception ‘NSInternalInconsistencyException’, reason: ‘Only RGBA or White color spaces are supported in this situation.’
*** First throw call stack:
(0x18fe62fd8 0x18e8c4538 0x18fe62eac 0x1908fa710 0x1963f2f84 0x1908b5f84 0x1908bce4c 0x19674bbc0 0x19674b460 0x196746d9c 0x18fd46c80 0x18fd46b28 0x196746a9c 0x1969ada44 0x19683ab48 0x19683a77c 0x19ca0a708 0x19c9dda28 0x1003fa390 0x1003f78c4 0x1003f6a18 0x1003f826c 0x1960bcf28 0x19616cca8 0x19621ea18 0x196210ab4 0x195f84724 0x18fe109a0 0x18fe0e628 0x18fe0ea74 0x18fd3ed94 0x1917a8074 0x195ff7130 0x100463d08 0x18ed4d59c)
libc++abi.dylib: terminating with uncaught exception of type NSException
(lldb)

How can I fix it?

5

Hi
Thanks for taking time to reply and may be I should have been a bit more clear upfront. I was trying to ask how to customize UIHeaderFooterView and UICollectionReusableView using UIAppearance protocol. Why I was asking is because UIAppearance allows you to make customization once and carry everywhere in your app wherever TableView or CollectionView are used.

6

then the answer is: both yes and no.

Let me explain! you can use UICollectionReusableView.appearance() but it is like a empty view. if you want show a label you have add it as I explained before.

therefore you can use the appearance() protocol but you can’t do what you can do with a custom UICollectionReusableView.

7

Ok Kool:)
Maybe this was the reason my Collectionview headers were behaving weird when I used UIAppearance protocol. But they were behaving as expected if I customised them in UICollectionViewController.

8

Vow … this is very useful Tutorial and beautiful too :wink:
Big Thank You, to author :slight_smile:

9

Pretty cool & thanks, it’s just what I hunting for.

10

This tutorial is more than six months old so questions are no longer supported at the moment for it. We will update it as soon as possible. Thank you! :]