SwiftUI: Layout & Interfaces

In this course, you’ve been working with sections of views. But you haven’t used SwiftUI’s Section View. In this episode, that will change! Sections are used for adding headers and footers to views, and there are a couple of associated options available to you. Let’s check ’em out.

Here, we have a LazyVStack with 5 subgenre views, for each genre.

But unless you’re really up on your musical genres, there’s no visual indication of where one genre ends, and another begins. A Section allows us to add, as one option, a header, to a view.

        ForEach(Genre.list) { genre in
          Section(header: )
          ForEach(genre.subgenres.prefix(5)) {

And in this Starter project, I’ve added a Genre Header view type, below, to test that out.

        ForEach(Genre.list) { genre in
          Section(header: genre.header) {
            ForEach(genre.subgenres.prefix(5)) {
              $0.view.frame(width: 125)
            }
          }
        }

Now, as we scroll through, we know what genre we’re looking at. You can use any view you want, for this. The reason that I’ve made a blurring header view for you to try, is that you can pin the headers.

You do that by adding an argument to either a Stack, or a grid. Its label is “pinnedViews”.

LazyVStack(pinnedViews: /*@START_MENU_TOKEN@*/[]/*@END_MENU_TOKEN@*/) {

The type of this argument is a “PinnedScrollableViews”. It’s an option set, and you’ve got two options available. One is Section Headers.

LazyVStack(pinnedViews: .sectionHeaders) {

Now, as you scroll through, a header will stick around onscreen, as long as its section is visible. And you see the blurred views pass “below” the headers.

Unfortunately, there’s no way to do that in pure SwiftUI yet, but the code for it is in this project if you want to learn how it’s done.

Now, let’s add a footer to the sections, to see the difference, live, between pinning, and not pinning. (You can just use the “header” as a footer view, for a demonstration.)

          Section(
            header: genre.header,
            footer: genre.header
          ) {

The headers are always visible for a section, but you have to scroll down to the bottom of a section, to see the footers. You can change that, by pinning the footers too.

LazyVStack(pinnedViews: [.sectionHeaders, .sectionFooters]) {

It’s very unlikely that you’d ever want the same view for both a header, and a footer, but now, you’re familiar with all of the available options. …that is, for VStacks. For HStacks…

LazyHStack(pinnedViews: [.sectionHeaders, .sectionFooters]) {

…just switch the scroll direction, as per usual.

ScrollView(.horizontal) {

The naming isn’t really accurate anymore. I don’t think of something on the left as a “header” or something on the right, as a footer, but as least they do what you might expect: the same idea, in a different axis. And as I mentioned, headers and footers, pinned or not, work with grids, also.

LazyHGrid(

Just provide the rows or columns you need.

      LazyHGrid(
        rows:
        pinnedViews: [.sectionHeaders, .sectionFooters]
      ) {

…like, for example, an array of 6 flexible grid items.

rows: .init(repeating: .init(), count: 6),

We can see the result better, by getting rid of the prefix, now.

ForEach(genre.subgenres) {

And that’s all for headers and footers. You’ll get more practice using them with grids in the next episode!