I have a group of buttons that behave like a segmented picker. As you tap a button, it updates an enum in state. I'd like to show an indicator on top that runs between buttons instead of show/hide.
This is what I have:
struct ContentView: View {
enum PageItem: String, CaseIterable, Identifiable {
case page1
case page2
var id: String { rawValue }
var title: LocalizedStringKey {
switch self {
case .page1:
return "Page 1"
case .page2:
return "Page 2"
}
}
}
#Namespace private var pagePickerAnimation
#State private var selectedPage: PageItem = .page1
var body: some View {
HStack(spacing: 16) {
ForEach(PageItem.allCases) { page in
Button {
selectedPage = page
} label: {
VStack {
if page == selectedPage {
Rectangle()
.fill(Color(.label))
.frame(maxWidth: .infinity)
.frame(height: 1)
.matchedGeometryEffect(id: "pageIndicator", in: pagePickerAnimation)
}
Text(page.title)
.padding(.vertical, 8)
.padding(.horizontal, 12)
}
.contentShape(Rectangle())
}
}
}
.padding()
}
}
I thought the matchedGeometryEffect would help do this but I might be using it wrong or a better way exists. How can I achieve this where the black line on top of the button animates over one button and moves over the other?
You missed the animation:
struct ContentView: View {
#Namespace private var pagePickerAnimation
#State private var selectedPage: PageItem = .page1
var body: some View {
HStack(spacing: 16) {
ForEach(PageItem.allCases) { page in
Button { selectedPage = page } label: {
VStack {
if page == selectedPage {
Rectangle()
.fill(Color(.label))
.frame(maxWidth: .infinity)
.frame(height: 1)
.matchedGeometryEffect(id: "pageIndicator", in: pagePickerAnimation)
}
Text(page.title)
.padding(.vertical, 8)
.padding(.horizontal, 12)
}
.contentShape(Rectangle())
}
}
}
.padding()
.animation(.default, value: selectedPage) // <<: here
}
}
enum PageItem: String, CaseIterable, Identifiable {
case page1
case page2
var id: String { rawValue }
var title: LocalizedStringKey {
switch self {
case .page1:
return "Page 1"
case .page2:
return "Page 2"
}
}
}
Related
Progress View doesn't show on second + load when trying to do pagination. When I scroll to the bottom the progress view will appear once. But all the other times it doesn't. This only seems to occur when im using some sort of animation.
If I just have a static text like "Loading..." it works as expected. I added the section group where it checks a condition to verify if it should be presented or not. Not sure if I'm supposed to use something like "stop animating" like the loading indicator has in UIKit
struct ContentView: View {
#State var movies: [Movie] = []
#State var currentPage = 1
#State private var isLoading = false
var body: some View {
NavigationView {
List {
Section {
} header: {
Text("Top Movies")
}
ForEach(movies) { movie in
HStack(spacing: 8) {
AsyncImage(url: movie.posterURL, scale: 5) { image in
image
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 100)
.cornerRadius(10)
} placeholder: {
ProgressView()
.frame(width: 100)
}
VStack(alignment: .leading, spacing: 10) {
Text(movie.title)
.font(.headline)
Text(movie.overview)
.lineLimit(5)
.font(.subheadline)
Spacer()
}
.padding(.top, 10)
}
.onAppear {
Task {
//Implementing infinite scroll
if movie == movies.last {
isLoading = true
currentPage += 1
movies += await loadMovies(page: currentPage)
isLoading = false
}
}
}
}
Section {
} footer: {
if isLoading {
HStack {
Spacer()
ProgressView()
.tint(.green)
Spacer()
}
} else {
EmptyView()
}
}
}
.navigationTitle("Movies")
.navigationBarTitleDisplayMode(.inline)
.listStyle(.grouped)
.task {
movies = await loadMovies()
}
.refreshable {
movies = await loadMovies()
}
}
}
}
even when I look at the view hierarchy its like the progress view square is there but the icon / loading indicator isn't showing:
If I add the overlay modifier it works but I don't like doing this because when I scroll back up before the content finishes loading the spinner is above the list view:?
.overlay(alignment: .bottom, content: {
if isLoading {
HStack {
Spacer()
ProgressView()
.tint(.green)
Spacer()
}
} else {
EmptyView()
}
})
We also had this problem, we think it is a bug of ProgressView. Our temporary correction is to identify the ProgressView with a unique id in order to render it again.
struct ContentView: View {
#State var id = 0
var body: some View {
ProgressView()
.id(id)
.onAppear {
...
id += 1
}
}
}
I'm trying to splice some code I found into a current SwiftUI view I have.
Basically, I want to make my segmented picker have colors that correspond to priority colors in a to-do list view.
Here is the sample code for the colored segmented picker. (Taken from HWS)
import SwiftUI
enum Colors: String, CaseIterable{
case red, yellow, green, blue
func displayColor() -> String {
self.rawValue.capitalized
}
}
struct TestView: View {
#State private var selectedColor = Colors.red
var body: some View {
Picker(selection: $selectedColor, label: Text("Colors")) {
ForEach(Colors.allCases, id: \.self) { color in
Text(color.displayColor())
}
}
.padding()
.colorMultiply(color(selectedColor))
.pickerStyle(SegmentedPickerStyle())
}
func color(_ selected: Colors) -> Color {
switch selected {
case .red:
return .red
case .yellow:
return .yellow
case .green:
return .green
case .blue:
return .blue
}
}
}
struct TestView_Previews: PreviewProvider {
static var previews: some View {
TestView()
}
}
Then, here is the (complete because I don't have the chops to make MRE's yet– I'm still learning) code for the to-do list view (Taken from YouTube– I can't remember the creator's name, but I'll post it below once I find it again.):
import SwiftUI
enum Priority: String, Identifiable, CaseIterable {
var id: UUID {
return UUID()
}
case one = "Priority 1"
case two = "Priority 2"
case three = "Priority 3"
case four = "Priority 4"
}
extension Priority { //"priority.title"
var title: String {
switch self {
case .alloc:
return "Priority 1"
case .aoc:
return "Priority 2"
case .charting:
return "Priority 3"
case .clinical:
return "Priority 4"
}
}
}
struct ToDoView: View {
#State private var title: String = ""
#State private var selectedPriority: Priority = .charting
#FocusState private var isTextFieldFocused: Bool
#Environment(\.managedObjectContext) private var viewContext
#FetchRequest(entity: Task.entity(), sortDescriptors: [NSSortDescriptor(key: "dateCreated", ascending: true)]) private var allTasks: FetchedResults<Task>
private func saveTask() {
do {
let task = Task(context: viewContext)
task.title = title
task.priority = selectedPriority.rawValue
task.dateCreated = Date()
try viewContext.save()
} catch {
print(error.localizedDescription)
}
}
private func styleForPriority(_ value: String) -> Color {
let priority = Priority(rawValue: value)
switch priority {
case .one:
return Color.green
case .two:
return Color.red
case .three:
return Color.blue
case .four:
return Color.yellow
default:
return Color.black
}
}
private func updateTask(_ task: Task) {
task.isFavorite = !task.isFavorite
do {
try viewContext.save()
} catch {
print(error.localizedDescription)
}
}
private func deleteTask(at offsets: IndexSet) {
offsets.forEach { index in
let task = allTasks[index]
viewContext.delete(task)
do {
try viewContext.save()
} catch {
print(error.localizedDescription)
}
}
}
var body: some View {
NavigationView {
VStack {
TextField("Enter task...", text: $title)
.textFieldStyle(.roundedBorder)
.focused($isTextFieldFocused)
.foregroundColor(Color(UIColor.systemBlue))
.modifier(TextFieldClearButton(text: $title))
.multilineTextAlignment(.leading)
Picker("Type", selection: $selectedPriority) {
ForEach(Priority.allCases) { priority in
Text(priority.title).tag(priority)
}
}.pickerStyle(.segmented)
Button("Save") {
saveTask()
}
.padding(10)
.frame(maxWidth: .infinity)
.background(Color.blue)
.foregroundColor(.white)
.clipShape(RoundedRectangle(cornerRadius: 10.0, style: .continuous))
List {
ForEach(allTasks) { task in
HStack {
Circle()
.fill(styleForPriority(task.priority!))
.frame(width: 15, height: 15)
Spacer().frame(width: 20)
Text(task.title ?? "")
Spacer()
Image(systemName: task.isFavorite ? "checkmark.circle.fill": "circle")
.foregroundColor(.red)
.onTapGesture {
updateTask(task)
}
}
}.onDelete(perform: deleteTask)
}
Spacer()
}
.padding()
.navigationTitle("To-Do List")
.toolbar {
ToolbarItemGroup(placement: .keyboard) {
Spacer()
Button(action: {
isTextFieldFocused = false
}) { Text("Done")}
}
}
}
}
}
I have an HStack of circles in SwiftUI, and the number of circles is determined based on the length of an array, like this:
#State var myArr = [...]
...
ScrollView(.horizontal) {
HStack {
ForEach(myArr) { item in
Circle()
//.frame(...)
//.animation(...) I tried this, it didn't work
}
}
}
Then I have a button that appends an element to this array, effectively adding a circle to the view:
Button {
myArr.append(...)
} label: {
...
}
The button works as intended, however, the new circle that is added to the view appears very abruptly, and seems choppy. How can I animate this in any way? Perhaps it slides in from the side, or grows from a very small circle to its normal size.
You are missing transition, here is what you looking:
struct ContentView: View {
#State private var array: [Int] = Array(0...2)
var body: some View {
ScrollView(.horizontal) {
HStack {
ForEach(array, id:\.self) { item in
Circle()
.frame(width: 50, height: 50)
.transition(AnyTransition.scale)
}
}
}
.animation(.default, value: array.count)
Button("add new circle") {
array.append(array.count)
}
Button("remove a circle") {
if array.count > 0 {
array.remove(at: array.count - 1)
}
}
}
}
a version with automatic scroll to the last circle:
struct myItem: Identifiable, Equatable {
let id = UUID()
var size: CGFloat
}
struct ContentView: View {
#State private var myArr: [myItem] = [
myItem(size: 10),
myItem(size: 40),
myItem(size: 30)
]
var body: some View {
ScrollViewReader { scrollProxy in
VStack(alignment: .leading) {
Spacer()
ScrollView(.horizontal) {
HStack {
ForEach(myArr) { item in
Circle()
.id(item.id)
.frame(width: item.size, height: item.size)
.transition(.scale)
}
}
}
.animation(.easeInOut(duration: 1), value: myArr)
Spacer()
Button("Add One") {
let new = myItem(size: CGFloat.random(in: 10...100))
myArr.append(new)
}
.onChange(of: myArr) { _ in
withAnimation {
scrollProxy.scrollTo(myArr.last!.id, anchor: .trailing)
}
}
.frame(maxWidth: .infinity, alignment: .center)
}
.padding()
}
}
}
I created a simple collection with a button jump to the next View. From the last View there should be a transition to AddItemView, but it doesn't happen - it goes back to the first screen.
Can you tell me where I made a mistake?
What is the correct way to place the background Image on the first collection screen, so that it won't be on the following screens?
import SwiftUI
struct AddItemView: View {
var body: some View {
Text("Hallo!")
}
}
struct ContentView: View {
var colors: [Color] = [ .orange, .green, .yellow, .pink, .purple ]
var emojis: [String] = [ "👻", "🐱", "🦊" , "👺", "🎃"]
#State private var tabSelection = 0
var body: some View {
TabView(selection: $tabSelection) {
ForEach(0..<emojis.endIndex) { index in
VStack {
Text(emojis[index])
.font(.system(size: 150))
.frame(minWidth: 30, maxWidth: .infinity, minHeight: 0, maxHeight: 250)
.background(colors[index])
.clipShape(RoundedRectangle(cornerRadius: 30))
.padding()
.tabItem {
Text(emojis[index])
}
Button(action: {
self.tabSelection += 1
}) {
if tabSelection == emojis.endIndex {
NavigationLink(destination: AddItemView()) {
Text("Open View")
}
} else {
Text("Change to next tab")
}
}
}
}
}
.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
.tabViewStyle(PageTabViewStyle.init(indexDisplayMode: .never))
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
In this code, you have not to use NavigationView. It's required to navigate to the next screen. Similar concept like Push view controller if navigation controller exists. Also, remove endIndex and use indices.
struct ContentView: View {
var colors: [Color] = [ .orange, .green, .yellow, .pink, .purple ]
var emojis: [String] = [ "👻", "🐱", "🦊" , "👺", "🎃"]
#State private var tabSelection = 0
var body: some View {
NavigationView { //<- add navigation view
TabView(selection: $tabSelection) {
ForEach(emojis.indices) { index in //<-- use indices
VStack {
Text(emojis[index])
.font(.system(size: 150))
.frame(minWidth: 30, maxWidth: .infinity, minHeight: 0, maxHeight: 250)
.background(colors[index])
.clipShape(RoundedRectangle(cornerRadius: 30))
.padding()
.tabItem {
Text(emojis[index])
}
Button(action: {
self.tabSelection += 1
}) {
if tabSelection == emojis.count - 1 { //<- use count
NavigationLink(destination: AddItemView()) {
Text("Open View")
}
} else {
Text("Change to next tab")
}
}
}
}
}
.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
.tabViewStyle(PageTabViewStyle.init(indexDisplayMode: .never))
}
}
}
If you have already a navigation link from the previous screen then, the problem is you are using endIndex in the wrong way. Check this thread for correct use (https://stackoverflow.com/a/36683863/14733292).
It took me hours to construct this example, and I'm not sure if I am doing something wrong or there is a bug crashing the app when using matchedGeometry + LazyVStack.
In the video below the app crashed when I click on third rectangle (which was not visible when the app started). Crash disappears if I replace LazyVStack with VStack, but obviously I want to lazy load my things.
Xcode version: Version 12.0.1 (12A7300)
struct ContentView: View {
#Namespace var namespace
#State var selected: Int?
var body: some View {
ZStack {
VStack {
Text("Cool rectangles")
if selected == nil {
ScrollView(.vertical, showsIndicators: false) {
BoxList(namespace: namespace, selected: $selected)
}
}
}
if let id = selected {
Rectangle()
.foregroundColor(.red)
.matchedGeometryEffect(id: id, in: namespace)
.onTapGesture {
withAnimation{
selected = nil
}
}
}
}
}
}
struct BoxList: View {
let namespace: Namespace.ID
#Binding var selected: Int?
var body: some View {
LazyVStack {
ForEach(0..<10){ item in
Rectangle()
.matchedGeometryEffect(id: item, in: namespace)
.frame(width: 200, height: 200)
.onTapGesture {
withAnimation {
selected = item
}
}
}
}
}
}
The problem is that you destroy ScrollView breaking matched layout.
Here is fixed variant. Tested with Xcode 12 / iOS 14
struct ContentView: View {
#Namespace var namespace
#State var selected: Int?
var body: some View {
ZStack {
VStack {
Text("Cool rectangles")
ScrollView(.vertical, showsIndicators: false) {
BoxList(namespace: namespace, selected: $selected)
}.opacity(selected == nil ? 1 : 0)
} // << or place here opacity modifier here
if let id = selected {
Rectangle()
.foregroundColor(.red)
.matchedGeometryEffect(id: id, in: namespace)
.onTapGesture {
withAnimation{
selected = nil
}
}
}
}
}
}
struct BoxList: View {
let namespace: Namespace.ID
#Binding var selected: Int?
var body: some View {
LazyVStack {
ForEach(0..<10){ item in
if item == selected {
Color.clear // placeholder to avoid duplicate match id run-time warning
.frame(width: 200, height: 200)
} else {
Rectangle()
.matchedGeometryEffect(id: item, in: namespace)
.frame(width: 200, height: 200)
.onTapGesture {
withAnimation {
selected = item
}
}
}
}
}
}
}