*BONUS ENTRY* SwiftUI Mini Project - Part 1

A whole week! Not good! I have my reasons - busy weekend and another inspection...plus the run up to the end of term...along with other things. So first chance to code in a while! Today, I am going to spend around an hour just trying out SwiftUI with a very simple mini-project - F1 driver facts. This is not to try making an app to sell or anything long term. Just something that is functional and lets me try out some SwiftUI features. 

Start Time - 19:12

First of all, I need to map out the purpose of the project and what I need - what features of SwiftUI.

Purpose - to find out about F1 drivers.

Features:

Pictures of drivers (standard size)
Toggle view to swipe between them
Information about the drivers - championships, races, wins, mini bio

OK what is needed for this simple project?

Class of driver so all the info is contained together
Pictures (need to get all portrait)
Info (can look up)
Toggle view and a H Stack of these.
Loop (for each)

How to do this? Well first step is to check back to the project I did before from Laurie's Course...


Paused at 19:21 (saving images and resizing so that they are all same size)

 Restart at 20:27

OK all images resized, then done as the x1, x2, x3 etc. Good!

Now to create the Struct for the driver pics and details....

OK, using the book struct from before, I've adapted that for F1 drivers...

import SwiftUI

struct Driver: Identifiable {
  var id = UUID()
  var name: String
  var imageName: String
    var wins: Int
    var championships: Int
}

extension Driver {
  static let f1Drivers = [
    Driver(name: "Alain Prost", imageName: "AP", wins: 51, championships: 4),
    Driver(name: "Ayrton Senna", imageName: "AS", wins: 41, championships: 3),
    Driver(name: "Damon Hill", imageName: "DH", wins: 22, championships: 1),
    Driver(name: "Fernando Alonso", imageName: "FA", wins: 32, championships: 2),
    Driver(name: "Felipe Massa", imageName: "FM", wins: 11, championships: 0),
    Driver(name: "Kimi Raikkonen", imageName: "KR", wins: 21, championships: 1),
    Driver(name: "Mika Hakkinen", imageName: "MH", wins: 20, championships: 2),
    Driver(name: "Michael Schumacher", imageName: "MS", wins: 91, championships: 7),
    Driver(name: "Sebastian Vettel", imageName: "SV", wins: 53, championships: 4)
  ]

}

Next step is to make the toggle view on the main content view...

Right! So using ideas from Laurie (of course) here's what we have...

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            
            HStack {
                ForEach(Driver.f1Drivers) {  driver in
                    
                    GeometryReader { proxy in
                                           
                                           VStack {
                           Text(driver.name)
                                            Image(driver.imageName)
                        }
                    
                }
            }
            
            
        }
    }
}
    
}


But it's come up a mess!!


Let's just get the basics right with the properties, then that will do for now!

Right so I needed ALL of this code, along with a couple of other properties .resizable and another for the image. 

It is:

 .frame(width: max(proxy.size.width - proxy.frame (in: .global).midX, proxy.size.width) , height: proxy.size.height - 50)
                                                .background(
                                                    Image(driver.imageName)
                                                        
                                                        .resizable()
                                                        .scaledToFill()
                                                        .overlay(Color.blue)
                                                        
                                                        .blendMode(.multiply)
                                                        .blur(radius: 1)
                                                    
                                                )
                                                    
                                                    .cornerRadius(10)
                                                    .padding()
                                                    .shadow(radius: 3)
                                                    
                                                    .layoutPriority(1)
                                                    
                                                    .rotation3DEffect(Angle(degrees: Double(proxy.frame(in: .global).midX) / 40), axis: (x: -4, y: -3, z: -3))
                                            }
                                            .frame(width: 200, height: 300)
                                        }
                                    }
                                }
                                    
                                Spacer()
                                    .layoutPriority(1)
                                    
                            }
                                .background(Color.black)
                                .edgesIgnoringSafeArea(.all)
                             

Massive! But I will delve into all that a bit more next time. For now we've got a pretty cool thing!




Even better!

Finish Time - 21:05 (approx 45 minutes)

So most of that was copying and pasting to be honest. But it's good! It's just adapting some code to try to understand each aspect. Next time I will delve deeper and play around with the properties. Then the final step will be to add in the navigation bar bit, then bring up some info on each driver. 

Good experimenting!


Comments

Post a Comment

Popular posts from this blog

*Xcode Project Entry 2* F1 Quiz - part 1

Image
It's Christmas Eve and time to code! To think, a year ago, I was plodding along with some eBook, blindly convincing myself that I was on a steady road to coding greatness. Really, it was from June where I made the decision to start again, humbling as that may seem. It would have been comforting to have completed endless 'beginner' courses but branching out and applying the theory is the key thing, which brings us to this entry. Yes, my second Xcode OWN project! I thought about doing an educational one, as there is certainly a lot of scope and relevance for that, being a teacher and all. However, making a quiz makes sense, for various reasons.  First off, I have made this before through Angela's excellent tutorial. No offence to Sandra, but hers is not even close to the elegance and effectiveness of Angela's project. The one thing to take from Sandra is the stack views. Definitely something I will use from now on. This is one of the great things about learning from...
Read more

Angela Yu Course Part 10 (up to lesson 112)

Image
It's unlikely that I'll be able to do any Swift tomorrow as I'm going to Eastbourne today, for the weekend. So I can give half an hour now, maximum! Coding Challenge - Destini App! Choose your own adventure books! I used to ADORE these. Angela explains that these have had some sort of revival through the Lifeline games. It's very binary - yes/no mostly. I have my own experience of this based on WDC... Now the challenge is to complete the game! Having followed the first few instructions, which I found a bit confusing it must be said, I was about to surrender and see the answer. Then I managed to stop myself - I CAN do this, or at least have a good go! Even if I don't get the correct answer, it will be good practice to put what I know into practice. This is my weakness, which I keep coming back to - that when some problem solving is required, I fold far too quickly. So here is what I need to do: Let's break this down... I need to use the...
Read more

Angela Yu Xcode 12 Course - Part 7 (lectures 74 to 79)

Image
No time to waste! Only got a short amount of time now so going to get a few minutes or so in! Start Time - 20:14 Conditionals If statement for 'love calculator' example. So a simple example for this. The idea will be that conditionals are used to show that the print statement will do it differently for whatever the number is. With updated Swift, I would use the Int.random(0...100). Easy fix that would be. Also no UIInt32 needed but just an Int. So with the if statements, it would be a STRING being returned.   Linked to the whole choose your own adventure - if/else for each choice. BMI Challenge No need to do this - easy enough to be honest. Just skimming through. BODMAS principles... So something I picked up on before is not needing the greater than AND less than value for the middle line (for the else if bmi > 18.5) A better solution, which Angela is already explaining before I could say it is returning a string instead of a Double. So the...
Read more