如何以编程方式创建Input Accessory View？

Hey there! Let's break down how to get that keyboard accessory view with your text field, emoji button, and post button laid out perfectly—constraints are definitely the key here, so let's tackle your questions one by one.

1. Do I need constraints for the container view? #

Absolutely yes! The container view acts as the parent for all your accessory elements, so it needs clear constraints to define its size and position relative to the keyboard accessory area. Without them, the system won't know how to render it properly, leading to weird layout glitches or the view not appearing at all.

For most cases, you'll want to either:

• Fix its height (common for standard accessory bar heights like 44pt) and pin its leading, trailing, top, and bottom edges to the accessory view's bounds.
• Let it auto-adjust its height based on its content (great if you have dynamic elements like a growing text field).

2. How to add proper constraints for the text field (and other elements)? #

Let's walk through a practical Swift example (assuming iOS development) that mirrors the layout you're aiming for: emoji button on the left, text field filling the middle, post button on the right.

First, set up your container view and subviews:

// Create the container view
let containerView = UIView()
containerView.backgroundColor = .systemBackground
containerView.translatesAutoresizingMaskIntoConstraints = false

// Set it as the input accessory view for your main text field
yourMainTextField.inputAccessoryView = containerView

// Add subviews: emoji button, input text field, post button
let emojiButton = UIButton(type: .system)
emojiButton.setImage(UIImage(systemName: "face.smiling"), for: .normal)
emojiButton.translatesAutoresizingMaskIntoConstraints = false
containerView.addSubview(emojiButton)

let inputTextField = UITextField()
inputTextField.placeholder = "Type your message..."
inputTextField.borderStyle = .roundedRect
inputTextField.translatesAutoresizingMaskIntoConstraints = false
containerView.addSubview(inputTextField)

let postButton = UIButton(type: .system)
postButton.setTitle("Post", for: .normal)
postButton.titleLabel?.font = UIFont.systemFont(ofSize: 16, weight: .semibold)
postButton.translatesAutoresizingMaskIntoConstraints = false
containerView.addSubview(postButton)

Now add the critical constraints to position everything correctly:

NSLayoutConstraint.activate([
    // Container view constraints (fixed height example)
    containerView.heightAnchor.constraint(equalToConstant: 44),
    
    // Emoji button constraints
    emojiButton.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 8),
    emojiButton.centerYAnchor.constraint(equalTo: containerView.centerYAnchor),
    emojiButton.widthAnchor.constraint(equalToConstant: 30),
    emojiButton.heightAnchor.constraint(equalToConstant: 30),
    
    // Post button constraints
    postButton.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -8),
    postButton.centerYAnchor.constraint(equalTo: containerView.centerYAnchor),
    postButton.widthAnchor.constraint(equalToConstant: 60),
    
    // Text field constraints (fills the space between buttons)
    inputTextField.leadingAnchor.constraint(equalTo: emojiButton.trailingAnchor, constant: 8),
    inputTextField.trailingAnchor.constraint(equalTo: postButton.leadingAnchor, constant: -8),
    inputTextField.centerYAnchor.constraint(equalTo: containerView.centerYAnchor),
    inputTextField.heightAnchor.constraint(equalToConstant: 36)
])

Key Notes to Avoid Issues #

• Always set translatesAutoresizingMaskIntoConstraints = false for every view you're using Auto Layout on—this disables the system's automatic constraint generation, which often causes conflicts.
• If you want the container view to auto-adjust its height (e.g., for a multi-line text field), replace the fixed containerView.heightAnchor constraint with top/bottom padding for each subview:

  emojiButton.topAnchor.constraint(greaterThanOrEqualTo: containerView.topAnchor, constant: 4),
  emojiButton.bottomAnchor.constraint(lessThanOrEqualTo: containerView.bottomAnchor, constant: -4),
  inputTextField.topAnchor.constraint(greaterThanOrEqualTo: containerView.topAnchor, constant: 4),
  inputTextField.bottomAnchor.constraint(lessThanOrEqualTo: containerView.bottomAnchor, constant: -4),
  postButton.topAnchor.constraint(greaterThanOrEqualTo: containerView.topAnchor, constant: 4),
  postButton.bottomAnchor.constraint(lessThanOrEqualTo: containerView.bottomAnchor, constant: -4)
  

• Double-check for constraint conflicts in the Xcode debug console—if you see warnings, look for duplicate constraints (like setting both leading and left anchors) or conflicting size rules.

内容的提问来源于stack exchange，提问作者Dipali Bajaj