小白求指点~~vc问题，想做一个可以伸缩的按钮

Question

我想实现的功能是点击button按钮，横线以下收缩，button的背景图片变成img2（图一背景）。 再点击button按钮横线以下恢复，button的背景图片改变为img1（图二背景）。。。以下图片是我要实现的大致意思，和我button按钮的代码，要是能把button的文本隐藏也行~~!

                                       图一

                                       图二

Answer 1

该回答引用ChatGPT

您可以使用以下步骤实现您所需的功能：

• 创建一个button按钮，其背景图片设置为img1。按钮上方的横线可以使用一个UIView或UIImageView来实现。

• 通过在ViewController中使用IBOutlet来引用button和横线的视图。

• 在ViewController中创建一个名为buttonPressed的IBAction方法，并将其连接到button按钮的Touch Up Inside事件。

• 在buttonPressed方法中使用UIView.animate函数来实现动画。在动画中，将横线的高度设置为0，按钮的背景图片设置为img2，并将按钮的文本隐藏。如果您使用的是UIButton，可以使用button.setTitleColor()函数来隐藏文本。

• 在buttonPressed方法中添加条件语句来切换按钮状态。例如，您可以使用一个名为buttonIsExpanded的布尔变量来表示按钮当前的状态。如果buttonIsExpanded为true，则将其设置为false，并将按钮的状态设置为“未展开”状态。如果buttonIsExpanded为false，则将其设置为true，并将按钮的状态设置为“已展开”状态。

• 在buttonPressed方法的最后，使用UIView.animate函数来实现动画。在动画中，将横线的高度设置为原始高度，按钮的背景图片设置为img1，并将按钮的文本显示出来。如果您使用的是UIButton，可以使用button.setTitleColor()函数来显示文本。

以下是示例代码：

class ViewController: UIViewController {
    @IBOutlet weak var button: UIButton!
    @IBOutlet weak var lineView: UIView!
    @IBOutlet weak var lineHeightConstraint: NSLayoutConstraint!
    
    var buttonIsExpanded = false
    var originalLineHeight: CGFloat = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 获取横线的原始高度
        originalLineHeight = lineHeightConstraint.constant
    }

    @IBAction func buttonPressed(_ sender: UIButton) {
        UIView.animate(withDuration: 0.3, animations: {
            // 收缩横线和隐藏按钮文本
            self.lineHeightConstraint.constant = 0
            self.button.setBackgroundImage(UIImage(named: "img2"), for: .normal)
            self.button.setTitleColor(.clear, for: .normal)
            self.view.layoutIfNeeded()
        }, completion: { _ in
            // 切换按钮状态
            if self.buttonIsExpanded {
                self.buttonIsExpanded = false
            } else {
                self.buttonIsExpanded = true
            }
            
            UIView.animate(withDuration: 0.3, animations: {
                // 恢复横线和显示按钮文本
                self.lineHeightConstraint.constant = self.originalLineHeight
                self.button.setBackgroundImage(UIImage(named: "img1"), for: .normal)
                self.button.setTitleColor(.black, for: .normal)
                self.view.layoutIfNeeded()
            })
        })
    }
}

请注意，此代码仅提供了一个基本的框架，您需要根据您的具体要求进行调整和修改。