iOS-UIButton、UITextField 子控件 Frame 设置方法详解

2023-10-21 02:30:22

使用 Frame 属性在 UIButton 和 UITextField 中调整子控件位置

前言

在 iOS 开发中，按钮和文本输入框是必不可少的控件。然而，有时我们需要调整这些控件中子控件的位置，例如图片和文本，以满足特定的设计要求。本文将深入探讨如何使用 Frame 属性在 UIButton 和 UITextField 中设置子控件的位置。

UIButton 子控件 Frame 设置

正常方式

要设置 UIButton 中子控件的 Frame，可以使用 frame 属性。这是一种简单直接的方法，适用于大多数情况。

let button = UIButton()
button.frame = CGRect(x: 0, y: 0, width: 100, height: 50)
let imageView = UIImageView(image: UIImage(named: "icon.png"))
imageView.frame = CGRect(x: 10, y: 10, width: 20, height: 20)
button.addSubview(imageView)

使用 Auto Layout

Auto Layout 是一种更高级的方法，可用于以编程方式设置视图约束。它允许我们在不同屏幕尺寸和设备方向下动态调整子控件的位置。

let button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false
let imageView = UIImageView(image: UIImage(named: "icon.png"))
imageView.translatesAutoresizingMaskIntoConstraints = false
button.addSubview(imageView)

NSLayoutConstraint.activate([
    imageView.leadingAnchor.constraint(equalTo: button.leadingAnchor, constant: 10),
    imageView.topAnchor.constraint(equalTo: button.topAnchor, constant: 10),
    imageView.widthAnchor.constraint(equalToConstant: 20),
    imageView.heightAnchor.constraint(equalToConstant: 20)
])

UITextField 子控件 Frame 设置

正常方式

let textField = UITextField()
textField.frame = CGRect(x: 0, y: 0, width: 100, height: 50)
let placeholderLabel = textField.placeholderLabel
placeholderLabel.frame = CGRect(x: 5, y: 0, width: 150, height: 20)

使用 Auto Layout

let textField = UITextField()
textField.translatesAutoresizingMaskIntoConstraints = false
let placeholderLabel = textField.placeholderLabel
placeholderLabel.translatesAutoresizingMaskIntoConstraints = false

NSLayoutConstraint.activate([
    placeholderLabel.leadingAnchor.constraint(equalTo: textField.leadingAnchor, constant: 5),
    placeholderLabel.topAnchor.constraint(equalTo: textField.topAnchor),
    placeholderLabel.widthAnchor.constraint(equalToConstant: 150),
    placeholderLabel.heightAnchor.constraint(equalToConstant: 20)
])