UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

Project6: Borders not resizing properly

Forums > 100 Days of Swift

In Project6 we make a copy of Project2 (The "Guess the Flag" app) and add new constraints to the buttons in order to make them fit on the screen even when the device is rotated to landscape mode.

I followed the instructions, and it makes the flags fit on the screen, but the borders around each button do not resize properly along with the flags after the device is rotated.

I can still see the borders on each flag, but they are not around the edges. On the first button, the border is inset on all sides. On the second 2 buttons the borders are inset vertically, but not horizontally.

Does anybody know how to fix this?

We have only been taught to add the borders by adding code like this in our viewDidLoad() function

override func viewDidLoad() {

        navigationItem.rightBarButtonItem = UIBarButtonItem(barButtonSystemItem: .pause, target: self, action: #selector(showScore))

        countries += ["estonia", "france", "germany", "ireland", "italy", "monaco", "nigeria", "poland", "russia", "spain", "uk", "us"]

        button1.layer.borderWidth = 1
        button2.layer.borderWidth = 1
        button3.layer.borderWidth = 1

        button1.layer.borderColor = UIColor.lightGray.cgColor
        button2.layer.borderColor = UIColor.lightGray.cgColor
        button3.layer.borderColor = UIColor.lightGray.cgColor


So, I don't know of any way to modify them after the device orientation changes and the buttons are resized.


I have the same issue


Same, too.


If someone still experiences this issue please post a pic :) by checking the possibilities it might be the gray color mixes with flag borders making it seem as insetted or offsetted by small bit. Try to make the border thicker e.g. borderWidth = 2 Also if this is not the issue try to add ->


inside viewDidLoad()

setNeedsLayout() - this method informs the system that the current layout is invalid and it should be updated in the next drawing cycle. layoutIfNeeded() - this method asks the system to update the layout.

I have the same part of the code as posted above and it works fine. There are tiny insets visible in simulagtor but I suspect it is just how the color mixes with flag :)


Did anyone ever find a solution to this? I have the same problem.


Thanks @ygeras I tried that but it made things worse. When switching to landscape, the borders were all squeezed together at the top and the flags were no longer in line.


When button2.height = button1.height and button3.height = button2.height is not set button1 and button2 border is correctly positioned but button3 border are inside the flag. closest I reached to the soln: without height constraints closest I reached to the soln: without height constraints When button2.height = button1.height and button3.height = button2.height is set button1, button2, button3 borders are inside the flag. tutorial preview: with height constraints tutorial preview: with height constraints borderWidth = 2 and inside viewDidLoad():
view.setNeedsLayout() view.layoutIfNeeded() even tried ygeras' soln: even tried ygeras' soln nothing worked🥲


Finally found the Solution:

  • Change the button setting in attribute inspector for all the buttons

  • type should be custom (not System)

  • Style should be Default (not Plain) and remove any title text if given

  • text color default is white in type: custom (it was blue as default in type: System)

NOTE: if you have not changed the type then you will see all blue flags



TAKE YOUR SKILLS TO THE NEXT LEVEL If you like Hacking with Swift, you'll love Hacking with Swift+ – it's my premium service where you can learn advanced Swift and SwiftUI, functional programming, algorithms, and more. Plus it comes with stacks of benefits, including monthly live streams, downloadable projects, a 20% discount on all books, and free gifts!

Find out more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

Unknown user

You are not logged in

Log in or create account

Link copied to your pasteboard.