如何在XIB文件中设计自定义UIButton？

Question

我正在尝试为Radio Button类创建一个自定义的UIButton。当被选中时，按钮应该具有橙色背景和白色文本颜色；未被选中时，按钮应该具有白色背景和黑色文本颜色。我可以通过在按钮文本标签下方添加一个彩色的UIView来以编程方式实现这一点，但我希望能够使用XIB文件进行操作。然而，我却找不到任何关于如何在XIB文件中设计UIButton的在线教程。是否有一种方法可以做到这一点？是否有人能告诉我如何操作或指向一个教程？

编辑：为了清晰起见，我正在使用storyboards。我不是在说整个视图控制器的xib文件。我想要创建仅包含一个按钮的XIB文件。这可行吗？

- Samuel Noyes

---

只需创建一个UIButton的子类，然后将其分配给您的控件即可。 - meda

我已经创建了一个UIButton的子类。但是，我该如何将它附加到xib文件中呢？请参见编辑以获得澄清。@meda - Samuel Noyes

但是我想要一个可重复使用的自定义按钮。仅仅将它放在视图控制器中，我无法重复使用它。@meda - Samuel Noyes

那你的意思是无法在XIB中设计它吗？我知道可以绕过这个问题，但是我希望能以这种方式来完成。@meda - Samuel Noyes

@JohnFarkerson 你找到解决方法了吗？我面临相同的情况。 - Sylphos

Answer 1

这篇文章有点旧了...无论如何，以下是我在Xcode 10.1和Swift 4.2上完成它的方法。

1. 创建一个.xib文件，比如说CustomButton.xib并在其中放置一个UIView contentView
2. 创建一个.swift文件，也叫做CustomButton.swift
3. 打开.swift文件并定义自定义类如下：

import UIKit

class CustomButton: UIButton {

}

4. 现在打开.xib文件并选择contentView，然后在属性检查器中选择Size -> Freeform。这样你就可以在IB中操纵contentView的大小了。

5. 重要提示：在Identity Inspector中，不要将自定义类分配给contentView，也就是.xib文件的主视图。而是将其分配给File's Owner。

   ----->

   ----->

   (如果你选择了"Inherit Module From Target"，则将"Module"选项保留为Xcode)

6. 现在你应该能够在其类文件中使用ctrl-drag来创建一个引用contentView的outlet了。

7. 在你的类中创建以下初始化程序。

@IBOutlet weak var contentView: UIView!

//  init used if the view is created programmatically
override init(frame: CGRect) {
    super.init(frame: frame)
    self.customInit()
}

//  init used if the view is created through IB
required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    self.customInit()
}

//  Do custom initialization here
private func customInit()
{
    Bundle.main.loadNibNamed("CustomButton", owner: self, options: nil)

    self.addSubview(self.contentView)
    self.contentView.frame = self.bounds
    self.contentView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
}

现在，您应该能够使用.xib设计自定义按钮，并在需要的任何地方使用它。

- Martin

---

你的customInit中的第一行是什么意思？难道你不需要调用“.first”来检索视图，然后将其添加到内容视图中吗？ - Alan

我以相同的方式做了，但按钮无法点击。有什么办法可以让它可点击吗？ - RemembranceNN

Answer 2

你可以在没有XIB文件的情况下配置背景颜色 - 你需要创建一个UIButton的子类，并重写isHighlighted属性，像这样：

import UIKit class OverlayButton: UIButton { override var isHighlighted: Bool { didSet { if isHighlighted { backgroundColor = .orange tintColor = .white } else { backgroundColor = .white tintColor = .black } } } }

如果你想要使用XIB文件创建自定义按钮 - 你可以按照@martin上面描述的方式创建一个自定义视图，并将一个UIButton放在整个视图上。将其backgroundColor设置为.clear以用于正常状态，而对于高亮状态则设置为其他颜色。

- Ilya Biltuev

Answer 3

我在谈论仅为一个按钮制作XIB文件。

实际上，有一种方法我还没有测试过，但我不认为这是苹果推荐的方式，因为当您添加新的按钮子类时，创建新xib的选项被禁用了。

有两种替代方法可以创建可重用的按钮，具体取决于您想要放置按钮实现的位置：

1. 通过IB / storyboard设置按钮外观，然后将按钮复制到需要它的地方，您甚至不需要在您的情况下使用子类。 2. 通过代码设置颜色（或其他外观），并将其连接到storyboard上的按钮。此方法的缺点是除非您使用IBDesignable，否则您在xcode上看不到更改。

您绝对可以结合上述两种方法。通过界面构建器设置某些属性，然后在 - (void)awakeFromNib 下通过代码设置其他属性。

- Dickson Leonard

---

谢谢你的回答。能告诉我你提到的未经测试的方法吗？ - Samuel Noyes

我使用xib制作了可重用视图。我期望它也适用于按钮，因为UIButton是从UIView继承而来的。这个博客很好地解释了如何做到这一点。这并不简单，仍然有缺点（在博客中解释），这就是为什么我不建议除非你有更复杂的视图/按钮。如果我的回答对您有帮助，请点赞或将其标记为正确答案，我在这里还是新手，这将意味着很多 :) - Dickson Leonard