如何创建突出显示正确答案的效果

Question

我正在学习Swift，我正在把自己投入深渊，强迫自己学习语言。我有一个小侄子，他想做一个应用程序来帮助他学习数字。

该应用旨在在屏幕上设置一定数量的按钮，如下所示。我有播放 Directions 的代码，它告诉用户要 select 的号码。音频文件 A-N14a 说要单击 4。完成按钮设置为移动到下一个屏幕。

我想问的是，如果我要按4，而他们按9，我想知道如何实现一个功能来提示点击数字4？想法是将背景更改为按钮，但我不知道如何实现该功能。我也对其他想法持开放态度。请注意，我不知道该怎么做，而且我正在努力学习，所以提供的代码可能非常简单并且处于起步阶段。

下面是屏幕图像和该页面的代码。

ScreenShot of Page

import UIKit
import AVFoundation

class Intervention_Numerals1: UIViewController {


    @IBOutlet weak var Directions: UIButton!
    @IBOutlet weak var Done: UIButton!
    var audioPlayer = AVAudioPlayer()

    
    override func viewDidLoad() {
        super.viewDidLoad()
        setUpElements()
        //Audio Test
        do {
            audioPlayer = try AVAudioPlayer(contentsOf: URL.init(fileURLWithPath: Bundle.main.path(forResource: "A-N14a", ofType:"mp3")!))
            audioPlayer.prepareToPlay()
        } catch {
            print(error)
        }
    }
    
    func setUpElements() {
        // Style the elements
        Utilities.styleFilledButton(Directions)
        Utilities.styleFilledButton(Done)
    }

    @IBAction func Play(_ sender: Any) {
        audioPlayer.play()
    }
    
    
}

请让我知道任何提示或建议或类似问题的链接，即使我自己找不到。

Answer 1

我会这样做：

1.创建与您的数字一样多的 IBOutlets（我假设您的示例为 0-9？）并将它们 link 添加到您的按钮 - 例如

@IBOutlet weak var Button1: UIButton!

@IBOutlet weak var Button2: UIButton!

// Create as many as you need - Probably 10?

2。使用此代码

创建一个 IBAction 并 link 它到您所有的按钮

@IBAction func checkCorrectAnswer(_ sender: UIButton) {
      
   let arrayOfButtons:[UIButton] = [Button1, Button2] // Here you add all your buttons

   let buttonTitle = sender.title(for: .normal)!

   if buttonTitle == "YOUR CORRECT ANSWER" {   //You have to substitute "YOUR CORRECT ANSWER" with the right string value

      sender.backgroundColor = .green

   } else {

      sender.backgroundColor = .red

      for i in arrayOfButtons {

         if i.titleLabel?.text == "YOUR CORRECT ANSWER" { i.backgroundColor = .orange }

      }

   }

}

尽情享受吧！

Answer 2

我会这样做：

录制“点击数字”的声音，然后录制数字 0 到 9 的声音。将数字声音命名为“0.mp3”到“9.mp3”

创建一个带有 4 个按钮的故事板（如您发布的图片。）

设置按钮 IBOutlets buttonA - buttonD。将这些按钮放入一个数组中：

let buttonsArray = [buttonA, buttonB, buttonC, buttonD]

用数字 0-9 填充一个数组。洗牌。删除 4 个值，将它们放入数组“buttonValues”（使用方法 removeLast()。）从 0-9 生成 non-repeating 值的代码可能如下所示：

var randomNumbers =  [Int]() //Define an array to hold random Ints
var lastValueReturned: Int?

//Function to return a random Int. It won't return the same value twice
func randomNumber() -> Int {


    //Remove and return an item from the array
    var result: Int
    repeat {
        //If the array is empty, fill it with the shuffled numbers 0...9
        if randomNumbers.isEmpty {
            randomNumbers += Array(0...9).shuffled()
        }
        result = randomNumbers.removeLast()
    } while result == lastValueReturned
    lastValueReturned = result
    return result
}

遍历 buttonValues 数组并将每个数字的字符串安装为其中一个按钮的标题：

对于索引 = 0...3 { buttonsArray[index].setTitle("(buttonValues[index])", forSate: .normal) }

选择索引 0-3 作为“正确”数字。

let indexToPick = Int.random(in: 0...3)

在 buttonValues 中查找该值，并使用它来选择要播放的声音文件：

let numberToPick = buttonValues[indexToPick]

let soundName = "\(numberToPick).mp3"

加载并播放“点击数字”声音，然后加载并播放所选数字（soundName）的声音。

当用户点击按钮时，让 IBAction 方法使用传递给它的 sender 参数，并查看按钮数组 buttonsArray 以查看点击了哪个按钮索引。

如果是正确的按钮，则执行成功操作。

如果点击的按钮索引不是 indexToPick，请制作一个动画来更改按钮在 indexToPick 处的背景颜色或按钮的边框宽度等，然后再将其动画化到正常。（查看 UIView animate(duration:) 系列方法，了解如何为按钮的背景颜色设置动画。使用带有 options: 参数的表单，并设置 .autoreverse 选项。）

如果您是 iOS 开发的新手，弄清楚如何为您的正确答案按钮制作动画可能是一个挑战。我创建了一个示例项目，它只为 4 个随机按钮之一设置动画：https://github.com/DuncanMC/ButtonAnimation.git

该项目的代码如下：

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var buttonA: UIButton!
    @IBOutlet weak var buttonB: UIButton!
    @IBOutlet weak var buttonC: UIButton!
    @IBOutlet weak var buttonD: UIButton!

    //Define an empty array to hold buttons.
    var buttonsArray = [UIButton]()

    override func viewDidLoad() {
        super.viewDidLoad()

        //Put our button outlets into an array so we can reference them by index.
        buttonsArray = [buttonA, buttonB, buttonC, buttonD]

        //Give our buttons a cornerRadius so they look rounded when we add a border and fill color
        for button in buttonsArray {
            button.layer.cornerRadius = 10
        }
    }

    @IBAction func handleAnimateButton(_ sender: UIButton) {
        sender.isEnabled = false

        //Pick a random button
        let button = buttonsArray.randomElement()!

        //Create an auto-reversing animation that fills the button with cyan, and draws a border around it.
        //(Showing the border won't fade in and out, but it doesn't really matter)
        UIView.animate(withDuration: 0.25,
                       delay: 0,
                       options: [.autoreverse, .curveEaseInOut],
                       animations: {
                        button.backgroundColor = .cyan
                        button.layer.borderWidth = 1.0
                       }, completion: {
                        success in
                        button.backgroundColor = .clear
                        sender.isEnabled = true
                        button.layer.borderWidth = 0
                       })
    }
}

如何创建突出显示正确答案的效果

How to create an effect to highlight correct answer

swift

xcode

button

highlight