iOS Objective-C使用Auto Layout实现头部视图首尾图标布局求助

先说说你代码里的两个核心错误： #

• 创建约束时，你把约束关联的对象写成了leftImage（这是UIImage实例，不是可视的视图对象），应该用leftImageView这个UIImageView实例。
• 约束不能添加到子视图leftImageView自身，必须添加到约束涉及的两个视图的共同父视图（也就是headerView）上。

完整的Auto Layout改造代码 #

下面是替换硬编码frame后的完整实现，完全通过Auto Layout实现左图标靠左、右图标靠右、文本居中的布局，所有尺寸和位置都不再硬编码：

// 创建headerView，无需设置frame，Auto Layout会自动计算布局
UIView* headerView = [[UIView alloc] init];
headerView.backgroundColor = UIColorFromRGB(0x5F70B9);
// 若headerView本身也是用Auto Layout布局，需关闭自动转换约束
headerView.translatesAutoresizingMaskIntoConstraints = NO;

// 左侧图标
UIImage* leftImage = [UIImage imageNamed: @"search_list"];
UIImageView* leftImageView = [[UIImageView alloc] initWithImage: leftImage];
leftImageView.translatesAutoresizingMaskIntoConstraints = NO;
[headerView addSubview: leftImageView];

// 文本视图
UITextView* textView = [[UITextView alloc] init];
textView.backgroundColor = UIColorFromRGB(0x5F70B9);
textView.textColor = UIColorFromRGB(0xFFFFFF);
[textView setFont:[UIFont preferredFontForTextStyle:UIFontTextStyleTitle3]];
textView.text = STLocalizedString(@"message_overall_non_reply");
textView.editable = NO;
textView.scrollEnabled = NO; // 关闭滚动，避免textView高度自适应异常
textView.translatesAutoresizingMaskIntoConstraints = NO;
[headerView addSubview: textView];

// 右侧图标
UIImage* rightImage = [UIImage imageNamed: @"arrow_mask"];
UIImageView* rightImageView = [[UIImageView alloc] initWithImage: rightImage];
rightImageView.translatesAutoresizingMaskIntoConstraints = NO;
[headerView addSubview: rightImageView];

// 批量添加Auto Layout约束
NSArray *constraints = @[
    // 左侧图标：与headerView左侧间距10，垂直居中
    [leftImageView.leadingAnchor constraintEqualToAnchor:headerView.leadingAnchor constant:10],
    [leftImageView.centerYAnchor constraintEqualToAnchor:headerView.centerYAnchor],
    
    // 右侧图标：与headerView右侧间距10，垂直居中
    [rightImageView.trailingAnchor constraintEqualToAnchor:headerView.trailingAnchor constant:-10],
    [rightImageView.centerYAnchor constraintEqualToAnchor:headerView.centerYAnchor],
    
    // 文本视图：夹在左右图标之间，垂直居中
    [textView.leadingAnchor constraintEqualToAnchor:leftImageView.trailingAnchor constant:10],
    [textView.trailingAnchor constraintEqualToAnchor:rightImageView.leadingAnchor constant:-10],
    [textView.centerYAnchor constraintEqualToAnchor:headerView.centerYAnchor],
    
    // 可选：固定headerView高度（对应原代码的frameHeight）
    [headerView.heightAnchor constraintEqualToConstant:frameHeight],
    // 可选：让headerView宽度匹配父视图，左右各留8间距（对应原代码的CGRectMake(8,8,...)）
    [headerView.widthAnchor constraintEqualToAnchor:headerView.superview.widthAnchor constant:-16],
    [headerView.topAnchor constraintEqualToAnchor:headerView.superview.topAnchor constant:8]
];

[NSLayoutConstraint activateConstraints:constraints];

关键注意点 #

1. 所有通过Auto Layout布局的视图，必须设置translatesAutoresizingMaskIntoConstraints = NO，关闭系统自动生成的约束。
2. 使用Apple推荐的锚点（Anchor）API比旧的constraintWithItem写法更简洁易读。
3. UIImageView通过initWithImage初始化后，会基于图片尺寸自动生成intrinsicContentSize，无需硬编码宽高约束，如需强制修改大小再额外添加宽高约束即可。
4. UITextView必须关闭scrollEnabled，否则它的内在尺寸计算会异常，导致布局错位。

内容的提问来源于stack exchange，提问作者Landia Yung