Padded Label and Separator View

• Padded Label and Separator View

Episode #393 | 11 minutes | published on May 29, 2019 | Uses Xcode-10.2.1, Swift-5.0

Subscribers Only

In this episode we create some more custom @IBDesignable views, this time for a padded genre label where we use the intrinsicContentSize to make a label take up more space and give itself a little padding. We also create a separator view that draws a thin line to separate sections visually.

This episode is part of a series: Making a Podcast App From Scratch.

1. Intro 1 min

2. New Project Setup & Theming 14 min

3. Storyboard References 5 min

4. Reusable Views 10 min

5. Styling Custom Cells 15 min

6. Working with Remote Images 16 min

7. Creating an API Client 18 min

8. Parsing JSON into Models 15 min

9. Displaying Search Results and Recommendations 25 min

10. Parsing RSS and Atom Feeds 29 min

11. Podcast Detail Screen 27 min

12. Custom Gradient Background 13 min

13. Padded Label and Separator View 11 min

14. Making a Custom Subscribe Button 16 min

15. Refactoring to a Data Manager 26 min

16. Adding Episode Cells 27 min

17. Polish and Cleanup 23 min

18. Setting up Core Data to Save Subscriptions 24 min

19. Player Screen 27 min

20. Audio Playback 24 min

21. Player Bar Part 1 21 min

22. Player Bar Part 2 15 min

23. My Podcasts Screen 28 min

24. Setting up Core Data for Episodes 5 min

25. Refactor Core Data Context Handling 11 min

26. Importing Episodes from a Feed 22 min

27. Updating Feeds in the Background 10 min

28. Playlist Screen 18 min

29. Tracking Playback Progress 33 min

Padded Label and Separator View

In this episode, we create some more custom @IBDesignable views, this time for a padded genre label where we use the intrinsicContentSize to make a label take up more space and give itself a little padding. We also create a separator view that draws a thin line to separate sections visually.

Creating Custom Genre Label

We will start by creating a custom UILabel to define our settings. To view the custom label rendered in Interface Builder, we will mark the class as @IBDesignable and configure the UI components with @IBInspectable. Since the content size is dependent on these properties, we need to invalidate the intrinsic content size in didSet.

import UIKit

@IBDesignable
class GenreLabel : UILabel {

    @IBInspectable
    var horizontalInset: CGFloat = 0 {
        didSet {
            invalidateIntrinsicContentSize()
        }
    }

    @IBInspectable
    var verticalInset: CGFloat = 0 {
        didSet {
            invalidateIntrinsicContentSize()
        }
    }
}

Now we will set properties for the label. We will set cornerRadius to half of bounds height and to see the effect of this setting we will set masksToBounds. Now we will define intrinsicContentSize.

private func commonSetup() {
    backgroundColor = Theme.Colors.gray2
    textColor = Theme.Colors.gray0
    font = UIFont.systemFont(ofSize: 12, weight: .medium)
    textAlignment = .center
    layer.masksToBounds = true
}

override func layoutSubviews() {
    super.layoutSubviews()
    layer.cornerRadius = bounds.size.height / 2
}

override var intrinsicContentSize: CGSize {
    var superSize = super.intrinsicContentSize
    superSize.width += horizontalInset * 2
    superSize.height += verticalInset * 2
    return superSize
}

Creating a Separator View

We will create a UIView by marking it with @IBDesignable and its properties marked with @IBInspectable. To trigger the setting of separatorColor through Interface Builder we need to call setNeedsDisplay while setting this property.

@IBDesignable
class SeparatorView : UIView {

    @IBInspectable
    var separatorColor: UIColor = Theme.Colors.gray3 {
        didSet {
            setNeedsDisplay()
        }
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        commonSetup()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        commonSetup()
    }
}

We will now draw the separator view and set the properties for the current context. To draw the separator at the mid-level of original, set y to half of the height. To ensure visibility of our custom settings, set the properties like isOpaque and backgroundColor.

private func commonSetup() {
    isOpaque = false
    backgroundColor = .clear
}

override func draw(_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext() else { return }
    separatorColor.setStroke()

    context.setLineWidth(1/UIScreen.main.scale)
    let midY = bounds.size.height / 2
    context.move(to: CGPoint(x: 0, y: midY))
    context.addLine(to: CGPoint(x: bounds.size.width, y: midY))
    context.strokePath()
}

View on Github

Download