#stackview

ios 에서 swift로  stackview 를 programmatically 사용 방법 설명

 So, after completely failing last time to actually implement the list of non-timed out numbers last time, that is the sole purpose of today's post. The way I've decided to implement this is to have stacks within stacks. stack-ception if you will!

So, I'm thinking to have all of the numbers displayed on the screen at all times in 2 rows of 5. Once the counter has timed out on a certain number, change that number to an ‘X’. Hopefully, it’ll be quick and easy to see exactly which numbers have timed out and which haven't - adding the strategy element to the game.

My plan is to have 2 horizontal stacks containing the numbers 1-5 and 6-10 receptively, and have these contained with a vertical stack. 

I created the first horizontal stack by simply dragged the Object Library, then 5 imageViews and arranging them in the left-hand menu as shown below:

For each imageView, I added the appropriate number (I reused the numbers from the counter) and set the stackView distribution to fill equally and each of the imageViews to Aspect Fit.

I then repeated this process with a second Horizontal stack for numbers 6 - 10, using the same settings as above.

For some reason, the ‘score’ label wasn't showing up in the preview, however on both my iPhone and the emulator it appears.

Next thing to do is to implement the ‘timed out’ number system. To do this, I added each imageView as an IBOutlet so that I can then manipulate the image via the code. 

In the newGame function, I then added the following code for each of the timed out numbers so that they would reset back to their original after each game:

self.timer1.image = UIImage(named: “timer1″)

I amended the numbersLeft function as follows, so that whatever the holdingValue is equal to, that number in the list gets swapped for an ‘X’

This now works as expected, the timed out numbers reset after the game has finished and they cross themselves off as the player progresses through the game.

As I was testing the game at this point, I noticed a few minor bugs and a major one. The minor bugs were to do with the images being displayed. I had misspelt ‘timer7green’ as ‘timergreen7′ so the green timer wasn't being called to appear. Also, with the timedout numbers, I hadn’t told timer 1 to change to timerX, so again this wasn't being displayed. 

Whilst they were easy to fix, I had another major problem. If the count was going to 7 for example, and you pressed stop on 7, the score would increase by 7, however, the ‘X’ would still appear. 

From my understanding, it is because of the numberChange function. When I'm in the function it has already called itself again on delay, so, when it repeats itself the IF equal to X condition kicks in running the endOfTurnX function.

I came up with a solution by moving the “&& hasStopBtnPressed == false” condition to a new IF statement, with everything inside it. The ELSE part of the IF statement is simply to run the endOfTurnStop function.

You can see everything working in the video below.