Divider with label in SwiftUI

DevTechie Inc
Jan 15, 2023

In this article, we will build a custom Divider view with label in between. By the end of the article, we will have a Divider view like this.

Horizontal divider:

Vertical divider:

We will be using iOS 16’s newly introduced AnyLayout for dynamic layout.

We will start with a new View which will take label, padding, color and isVertical parameters.

struct DividerWithLabel: View {    let label: String
    let padding: CGFloat
    let color: Color
    let isVertical: Bool}
isVertical param will be used to determine the stack.

Let’s initialize all these parameters inside the init for view. We will have default value for all the params except label.

init(label: String, padding: CGFloat = 20, color: Color = .gray, isVertical: Bool = false) {
    self.label = label
    self.padding = padding
    self.color = color
    self.isVertical = isVertical
}
We also need a private variable to determine what kind of Divider we will be showing:

private var dividerLine: some View {
    let layout = isVertical ?
    AnyLayout(HStack()) : AnyLayout(VStack())
    
    return layout { Divider().background(color) }.padding(padding)
}
For the body, we will simply put label between the custom divider line:

var body: some View {
    let layout = isVertical ?
    AnyLayout(VStack()) : AnyLayout(HStack())
    
    layout {
        dividerLine
        Text(label).foregroundColor(color)
        dividerLine
    }
}
Complete view should look like this:

struct DividerWithLabel: View {let label: String
    let padding: CGFloat
    let color: Color
    let isVertical: Boolinit(label: String, padding: CGFloat = 20, color: Color = .gray, isVertical: Bool = false) {
        self.label = label
        self.padding = padding
        self.color = color
        self.isVertical = isVertical
    }var body: some View {
        let layout = isVertical ?
        AnyLayout(VStack()) : AnyLayout(HStack())
        
        layout {
            dividerLine
            Text(label).foregroundColor(color)
            dividerLine
        }
    }private var dividerLine: some View {
        let layout = isVertical ?
        AnyLayout(HStack()) : AnyLayout(VStack())
        
        return layout { Divider().background(color) }.padding(padding)
    }
}
We are ready to use this view now.

struct DevTechieDividerExample: View {
    var body: some View {
        VStack {
            Button("Visit DevTechie.com") {}
                .buttonStyle(.borderedProminent)
            DividerWithLabel(label: "DevTechie", isVertical: false)
            Button("Learn iOS Development") {}
                .buttonStyle(.borderedProminent)
        }
    }
}
struct DevTechieDividerExample: View {
    var body: some View {
        HStack {
            Button("Visit DevTechie.com") {}
                .buttonStyle(.borderedProminent)
            DividerWithLabel(label: "DevTechie", isVertical: true)
            Button("Learn iOS Development") {}
                .buttonStyle(.borderedProminent)
        }
    }
}



With that we have reached the end of this article. Thank you once again for reading. Don’t forget to follow 😍. Also subscribe our newsletter at https://www.devtechie.com
Like