IOS 开发之自定义按钮实现文字图片位置随意定制

("IOS 开发之自定义按钮实现文字图片位置随意定制" 的完整攻略)

1. 背景

在 IOS 开发中，经常需要对按钮进行自定义设计，比如更改文字和图片的位置，而系统提供的 Button 组件实现不了这种灵活的需求。在本文中，我将介绍如何使用 Swift 语言自定义一个可定制文字和图片位置的 Button 组件。

2. 实现步骤

2.1 创建 Button 类

首先，我们需要创建一个继承自 UIButton 的 Button 类。打开 Xcode，新建一个 Swift 文件，输入以下代码：

import UIKit

class CustomButton: UIButton {

}

2.2 重写 layoutSubviews 方法

在按钮类中，layoutSubviews 方法会在每次布局发生更改时进行调用。所以我们可以在这里重新设置按钮的布局。输入以下代码：

override func layoutSubviews() {
    super.layoutSubviews()

}

2.3 设置图片和文字的位置

我们可以通过设置图片和文字的偏移量来实现图片和文字位置的任意定制。添加以下代码：

override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
    let titleRect = super.titleRect(forContentRect: contentRect)
    let imageRect = super.imageRect(forContentRect: contentRect)
    let spacing: CGFloat = 10
    let titleTop: CGFloat = 0
    let titleWidth = titleRect.width
    let titleHeight = titleRect.height
    let titleLeft = (self.bounds.size.width - titleWidth) / 2 - imageRect.size.width - spacing
    return CGRect(x: titleLeft, y: titleTop, width: titleWidth, height: titleHeight)
}

override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
    let titleRect = super.titleRect(forContentRect: contentRect)
    let imageRect = super.imageRect(forContentRect: contentRect)
    let spacing: CGFloat = 10
    let imageTop = (self.bounds.size.height - imageRect.size.height) / 2
    let imageLeft = (self.bounds.size.width - imageRect.size.width) / 2 + titleRect.size.width + spacing
    return CGRect(x: imageLeft, y: imageTop, width: imageRect.size.width, height: imageRect.size.height)
}

在这段代码中，我们通过修改 spacing、titleTop、imageTop、titleLeft、 imageLeft 等属性，实现了图片和文字的位置定制。例如：

• spacing 表示图片和文字之间的间距；
• titleTop 表示文字距离 button 顶部的间距；
• titleLeft 和 imageLeft 分别表示文字和图片距离 Button 左侧的间距；

2.4 添加一些样式

现在我们已经可以通过自定义 Button 类来实现定制各种样式的 Button。例如，下面的代码展示了如何创建一个带互换图片和文字位置的 Button：

import UIKit

class CustomButton: UIButton {

    var isFlipped: Bool = false {
        didSet {
            setNeedsLayout()
        }
    }

    override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
        let titleRect = super.titleRect(forContentRect: contentRect)
        let imageRect = super.imageRect(forContentRect: contentRect)
        let spacing: CGFloat = 10
        let titleTop: CGFloat = 0
        let titleWidth = titleRect.width
        let titleHeight = titleRect.height
        let titleLeft = isFlipped ? (self.bounds.size.width - titleWidth) / 2 + imageRect.size.width + spacing : (self.bounds.size.width - titleWidth) / 2 - imageRect.size.width - spacing
        return CGRect(x: titleLeft, y: titleTop, width: titleWidth, height: titleHeight)
    }

    override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
        let titleRect = super.titleRect(forContentRect: contentRect)
        let imageRect = super.imageRect(forContentRect: contentRect)
        let spacing: CGFloat = 10
        let imageTop = (self.bounds.size.height - imageRect.size.height) / 2
        let imageLeft = isFlipped ? (self.bounds.size.width - imageRect.size.width) / 2 - titleRect.size.width - spacing : (self.bounds.size.width - imageRect.size.width) / 2 + titleRect.size.width + spacing
        return CGRect(x: imageLeft, y: imageTop, width: imageRect.size.width, height: imageRect.size.height)
    }

    convenience init(frame: CGRect, title: String?, image: UIImage?) {
        self.init(frame: frame)
        setTitle(title, for: .normal)
        setImage(image, for: .normal)
        setTitleColor(UIColor.blue, for: .normal)
    }
}

在这段代码中，我们添加了一个 isFlipped 属性，用于控制图片和文字的位置。我们还添加了一个 convenience 初始化方法，方便在其他地方直接使用这个自定义的 Button。

3. 示例

3.1 示例 1

在 ViewController 中添加以下代码：

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let button1 = CustomButton(frame: CGRect(x: 40, y: 100, width: 100, height: 40), title: "登录", image: UIImage(systemName: "person.crop.circle.fill"))
        button1.backgroundColor = UIColor.systemTeal
        self.view.addSubview(button1)

        let button2 = CustomButton(frame: CGRect(x: 40, y: 200, width: 150, height: 60), title: "免费注册", image: UIImage(systemName: "person.badge.plus.fill"))
        button2.isFlipped = true
        button2.backgroundColor = UIColor.systemPink
        self.view.addSubview(button2)
    }
}

在这段代码中，我们创建了两个自定义 Button。其中，button1 的样式为默认样式，用于点击登录；button2 的样式为互换图片和文字位置后的样式，用于点击免费注册。

3.2 示例 2

我们还可以在多个属性上进行定制，例如在 Button 的圆角、边框、阴影、高亮颜色等方面。在 CustomButton 类中添加以下代码：

override var isHighlighted: Bool {
    didSet {
        self.backgroundColor = isHighlighted ? UIColor.systemGray : UIColor.systemTeal
    }
}

override var isSelected: Bool {
    didSet {
        self.layer.borderWidth = isSelected ? 2 : 0
    }
}

override func draw(_ rect: CGRect) {
    super.draw(rect)
    self.clipsToBounds = true
    self.layer.cornerRadius = 20
    self.layer.borderColor = UIColor.lightGray.cgColor
    self.layer.borderWidth = 0
    self.layer.shadowColor = UIColor.black.cgColor
    self.layer.shadowOpacity = 0.5
    self.layer.shadowRadius = 5
    self.layer.shadowOffset = CGSize(width: 0, height: 3)
}

在这段代码中，我们通过定制高亮颜色、选中边框、圆角、边框、阴影等属性，让这个 Button 看起来更加美观。例如，当 Button 被选中时，边框为 2 像素宽的灰色。

4. 总结

通过对 layoutSubviews 方法的重写，我们可以实现 Button 文字和图片位置的自定义。通过上述示例，我们发现自定义 Button 的能力非常强大，可以通过各种方法来自定义它的样式和行为，让其符合我们的设计需求。