Looking for help with Xcode....

[Phil6681]

Hey everyone,

I have some problems with mental maths.... So I had the idea to create an App that is kind of like cue cards, just that its an App on your phone instead of cards. I already have a layout plan and I have started creating the app design- and buttonwise in Xcode but I do need some help codewise since i have no clue of programming. As far as I can tell from watching YT tutorials () it shouldn´t be a huge projekt since I should only need the calculator functions and the randomizer functions implemented. but I´d rather do it with someone who knows what he´s doing unlike me.... So I would be very glad if someone could look over my idea and maybe help me.

[Sargon]

It's really hard to make apps or implement your ideas when you don't know how to code.

Artists struggle when they want to make a game they always need to rely on a coder.

 

You probably should learn how to code yourself.

There are videos in iTunes by Apple about Swift, the programming language of xcode.

Alternatively, you could also try Unity with xcode, though the GUI there is less developed than in the xcode designer.

[Umberto]

Any progress? Here's how you start.

 

Open Xcode and go to file > new > project. Select iOS and "Single View App". Name your project and choose where to save it. 

 

Xcode has now created the project for you with a bunch of different files, but the only one that really matters for now is ContentView which is the root view. Currently it looks like this:

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

In the preview to the right of the screen, you'll see a preview of your app and it will display the text "Hello, World!". Unsurprisingly, its this line of code that produces that output: 

Text("Hello, World!")

Now then, change the code in ContentView.swift to this:

import SwiftUI

struct ContentView: View {
    @State var x = 10
    @State var y = 5
    @State var showAnswer = false
    var body: some View {
        VStack {
            Text("\(x) * \(y) = ?")
            HStack {
                Button(showAnswer ? "Hide Answer" : "Show Answer", action: {
                    self.showAnswer.toggle()
                    
                })
                Button("Next Problem", action: {
                    self.x = Int.random(in: 1...12)
                    self.y = Int.random(in: 1...12)
                    self.showAnswer = false
                })
            }
            
            if showAnswer {
                Text("\(x * y)")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Let's go through what the code does. 

 

This creates three variables: x, y and showAnswer. x and y are integers with an initial value of 10 and 5, respectively, and showAnswer is a boolean set to false. Why we need "@State" in front of the variable declaration is not something you need to care about for now. 

@State var x = 10
@State var y = 5
@State var showAnswer = false

 

Just like "Hello, World!" displays that text, "\(x) * \(y) = ?" displays "10 * 5 = ?". \() is a way to escape the value of a variable and convert it to a string. If we didn't escape the values and only did "x * y = ?" we would display the text "x * y = ?" instead of the values of x and y. 

Text("\(x) * \(y) = ?")

 

There are two components to a button: what it does, and what it looks like. This button:

Button(showAnswer ? "Hide Answer" : "Show Answer", action: { self.showAnswer.toggle() })

Displays the text "Show Answer" when the variable showAnswer is false. if showAnswer is true, it will display the text "Hide Answer". The way it's written is called Ternary Conditional Operator and uses the format: question ? action if true : action if false. See the link. The next part of the button is its action which toggles the showAnswer variable.

 

The next button:

Button("Next Problem", action: {
	self.x = Int.random(in: 1...12)
	self.y = Int.random(in: 1...12)
	self.showAnswer = false 
})

 Displays the text "Next Problem" and performs the following actions: 

• Sets the x variable to a random integer between the values 1 and 12
• Sets the y variable to a random integer between the values 1 and 12
• Sets the showAnswer variable to false

This code calculates and displays the answer x * y, but only if the variable showAnswer is true

if showAnswer {
	Text("\(x * y)")
}

Lastly, VStack and HStack stands for Vertical Stack and Horizontal Stack, and arranges its content (child views) in a vertical line, and horizontal line, respectively. The view structure of our app is:

VStack {
    Text()
    HStack{
        Button() Button()
    }
    Text()
}

Which means that we stack three views vertically: a Text, an HStack and then another Text. Within the HStack we place two buttons, and they will be placed side by side because they are in a horizontal stack. 

 

Play around with the code and see what happens. Change the code to calculate the sum instead of the product. Change to code to calculate the product of two random integers between 1 and 10 instead of 1 and 12. And so on. You'll get the hang of it.