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.
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.
As of iOS 14.0, this list-style is .listStyle(InsetGroupedListStyle()) or .listStyle(.insetGrouped)
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.
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
Related
I'm curious, is there a way to control how Label views are expressed in SwiftUI Pickers? Of course, one of the features of SwiftUI is that controls express themselves in different ways in different contexts (eg form vs not-form, iOS vs macOS, in toolbar vs out of toolbar).
Normally this feature is desirable, but in my situation, I find the disconnect of how the same label looks in the following three contexts to be a bit jarring:
When displaying the current selection of a Picker.
When displaying the choices available in the Picker menu.
When simply displaying information in a form.
In particular, 1 vs 2 is jarring. It doesn't seem right that the user chooses something from picker menu, where the SFSymbol is on the right, and the selection is shown with the SFSymbol on the left. And the way the label looks in context 1, the picker selection, is unattractive to me. The symbol and text are uncomfortably close.
Is there a way to override the default expressions so these differences are less jarring in this context? I actually would like it if all Labels could be expressed as something close to situation 3 (but with a narrower gap between SFSymbol and Text).
Here is some code to demonstrate this problem:
struct LabelInPickerLayout: View {
#State private var selection = 2
var body: some View {
Form {
Picker("Choice", selection: $selection) {
Label("First Item", systemImage: "1.circle").tag(1)
Label("Second Item", systemImage: "2.circle").tag(2)
}
.pickerStyle(.menu)
.labelsHidden()
Section("almost desired look") {
Label("First Item", systemImage: "1.circle")
}
}
}
}
I want to use the new iOS 16 Buttom Sheet Feature to create a view like the find my:
Unfortunately the TabView gets hidden behind the Sheet:
My Code:
TabView {
Text("View 1")
.sheet(isPresented: .constant(true)) {
Text("Sheet View Content")
.presentationDetents([.medium, .large])
}
.tabItem {
Label("Menu", systemImage: "list.dash")
}
Text("View 2")
.tabItem {
Label("Order", systemImage: "square.and.pencil")
}
}
How can I achieve this?
No Solution for the moment
Unfortunately, it is not currently possible to show a modal sheet with a tab bar visible using the current version of SwiftUI. This issue has been raised by other developers on the Apple developer forums and on other threads on StackOverflow, such as the following:
https://developer.apple.com/forums/thread/711702
Swift UI show modal sheet with tab bar visible
SwiftUI present sheet in a TabItem of TabView using presentationDetents
I am also searching for a solution to this problem.
I am currently working on a custom ViewModifier to address this issue, and if it is successful, I will make it publicly available on GitHub.
I cannot understand why in the simulator the layout is different from the layout displayed in xcode/preview.
struct ContentView : View {
var body: some View {
ZStack(alignment: .bottom) {
ARViewContainer()
Text("hello")
}
}
}
here the screenshots:
TLDR; I don't know why your simulator and preview don't match, but I do know why it's appearing the way that it is on the device. Are you getting any errors in the debug?
Any container views in SwiftUI will only take up the required space that they need. they will also distribute according to your settings. For example, you have a ZStack that contains a bottom alignment. You also have a ARViewContainter() that takes up a portion of that stack. They are aligned behind each other on the Z axis where the text is in front and the other container is behind. A quick way to prove this and test it is to include a background shape behind everything for example.
var body: some View {
ZStack {
Rectangle().edgesIgnoringSafeArea(.all)
.foregroundColor(Color.red)
//Your Views
}
}
This will force the ZStack to take up all available space and your other views should then align as expected. Basically, your Text is aligning to the bottom of the maximum provided space, which is being provided by your ARViewContainer()
Further Reading and Understanding
Views only take up the space required for what's in them, unless otherwise specified.
ZStacks operate on the Z axis, forward/backwards.
In your case you have a view with a set size called ARViewContainer() which takes up the width of the screen and a portion of the height. Since it's the largest view you have, the ZStack inherits that size.
Your text is smaller than the ZStack so the ZStack does NOT inherit the size. You do however have a .bottom assignment. So your text is over your ARViewContainer() and aligned to the .bottom edge of that container.
Finally the ZStack is centered in the remaining space available, giving it the impression that your .bottom isn't doing anything, when in reality it is.
Reproducing the Issue
Here is a code snippet that reproduces your issue and makes it a bit clearer and easier to understand.
var body: some View {
ZStack(alignment: .bottom) {
Rectangle().foregroundColor(Color.yellow).frame(width: 100, height: 100, alignment: .center)
Text("Test")
}
}
One of the new features of SwiftUI 2 are LazyVStacks. Is it possible to implement its functionality in the current SwiftUI framework? I have the following code sample where I want to use it:
var body : some View {
VStack(alignment: .leading){
ScrollView {
Text("sample")
VStack{ // I want to have a LazyVStack here
ForEach(1..<10000, id: \.self) {_ in
Text("test")
}
}
}
}
}
Normally i would use a List which is by default lazy. But due to other constraints it's not possible.
Thanks in advance.
You have to install Xcode 12 beta in order to use LazyStacks. If you are coding for an iOS app, the simulator will run correctly, but if you are coding for a macOS app you will have to update to Big Sur also in order to run the SwiftUI 2 code.
This is my example that I am trying to get to work:
struct ContentView: View {
let links = ["Item 1", "Item 2", "Item 3", "Item 4"]
var body: some View {
NavigationView {
ScrollView {
Text("My Title")
List(links, id: \.self) {
link in
NavigationLink(destination: TestView()) {
Text(link)
.padding(.vertical, 4)
.frame(maxWidth: .infinity, alignment: .leading)
}
}
.frame(height: 178)
Text("Some more content here")
}
}
}
}
Note: TestView is just some view with the text hello world on it.
I am trying to copy Apple Music's style of navigation. I tried putting a Button in the NavigationLink but tapping it on the text wouldn't change views, and I couldn't find a way to reliably change the color of the row when tapped, at the same time. Also in some approach, I managed to make it work, but the way the colors animate is different, i.e. it fades from A to B, over ~100ms whereas what I'm trying to achieve is to animate between the states instantly (like in Apple Music).
My current approach is using a List, putting NavigationLinks inside it and then cutting off the whole view by giving it a height. This way I can put it alongside other content.
It's working fine for now, but whenever I click on an row and go back, the row is still highlighted, when it shouldn't. Is there a way to make it so that it deselects when going back to the screen somehow?
I think this bug is being caused by the List being inside a ScrollView, since when I removed ScrollView, the list worked properly, and there wasn't this highlight bug. But I need to be able to put my content with the list, and I don't intend to have a list take up the whole screen.
Is there any way to fix this bug with this approach? I'm also willing for other ways to achieve the same result without using List.
Trying to use ForEach instead ofList?
With a view for row (CustomRow) where you can pass link item and set custom dividing line, background etc ...
ForEach(links, id: \.self) { link in
NavigationLink(destination: TestView()) {
CustomRow(item: link)
}
}
.frame(height: 178)