TEAM LICENSES: Save money and learn new skills through a Hacking with Swift+ team license >>

SOLVED: Project2 : How can I remove the padding from the flag buttons?

Forums > 100 Days of Swift

I just finished Project2 but when I added the borders to the flag buttons they don't outline the flag images perfectly. It seems like there is some padding between the image and the border. I tried to look through the Attribute Inspector for the buttons to see if I could change it there, but I'm not seeing it.

How can I remove the extra space between the button image and the border?

My code looks like this if it helps at all

import UIKit

class ViewController: UIViewController {
    @IBOutlet var button1: UIButton!
    @IBOutlet var button2: UIButton!
    @IBOutlet var button3: UIButton!

    var countries = [String]()
    var score = 0
    var correctAnswer = 0
    var currentQuestion = 1

    override func viewDidLoad() {
        super.viewDidLoad()

        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

        askQuestion()
    }

    func askQuestion(action: UIAlertAction! = nil) {
        countries.shuffle()
        correctAnswer = Int.random(in: 0...2)
        title = "\(countries[correctAnswer].uppercased()) : \(score)"

        button1.setImage(UIImage(named: countries[0]), for: .normal)
        button2.setImage(UIImage(named: countries[1]), for: .normal)
        button3.setImage(UIImage(named: countries[2]), for: .normal)
    }

    func newGame(action: UIAlertAction! = nil) {
        score = 0
        currentQuestion = 1
        askQuestion()
    }

    @IBAction func buttonTapped(_ sender: UIButton) {

        if sender.tag == correctAnswer {
            title = "Correct"
            score += 1
        } else {
            title = "Wrong"
            score -= 1
        }

        var alertActionTitle = "Continue"
        var alertMessage = "That is the flag of \(countries[sender.tag].uppercased())\nQuestion: \(currentQuestion)/10\nYour score is: \(score)"
        var alertHandler = askQuestion

        if currentQuestion < 10 {
            currentQuestion += 1
        } else {
            alertActionTitle = "New Game"
            alertMessage = "Game Over\nFinal score: \(score)"
            alertHandler = newGame
        }

        let ac = UIAlertController(title: title, message: alertMessage, preferredStyle: .alert)
        ac.addAction(UIAlertAction(title: alertActionTitle, style: .default, handler: alertHandler))
        present(ac, animated: true)
    }
}

3      

I found that if I change the "Content Insets" property of a button in the Attribute Inspector from "Default" to "Custom", then change one of the values there (Leading, Trailing, Top, or Bottom) away from zero and then back to zero, it seems to solve the problem.

5      

Hacking with Swift is sponsored by Superwall.

SPONSORED Superwall lets you build & test paywalls without shipping updates. Run experiments, offer sales, segment users, update locked features and more at the click of button. Best part? It's FREE for up to 250 conversions / mo and the Superwall team builds out 100% custom paywalls – free of charge.

Learn More

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

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

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.