Rounded corners in swiftui list sections

Question

Here is a screen shot of iOS 13 Health app - User profile. I recently started with swiftui and wondering how to develop a screen like below. I tried list styles plain and grouped. But I couldn't get the look of below layout.

Can UI like this develop purely using swiftui-list?

I am specially looking for rounded sections and including a image inside the list.

Yes, UI like this can be made entirely using SwiftUI. Could you provide the code you have already so we could help you? — LuLuGaGa, Sep 16 '19 at 15:46
I just played with List in swift ui. There is no specific code to share. — uiroshan, Sep 17 '19 at 00:35

NG235 · Answer 1 · 2021-04-21T08:39:15.570

42

As of iOS 14, you can use the code below. It works just perfectly, just like in UIKit.

List {
    Section {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
    
    Section {
        Text("Item 4")
        Text("Item 5")
        Text("Item 6")
    }
}.listStyle(InsetGroupedListStyle()) // this has been renamed in iOS 14.*, as mentioned by @Elijah Yap
.environment(\.horizontalSizeClass, .regular)

Thank you.

edited Apr 21 '21 at 08:39

answered Jan 07 '20 at 06:20

NG235

1,091
12
33

2

Don't know why this works (I'm guessing the framework picks defaults based on screen size at the time) but it works. For people going the other way (forcing a lack of border on the iPad) use `.compact` instead of `.regular` – Andrew Lipscomb Jan 29 '20 at 06:57
1

Thank you @AndrewL for your comment. That is very true. – NG235 Jan 29 '20 at 07:00
4

Using this causes the Lists content to extend outside of the view when I rotate the phone – Kyle Bradley Apr 14 '20 at 18:04
1

@KyleBradley you're right, the contents of the list rows extend off the screen, and get clipped when you rotate to landscape. And once this has happened, the content remains clipped when you rotate back to portrait. – Ryan Maloney Apr 24 '20 at 18:05
1

I believe that the problem with content extending off the screen is a SwiftUI problem and not a problem with the solution code. SwiftUI is still fairly new and there are plenty of bugs. I do not think that there is a way to solve this. Hope this clears up some of the confusion. – NG235 May 29 '20 at 03:49
Thank you for the solution. I know that I could make this whole view programmatically, but this is a much cleaner solution. – Mikael Weiss May 29 '20 at 17:24
1

But the background of the sections is the same as the background of the list. – Eddy Jul 01 '20 at 11:33
@AndrewLipscomb I tried that but I can't get rid of the insets when my app uses Form in iOS 14...somehow it uses the inset by default on a Form I don't know why and nothing will change it – Timmerz Sep 17 '20 at 23:36

Elijah Yap · Answer 2 · 2022-08-11T16:39:44.130

24

As of iOS 14.0, this list-style is .listStyle(InsetGroupedListStyle()) or .listStyle(.insetGrouped)

edited Aug 11 '22 at 16:39

answered Jul 23 '20 at 15:51

Elijah Yap

373
2
5

Ivan · Answer 3 · 2019-12-20T11:45:42.757

I run into the same problem and it looks like you can not achive this with list or section.

When you put cornerRadius modifier onto a section or list it is just applied to whatever the internals are making cells rounded while section itself being unchanged.

My solution was to avoid lists and sections entirely and build custom ones.

Something like

SectionView: View {

    body: some View = {
        VStack {
            ForEach {
                CellView()
            }
        }
        .background(Color.white)
        .cornerRadius(10)
        .padding()
    }
}

And put those sections over a Color view in some ZStack to have a gray background.

Take in account that the huge downside is that a ForEach will render all the cells right away, like if you have a thousand of cells then onAppear() will be called for each cell and strangely enough they will be called in backward order.

Hope it helps.

uiroshan · Answer 4 · 2019-09-17T07:58:11.717

3

According to my findings and as of Xcode 11 GM seed 2 (11A420a), making this UI is not possible just from swiftui list.

There is a new list style available for storyboards named, insetGrouped. It has the exact same look. https://developer.apple.com/documentation/uikit/uitableview/style

edited Sep 17 '19 at 07:58

answered Sep 17 '19 at 07:50

uiroshan

5,021
2
39
37

Rounded corners in swiftui list sections

4 Answers4