如何让 iOS Button 在按下时提供视觉反馈？答案

【问题标题】：How to make iOS Button give visual feedback when pressed?如何让 iOS Button 在按下时提供视觉反馈？
【发布时间】：2014-09-21 02:10:54
【问题描述】：

我正在制作一个 iOS 7 应用程序，我知道 Apple 的新设计指南需要一堆平面设计极简主义的东西，但是这个应用程序并不是真正针对精通技术的人群，所以 Apple 的指南提出了一个问题。我有一个普通的按钮，里面只有文字，我想在它周围画一个轮廓，我还想让按钮对被按下做出反应，这样人们就知道它是一个按钮，所以当按钮将他们带到不同的应用程序时，他们不会惊慌失措吗？那我该怎么做

在常规 iOS 按钮周围添加轮廓？
让一个普通的 iOS Button 给被按下的一些简单的视觉反馈？

【问题讨论】：

showsTouchOnHighlight 属性。
提示：故意违反设计指南很可能会导致您的应用被拒绝。
@esqew 在按钮周围放置一个框会导致我的应用被拒绝？
@AlexFritz 不，不一定。不过，那些在未来阅读这个问题并可能看到关于覆盖UIButton 外观的答案的人可能会明白这一点。我只是出于提供信息的目的发表评论。只要它以良好的品味完成并适合您的 UI 的其余部分，那么它应该不是问题。但是，我不能说这 100%，因为我不是进行审查的人。

标签： ios user-interface ios7

【解决方案1】：

最简单的方法：将 UIButton 的类型设为“System”，而不是“Custom”。系统按钮的图像和/或文本会在触摸时突出显示。

您应该在 Interface Builder 中执行此操作，方法是将按钮的“类型”更改为“系统”

但是，如果您需要以编程方式执行此操作，您可以这样做：

 UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];

至于 UIButton 的边框，你可以这样做：

- (void)viewDidLoad {
    [super viewDidLoad];
    self.button.layer.cornerRadius = 5;
    self.button.layer.borderColor = [UIColor blackColor];
    self.button.layer.borderWidth = 1;
}

【讨论】：

【解决方案2】：

如果您使用故事板（界面构建器）来设计您的应用程序，这很容易：

创建UIButton 的子类。我们就叫它XYBorderButton吧。

在 XYBorderButton.m 中添加方法：

- (id)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self makeBorder];
    }
    return self;
}

- (void)makeBorder {
    self.layer.cornerRadius = 10.0;
    self.layer.borderColor = [UIColor blueColor];
    self.layer.borderWidth = 1.0;
}

然后在界面生成器中选择按钮并将其类更改为XYBorderButton

您可以提供视觉反馈，例如通过更改按钮的背景颜色和/或更改其字体颜色。

使用 Interface Builder 设置这些属性非常容易：只需选择按钮，然后在状态配置下拉菜单中选择状态“突出显示”，然后根据需要设置背景颜色和字体颜色。

【讨论】：

【解决方案3】：

extension UIButton {
func provideVisualFeedback4press()
{
    backgroundColor = cyan
    alpha = 0
    UIView .animate(withDuration: 0.1, animations: { [weak self] in
        guard let s = self else {
            return
        }
        s.alpha = 1
    }, completion: { [weak self] completed  in
        if completed {
            guard let s = self else {
                return
            }
            s.backgroundColor = UIColor.white
        }
    })
}}

用法：

@objc func backAction(_ sender:UIButton!)
{
    sender.provideVisualFeedback4press()

【讨论】：

【解决方案4】：

如果您设置UIButton 的文本或图像属性，它会在按下时自动给出反馈（字体颜色和图像会变暗）。但是，如果您只是将按钮放在其他一些控件的顶部，则必须连接到 Touch Down 事件并手动将外观更改为您想要的任何控件。

【讨论】：