My project is target for iOS 13 onwards hence could not use PageTabViewStyle(). I tried with Mr. John suggestion from this link
SwiftUI create image slider with dots as indicators
Now I need to open the detail view on clicking the image in the slideshow. But now when I try to move the images the detail view is opening and could not move the images as in Pageview. I implemented the below code. Please let me know the solution to fix this. Thanks in advance.
PagingView(index: $index.animation(), maxIndex: images.count - 1){
ForEach(articles, id: \.self) { article in
NavigationLink(destination: ArticleDetailUIView(article: articles[self.index], isBookmark: false) , isActive: $areYouGoingToArticleView)
{
Image(article.image)
.resizable()
.scaledToFill()
.accessibility(identifier: "articleImage")
}
}
}
.aspectRatio(4/3, contentMode: .fit)
.clipShape(RoundedRectangle(cornerRadius: 15))
After few browsing, the workaround was using the stepper to move around the slide show instead of scrolling the images. I added the below lines.
Stepper("Index: (index)", value: $index.animation(.easeInOut), in: 0...images.count-1)
.font(Font.body.monospacedDigit())
.labelsHidden()
Related
I'm a newbie, using XCode 13.0 to create a very basic app that needs to have a Settings view. I'd like to navigate to the Settings view on tapping a label. To do that, it seemed sensible to use a NavigationView with a NavigationLink.
Unfortunately, I'm encountering a formatting issue that creates a mess of the HStack in which the Setting label (gear icon) resides, as show below:
This is what I want, a result of the following code:
HStack(spacing: 25) {
... other labels
Label ("", systemImage: "gear")
.foregroundColor(.gray)
.font(.title)
.onTapGesture(perform: {
// Set a state variable that triggers an extension
// that brings up the SettingsView
})
}
This is what happens when NavigationView encapsulates the gear icon label. Note the vertical and horizontal white space around it.
HStack(spacing: 25) {
... other labels
NavigationView {
NavigationLink(destination: SettingsView()) {
Label ("", systemImage: "gear")
.foregroundColor(.gray)
.font(.title)
}.navigationBarTitle(Text(""))
}
}
I've, literally, spent weeks (sporadically) on this issue, looking up dozens of answers and trying various formatting options, without luck. I've also tried encapsulating parent and grandparent stacks into the NavigationView. To no avail. Surely, this is something trivial. Can somebody point me in the right direction?
p.s. there are other issues in that that Navigation link opens as a sub-window; I plan to tackle that later.
Edit: Right, so I tried using Yrb's code:
HStack(spacing: 25) {
... other labels
NavigationView {
NavigationLink(destination: Text("Linked View")) {
Image(systemName: "gear")
.foregroundColor(.gray)
.font(.title)
}
.fixedSize()
.background(Color.red)
}
]
Unfortunately, there's no substantive change...
In diagnosing these sort of issues, it helps to throw a .background() with a color on. You can then see the issue. In this case, it was twofold, one, you need to use a .fixedSize to shrink the view to its smallest dimensions necessary. That would leave you with the icon plus a little space. That was due to you using a label as it was leaving a spot for the Text("") that you used as a fill in. Since you only want the image, use Image(systemName:) The code then comes out like this:
struct NavLinkNoSpace: View {
var body: some View {
NavigationView {
NavigationLink(destination: Text("Linked View")) {
Image(systemName: "gear")
.foregroundColor(.gray)
.font(.title)
}
.fixedSize()
// Setting this shows you what space you are using. Remove it when you are done
.background(Color.red)
}
}
}
A couple more things. If you have not ever set the NavigationTitle, you don't need to set it to "". In your example, there was no title, so I simply removed it and there was no effect.
More importantly, and it was addressed by some of the comments, you should only have one NavigationView in the view hierarchy. As long as you are in the hierarchy, you do not need to wrap things like NavigationLink to have them work. You can always throw one around your view call in the preview provider if you are in a child view, to show what things look like, and to test NavigationLinks, etc., but do not just put them in to your main code. It will lead to undesirable outcomes.
To summarize what worked to fix the primary problem, that of formatting: The key was in figuring what to encapsulate within the NavigationView. My mistake was to assume that only the NavigationLink needed to be in the NavigationView.
What worked was to place all the contents of the body into the NavigationView, like below:
var body: some View {
NavigationView {
VStack(spacing: -10) {
Text(appName)
.font(.largeTitle)
.foregroundColor(.blue)
.padding(.bottom)
// ...
// includes a bunch of VStacks and HStacks
// ... and finally
NavigationLink(destination: SettingsView()) {
Image(systemName: "gear")
.foregroundColor(.gray)
.font(.title)
// ... more stuff
// ... and finally
}.padding(.top, -100) // NavigationView
} // body
I have a horizontal ScrollView on top of a MapView.
The ScorllView is a collection of Buttons. It is weird that the buttons in the ScrollView are sometime tapable and sometimes not. First tap always works but after that I have to scroll a bit, tap around different areas in the button, make some secret prayers and then it works!
I tried disabling/removing all other components in the view, but still unable to figure out the root cause.
Has anyone experience this ?
I stuck with a same issue with horizontal ScrollView on top and List. While debugging I added empty .onTapGesture to ScrollView and it somehow fix my issue.
VStack(spacing: 0) {
ScrollView(.horizontal) {
HStack {
Button("one") {}
Button("two") {}
Button("three") {}
}
}
.onTapGesture { // <---- fix
}
List {
}
}
I also faced the same issue for Horizontal Scroll view in Swiftui dark theme "CameraTimerItem" buttons not clickable (Problem with dark theme only). Then I put a onTapGesture without any action. It's starts to work normally. I think it's a error of SwiftUI.
VStack (alignment:.center){
ScrollView(.horizontal, showsIndicators: false) {
HStack{
ForEach(timeSlots,id: \.self) { item in
CameraTimerItem(cellTitle: item)
}
}
.frame(width: AppUtils.width, alignment: .center)
}
.onTapGesture {
// <---- This is the solution
}
}
To anyone else having this issue, instead of adding an empty .onTapGesture view modifier, check that any HStacks in the ScrollView hierarchy have a .contentShape(Rectangle()) modifier. By default, HStacks don't accept taps in between their child views, and depending on your child view's layout this can cause taps to be missed even when it looks like they should be landing. .contentShape(Rectangle()) makes the entire frame of the HStack tappable.
I use the following code to create a Link with only an image (no text) and to add a hoverEffect:
Link(destination: URL(string: webURL)!, label: {
Image("Home", bundle: Bundle.module)
.resizable()
.renderingMode(.template)
.frame(width: 30, height: 30)
.aspectRatio(contentMode: .fit)
.padding(6)
.contentShape(RoundedRectangle(cornerRadius: 5, style: .continuous))
.hoverEffect(.highlight)
})
The hoverEffect causes the link to ignore the first tap. The user must double tap to activate the link. Has any one else sen this behavior and if so, what do I need to do to activate the link on the first tap?
Solved: If I move the last 3 lines out of the Image and onto the Link, all works well.
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)
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