Newbie here, need some help for slidable horizontal button collection - ios

I'm an utter and complete beginner to Xcode. I've joined this app developer internship, but they are implementing a self directed learning approach for our assignments and I am completely swamped. I have never done any kind of coding before, so I was hoping to get some answers here.
Here's the code:
import SwiftUI
struct ContentView: View {
#State private var didTap:Bool = false
var body: some View {
VStack {
HStack(spacing:320){
Button(action: {
didTap = !didTap
}
){
VStack {
Text("12").font(.largeTitle)
.foregroundColor(didTap ? Color.white : Color.black)
.fontWeight(.bold)
Text("Monday").font(.system(size: 11))
.foregroundColor(didTap ? Color.white : Color.black)
}.frame(width: 70, height: 80, alignment: .center)
.background(didTap ? Color.gray: Color.white)
.cornerRadius(20)
.shadow(color: .gray, radius: 5, x: 0, y: 6)
}
Text("")
}.background(.red)
Button {
self.didTap = true
} label: {
VStack {
Text("12").font(.largeTitle)
.foregroundColor(.black)
.fontWeight(.bold)
Text("Monday").font(.system(size: 11))
.foregroundColor(.black)
}.frame(width: 70, height: 85, alignment: .center)
.background(.white)
.background(didTap ? Color.blue : Color.yellow)
.cornerRadius(20)
.shadow(color: .gray, radius: 5, x: 0, y: 6)
}
ColorPicker(/*#START_MENU_TOKEN#*/"Title"/*#END_MENU_TOKEN#*/, selection: /*#START_MENU_TOKEN#*/.constant(.red)/*#END_MENU_TOKEN#*/)
.padding(.trailing,180)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
This is my app's home page design
Home page
And this is what I've got so far
After hours of trying and reading
My app is a simple reminder app. There are a lot to work on but I'm trying to make a collection view comprised of buttons that show the dates in a user's current week. If you click the buttons, the date along with the reminders will change to reflect the selected date. You are also supposed to be able to swipe left or right to change into the previous / next weeks.
Appreciate any kind of feedback since I am such a moron when it comes to these kinds of tech-y stuff.

Related

How can I adjust this using the new NavigationStack or even just adjusting the NavigationLink using value/label instead? Need to fix double 'back'

I am trying to 'remove' the previous views after navigating more than 2 tabs away from the 'ContentView'. Currently, I am running into double 'back' options. One will take me back 1 view and the other will take me back to my 'ContentView'. I am brand new to swiftUI and coding in general so any help is greatly appreciated and I am sorry if this is a super simple question that feels way overcomplicated in my head.
struct ContentView: View {
#State private var selectedView: Int? = nil
var body: some View {
NavigationView {
VStack(spacing: 50) {
Spacer()
NavigationLink(destination: CustomizePlayerView(), tag: 0, selection: $selectedView) {
Button(action: {
self.selectedView = 0
}) {
Text("Start New Career")
.foregroundColor(.white)
.frame(width: 200, height: 50)
.background(Color.orange)
.cornerRadius(15)
}
}
NavigationLink(destination: LoadGameView(), tag: 1, selection: $selectedView) {
Button(action: {
self.selectedView = 1
}) {
Text("Load Saved Career")
.foregroundColor(.white)
.frame(width: 200, height: 50)
.background(Color.orange)
.cornerRadius(15)
}
}
Spacer()
}
.padding(.horizontal, 400)
.background(Image("Image")
.resizable()
.frame(width: 900, height: 400))
.edgesIgnoringSafeArea(.all)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
I am trying to have a single 'Back' option each time I navigate to the next view, but I ended up stacking these and also used destination/tag for my NavigationLink which I see is deprecated so I am trying to understand the alternative options Value/Label and how they can be applied.

Trying to implement a swipeable week view just like Apple Calendar default app

I want to have something similar to the default Apple Calendar week view. When swiping to the next/previous week, the action is looking like a scroll but I personally don't think they are holding all these weeks in the memory.. Also the week is always centered after ending scroll action.
How can I update to display the previous/next week days when swiping/dragging from that week view?
So this is my HomeTabView.
struct HomeTabView: View {
#Namespace var animation
#EnvironmentObject var workoutManager: WorkoutManager
#EnvironmentObject var dateModel: DateModel
init() {
UITabBar.appearance().isHidden = true
}
var body: some View {
GeometryReader { geometry in
ScrollView(.vertical, showsIndicators: false) {
LazyVStack(spacing: 10, pinnedViews: [.sectionHeaders]) {
Section {
//MARK: - Week View
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 4) {
ForEach(dateModel.currentWeek, id: \.self) { day in
VStack() {
Text(dateModel.extractDate(date: day, format: "dd"))
.font(.system(size: 15))
.fontWeight(.semibold)
Text(dateModel.extractDate(date: day, format: "EE"))
.font(.system(size: 14))
Circle()
.fill(dateModel.isToday(date: day) ? .white : .black)
.frame(width: 8, height: 8)
.opacity(workoutManager.hasWorkouts(for: dateModel.extractDate(date: day, format: "dd/MM/yyy")) ? 1 : 0)
}
.foregroundStyle(dateModel.isToday(date: day) ? .primary : .tertiary)
.foregroundColor(dateModel.isToday(date: day) ? .white : .black)
.frame(width: (geometry.size.width - 32) / 7, height: geometry.size.width / 7 * 1.5)
.background (
ZStack {
if dateModel.isToday(date: day) {
Capsule()
.fill(.black)
.matchedGeometryEffect(id: "CURRENTDAY", in: animation)
}
}
)
.contentShape(Capsule())
.onTapGesture {
withAnimation {
dateModel.currentDay = day
}
}
}
}
.padding(.vertical, 5)
.frame(maxWidth: .infinity)
.frame(minWidth: geometry.size.width)
.background(
GeometryReader { parentGeometry in
Rectangle()
.fill(Color(UIColor.systemGray2))
.frame(width: parentGeometry.size.width, height: 0.5)
.position(x: parentGeometry.size.width / 2, y: parentGeometry.size.height)
}
)
}
WorkoutsView()
} header: {
HeaderView()
}
}
}
.frame(maxHeight: .infinity)
}
.clipped()
}
}
Currently the week view is implemented as a HStack in a ScrollView, but I personally have no idea how to handle the implementation using these 2.
DateModel is responsible for keeping track of current week days and current day while WorkoutManager is handling the workouts while holding them in a [String: [Workout]] type dictionary. The key is date formatted like "25/05/2022" (tried to use Date type as key but as far as I know this is not Hashable and have no idea how to make it hashable, while Workout struct has only a title for now.
Home tab as seen while not swiping through week view
Current scroll/swipe/drag gesture.
I would suggest you to take help from third party library CalendarKit or you can integrate the same directly into your project. CalendarKit
I hope this would work out for your objective.

SwiftUI combine views with Stack

I am trying to create a design like this using text and image in a ZStack but my current implementation isn't showing the text at all, and I don't know why
ZStack {
Text("15")
.frame(alignment: .topTrailing)
.cornerRadius(10)
Image(systemName: agree ? "hand.thumbsup" : "hand.thumbsdown")
.frame(width: 40, height: 40)
.foregroundColor(agree ? .green : .red)
.background(.gray)
.cornerRadius(8)
}
In a ZStack, the views are stacked on the Z axis with the first defined views at the "bottom" of the stack. So, your text is currently covered up by the image, which is higher up on the stack. I've fixed this and added an offset to move the text to the top right, which also wasn't working in your code.
struct ContentView: View {
#State private var agree = true
var body: some View {
ZStack(alignment: .topTrailing) {
Image(systemName: agree ? "hand.thumbsup" : "hand.thumbsdown")
.frame(width: 60, height: 60)
.foregroundColor(agree ? .green : .red)
.background(.gray)
.cornerRadius(8)
Text("15")
.foregroundColor(Color.green)
.padding(6)
.background(
Circle()
.strokeBorder(Color.green, lineWidth: 2)
.background(Circle().foregroundColor(.white))
)
.offset(x: 10, y: -10)
}
}
}

Swift iOS adapt font size to frame

I am trying to adapt the font size of a text element whose length varies greatly so that it fills the whole frame where it is located and no word needs to be truncated (in a iOS app). In the screenshot below, I would like the sentence to reach the buttons at the bottom of the screen.
Please find below the structure of my code. I have seen a few threads on SO dealing with this issue, but I have not been able to replicate the solution, because of my poor skills in Swift... If someone were so kind as to give me a detailed explanation of what lines of code should be inserted and where to place them, I'd be very grateful!
I have tried to adjust the font size so to say manually, by incrementing or decrementing it via a function according to the length of the string that Text receives as its argument, but it only yielded a mess, because long words need their own separate line, which mars my computation.
With thanks,
Julien
import SwiftUI
import AVKit
import UIKit
import AVFoundation
import Foundation
import CoreServices
import CoreData
import MediaPlayer
struct ContentView: View {
// Various functions
#State var audioPlayer: AVAudioPlayer!
var body: some View {
VStack {
var currentSentence = "string of variable length, could be a long or a very short sentence"
Text(currentSentence) // the variable currentSentence contains a string whose length varies greatly
.font(.system(size: 40, weight: .light, design: .serif))
HStack {
Spacer()
// Play button
Button(action: {
// Action
}) {
Image(systemName: "play.square.fill").resizable()
.frame(width: 150.0, height: 200.0, alignment: .bottom)
}
.frame(maxHeight: .infinity, alignment: .bottom)
Spacer()
// Pause button
Button(action: {
// Action
}){
Image(systemName: "square.slash").resizable()
.frame(width: 150.0, height: 200.0)
.aspectRatio(contentMode: .fill)
}
.frame(maxHeight: .infinity, alignment: .bottom)
Spacer()
}
}
.frame(
minWidth: 0,
maxWidth: .infinity,
minHeight: 0,
maxHeight: .infinity,
alignment: .topLeading
)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
You need to use .minimumScaleFactor on the text and set the text font to the maximum.
struct ContentView: View {
var body: some View {
VStack (spacing: 0) {
var currentSentence = "string of variable length, could be a long or a very short sentence"
Text(currentSentence)
.font(.system(size: 100, weight: .light, design: .serif))
.minimumScaleFactor(0.1)
Spacer()
HStack (alignment: .bottom, spacing: 0) {
Spacer()
// Play button
Button(action: {
// Action
}) {
Image(systemName: "play.square.fill").resizable()
.frame(width: 150.0, height: 200.0, alignment: .bottom)
}
Spacer()
// Pause button
Button(action: {
// Action
}){
Image(systemName: "square.slash").resizable()
.frame(width: 150.0, height: 200.0)
.aspectRatio(contentMode: .fill)
}
Spacer()
}
}
.edgesIgnoringSafeArea([.bottom])
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView()
}
}
}
In some cases there might be little bit space between text and buttons, It means new line with bigger font can't fit there.

How to implement a draggable bar like the iPad built-in application Map's?

I'm working with an iPad application using SwiftUI. Now I have a MenuView Stacked on a MapView. The MenuView is supposed to imitate the iPad built-in app Map's menu. Now I'm puzzling about how to implement the draggable bar to adjust the height of the MenuView. I have implemented a clumsy one(code attached below), and it's also stuttered and frame-dropping. I'm wondering if there is already a ready-to-use widget in SwiftUI, because both the Map and iPadOS's floating mini-keyboard have similar things (pictures attached below). Or is there any good ways to implement it? I would appreciate it if you could give me some advice :)
My implementation:
// MenuView.swift
struct MenuView: View {
#Binding var menu_height: CGFloat
var bottom_slider: some View {
ZStack {
Rectangle()
.fill(Color.white)
.opacity(0.011)
.frame(width: 400, height: 28, alignment: .center)
.edgesIgnoringSafeArea(.all)
.padding(.top,-5)
RoundedRectangle(cornerRadius: 25)
.fill(Color.gray)
.frame(width: 100, height: 6, alignment: .center)
.padding(.bottom, 4)
.opacity(0.6)
}
}
var body: some View {
VStack{
//...
//...
//...
}
ScrollView{
//...
//...
//...
}
bottom_slider
.frame(height: 20, alignment: .center)
.gesture(DragGesture().onChanged({ value in
let a = self.menu_height + (value.location.y - value.startLocation.y)
if a<150 {
self.menu_height = 150
} else if a>750{
self.menu_height = 750
} else {
self.menu_height = a
}}))
}
}
// ContentView.swift
struct ContentView: View {
#State var munu_height : CGFloat = 400
var body: some View {
ZStack {
MyMapView(...)
.edgesIgnoringSafeArea(.all)
MenuView(menu_height: $menu_height, ...)
.padding(.horizontal, 10.0)
.frame(width: 400, height: height)
.background(BlurView(colorScheme: colorScheme))
.clipShape(RoundedRectangle(cornerRadius: 15))
.shadow(radius: 8)
.offset(x: 10, y:10)
}
}
}
My implementation pic:
Built-in Map application:
The iOS floating keyboard:

Resources